@ttoss/ui 6.5.0 → 6.6.0

package/README.md

@@ -5,7 +5,7 @@ React component library built on [Theme UI](https://theme-ui.com/) for building
 ## Installation
 
 ```shell
-pnpm add @ttoss/ui @ttoss/react-icons @emotion/react
+pnpm add @ttoss/ui @ttoss/react-icons @emotion/react @chakra-ui/react
 ```
 
 **ESM Only**: This package requires ES modules support.
@@ -61,6 +61,61 @@ export const customTheme: Theme = {
 
 **Note**: No custom JSX pragma needed when using `sx` prop directly on library components.
 
+## Chakra UI Integration
+
+This package integrates seamlessly with [Chakra UI](https://chakra-ui.com/). You can import and use any Chakra UI component directly, and it will automatically be styled according to your theme configuration.
+
+### Using Chakra UI Components
+
+```tsx
+import { Button } from '@chakra-ui/react';
+import { ThemeProvider } from '@ttoss/ui';
+import { BruttalTheme } from '@ttoss/theme/Bruttal';
+
+export const App = () => (
+  <ThemeProvider theme={BruttalTheme}>
+    {/* Chakra Button automatically styled with BruttalTheme */}
+    <Button colorScheme="blue">Chakra Button</Button>
+  </ThemeProvider>
+);
+```
+
+### Customizing Chakra Components via Theme
+
+You can customize how Chakra UI components render by adding component specifications to your theme:
+
+```tsx
+import type { Theme } from '@ttoss/ui';
+
+export const customTheme: Theme = {
+  colors: {
+    primary: '#007acc',
+  },
+  // Customize Chakra UI Button component
+  components: {
+    Button: {
+      defaultProps: {
+        size: 'lg',
+        variant: 'solid',
+      },
+      variants: {
+        solid: {
+          bg: 'primary',
+          color: 'white',
+        },
+      },
+    },
+  },
+};
+```
+
+**Key Points:**
+
+- All Chakra UI components work out of the box with `ThemeProvider`
+- Component styles are controlled through theme configuration
+- No need for additional setup or wrappers
+- Full access to Chakra's [component theming API](https://chakra-ui.com/docs/styled-system/component-style)
+
 ## Available Components
 
 **Browse all components**: [Storybook Documentation](https://storybook.ttoss.dev/?path=/story/ui)

package/dist/esm/index.js

@@ -6,11 +6,76 @@ var __name = (target, value) => __defProp(target, "name", {
   configurable: true
 });
 
+// src/chakra/ChakraThemeProvider.tsx
+import { ChakraProvider as ChakraProviderBase, createSystem, defaultConfig } from "@chakra-ui/react";
+import * as React2 from "react";
+
+// src/theme/useTheme.ts
+import { useThemeUI } from "theme-ui";
+var useTheme = useThemeUI;
+
+// src/chakra/ChakraThemeProvider.tsx
+var wrapTokenValues = /* @__PURE__ */__name(tokens => {
+  if (!tokens) {
+    return void 0;
+  }
+  const wrapped = {};
+  for (const [key, value] of Object.entries(tokens)) {
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      wrapped[key] = wrapTokenValues(value);
+    } else {
+      wrapped[key] = {
+        value
+      };
+    }
+  }
+  return wrapped;
+}, "wrapTokenValues");
+var toChakraTheme = /* @__PURE__ */__name((themeUITheme, overrides = {}) => {
+  const config = {
+    theme: {
+      tokens: {
+        borders: wrapTokenValues(themeUITheme.borders),
+        colors: wrapTokenValues(themeUITheme.rawColors ?? themeUITheme.colors),
+        fonts: wrapTokenValues(themeUITheme.fonts),
+        fontSizes: wrapTokenValues(themeUITheme.fontSizes),
+        fontWeights: wrapTokenValues(themeUITheme.fontWeights),
+        letterSpacings: wrapTokenValues(themeUITheme.letterSpacings),
+        lineHeights: wrapTokenValues(themeUITheme.lineHeights),
+        radii: wrapTokenValues(themeUITheme.radii),
+        sizes: wrapTokenValues(themeUITheme.sizes),
+        spacing: wrapTokenValues(themeUITheme.space),
+        zIndex: wrapTokenValues(themeUITheme.zIndices)
+      },
+      breakpoints: themeUITheme.breakpoints && Array.isArray(themeUITheme.breakpoints) ? {
+        sm: themeUITheme.breakpoints[0],
+        md: themeUITheme.breakpoints[1],
+        lg: themeUITheme.breakpoints[2],
+        xl: themeUITheme.breakpoints[3],
+        "2xl": themeUITheme.breakpoints[4]
+      } : void 0
+    },
+    ...overrides
+  };
+  return createSystem(defaultConfig, config);
+}, "toChakraTheme");
+var ChakraProvider = /* @__PURE__ */__name(({
+  children
+}) => {
+  const themeUITheme = useTheme();
+  const chakraSystem = React2.useMemo(() => {
+    return toChakraTheme(themeUITheme.theme);
+  }, [themeUITheme.theme]);
+  return /* @__PURE__ */React2.createElement(ChakraProviderBase, {
+    value: chakraSystem
+  }, children);
+}, "ChakraProvider");
+
 // src/components/Button.tsx
 import { Icon } from "@ttoss/react-icons";
-import * as React2 from "react";
+import * as React3 from "react";
 import { Button as ButtonUi } from "theme-ui";
-var Button = /* @__PURE__ */React2.forwardRef((props, ref) => {
+var Button = /* @__PURE__ */React3.forwardRef((props, ref) => {
   const {
     children,
     leftIcon,
@@ -18,7 +83,7 @@ var Button = /* @__PURE__ */React2.forwardRef((props, ref) => {
     loading,
     ...restProps
   } = props;
-  return /* @__PURE__ */React2.createElement(ButtonUi, {
+  return /* @__PURE__ */React3.createElement(ButtonUi, {
     type: "button",
     ...restProps,
     ref,
@@ -35,13 +100,13 @@ var Button = /* @__PURE__ */React2.forwardRef((props, ref) => {
       },
       ...restProps.sx
     }
-  }, loading && /* @__PURE__ */React2.createElement(Icon, {
+  }, loading && /* @__PURE__ */React3.createElement(Icon, {
     inline: true,
     icon: "three-dots-loading"
-  }), !loading && leftIcon && /* @__PURE__ */React2.createElement(Icon, {
+  }), !loading && leftIcon && /* @__PURE__ */React3.createElement(Icon, {
     inline: true,
     icon: leftIcon
-  }), children, rightIcon && /* @__PURE__ */React2.createElement(Icon, {
+  }), children, rightIcon && /* @__PURE__ */React3.createElement(Icon, {
     inline: true,
     icon: rightIcon
   }));
@@ -161,10 +226,10 @@ var Badge = /* @__PURE__ */__name(({
 import { Box } from "theme-ui";
 
 // src/components/Card.tsx
-import * as React3 from "react";
+import * as React4 from "react";
 import { Box as Box2, Card as CardUi } from "theme-ui";
 var Card = /* @__PURE__ */__name(props => {
-  return /* @__PURE__ */React3.createElement(CardUi, {
+  return /* @__PURE__ */React4.createElement(CardUi, {
     ...props,
     sx: {
       backgroundColor: "display.background.secondary.default",
@@ -184,7 +249,7 @@ var CardTitle = /* @__PURE__ */__name(({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */React3.createElement(Box2, {
+  return /* @__PURE__ */React4.createElement(Box2, {
     ...props,
     sx: {
       paddingY: "4",
@@ -200,7 +265,7 @@ var CardBody = /* @__PURE__ */__name(({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */React3.createElement(Box2, {
+  return /* @__PURE__ */React4.createElement(Box2, {
     ...props,
     sx: {
       paddingY: "4",
@@ -215,7 +280,7 @@ var CardFooter = /* @__PURE__ */__name(({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */React3.createElement(Box2, {
+  return /* @__PURE__ */React4.createElement(Box2, {
     ...props,
     sx: {
       paddingY: "2",
@@ -230,14 +295,14 @@ Card.Body = CardBody;
 Card.Footer = CardFooter;
 
 // src/components/Checkbox.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 import { Checkbox as CheckBoxUi } from "theme-ui";
-var Checkbox = /* @__PURE__ */React4.forwardRef(({
+var Checkbox = /* @__PURE__ */React5.forwardRef(({
   indeterminate = false,
   ...rest
 }, ref) => {
-  const innerRef = React4.useRef(null);
-  const setRefs = React4.useCallback(element => {
+  const innerRef = React5.useRef(null);
+  const setRefs = React5.useCallback(element => {
     innerRef.current = element;
     if (typeof ref === "function") {
       ref(element);
@@ -245,19 +310,19 @@ var Checkbox = /* @__PURE__ */React4.forwardRef(({
       ref.current = element;
     }
   }, [ref]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (innerRef.current) {
       innerRef.current.indeterminate = indeterminate;
     }
   }, [indeterminate]);
   if (indeterminate) {
-    return /* @__PURE__ */React4.createElement("input", {
+    return /* @__PURE__ */React5.createElement("input", {
       type: "checkbox",
       ref: setRefs,
       ...rest
     });
   }
-  return /* @__PURE__ */React4.createElement(CheckBoxUi, {
+  return /* @__PURE__ */React5.createElement(CheckBoxUi, {
     ref: setRefs,
     ...rest
   });
@@ -278,10 +343,10 @@ var CloseButton = /* @__PURE__ */__name(props => {
 }, "CloseButton");
 
 // src/components/Container.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { Container as ContainerUi } from "theme-ui";
-var Container = /* @__PURE__ */React5.forwardRef((props, ref) => {
-  return /* @__PURE__ */React5.createElement(ContainerUi, {
+var Container = /* @__PURE__ */React6.forwardRef((props, ref) => {
+  return /* @__PURE__ */React6.createElement(ContainerUi, {
     ref,
     ...props
   });
@@ -351,7 +416,7 @@ var IconButton = /* @__PURE__ */__name(props => {
 import { Image } from "theme-ui";
 
 // src/components/InfiniteLinearProgress.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 
 // src/components/LinearProgress.tsx
 import { Progress } from "theme-ui";
@@ -359,8 +424,8 @@ import { Progress } from "theme-ui";
 // src/components/InfiniteLinearProgress.tsx
 var MAX_PROGRESS = 100;
 var InfiniteLinearProgress = /* @__PURE__ */__name(() => {
-  const [progress, setProgress] = React6.useState(0);
-  React6.useEffect(() => {
+  const [progress, setProgress] = React7.useState(0);
+  React7.useEffect(() => {
     const timer = setInterval(() => {
       setProgress(oldProgress => {
         if (oldProgress === MAX_PROGRESS) {
@@ -381,7 +446,7 @@ var InfiniteLinearProgress = /* @__PURE__ */__name(() => {
       clearInterval(timer);
     };
   }, []);
-  return /* @__PURE__ */React6.createElement(Progress, {
+  return /* @__PURE__ */React7.createElement(Progress, {
     max: MAX_PROGRESS,
     value: progress,
     role: "progressbar"
@@ -468,9 +533,9 @@ var Input = /* @__PURE__ */__name(({
 
 // src/components/InputNumber.tsx
 import { Icon as Icon4 } from "@ttoss/react-icons";
-import * as React7 from "react";
+import * as React8 from "react";
 import { Input as Input2 } from "theme-ui";
-var InputNumber = /* @__PURE__ */React7.forwardRef(({
+var InputNumber = /* @__PURE__ */React8.forwardRef(({
   sx,
   value,
   infoIcon,
@@ -478,7 +543,7 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
   onClickInfoIcon,
   ...inputProps
 }, ref) => {
-  const sxProps = React7.useMemo(() => {
+  const sxProps = React8.useMemo(() => {
     const size = String(typeof value === "undefined" ? 0 : value).length;
     if (inputProps["aria-invalid"] === "true") {
       return {
@@ -530,7 +595,7 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
     }
     onChange(value + 1);
   }, "handleChangeDown");
-  return /* @__PURE__ */React7.createElement(Flex, {
+  return /* @__PURE__ */React8.createElement(Flex, {
     sx: {
       width: "fit-content",
       ...sx,
@@ -540,7 +605,7 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
     },
     ref,
     "aria-invalid": inputProps["aria-invalid"]
-  }, /* @__PURE__ */React7.createElement(Input2, {
+  }, /* @__PURE__ */React8.createElement(Input2, {
     ref,
     variant: "forms.inputNumber",
     sx: sxProps,
@@ -550,7 +615,7 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
     }, "onChange"),
     value,
     ...inputProps
-  }), /* @__PURE__ */React7.createElement(Text, {
+  }), /* @__PURE__ */React8.createElement(Text, {
     sx: {
       position: "absolute",
       alignSelf: "center",
@@ -559,9 +624,9 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
       cursor: "pointer"
     },
     onClick: handleChangeUp
-  }, /* @__PURE__ */React7.createElement(Icon4, {
+  }, /* @__PURE__ */React8.createElement(Icon4, {
     icon: "picker-down"
-  })), infoIcon && /* @__PURE__ */React7.createElement(Text, {
+  })), infoIcon && /* @__PURE__ */React8.createElement(Text, {
     sx: {
       position: "absolute",
       alignSelf: "center",
@@ -570,9 +635,9 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
       cursor: onClickInfoIcon ? "pointer" : "default"
     },
     onClick: onClickInfoIcon
-  }, /* @__PURE__ */React7.createElement(Icon4, {
+  }, /* @__PURE__ */React8.createElement(Icon4, {
     icon: "info"
-  })), /* @__PURE__ */React7.createElement(Text, {
+  })), /* @__PURE__ */React8.createElement(Text, {
     sx: {
       position: "absolute",
       alignSelf: "center",
@@ -581,23 +646,23 @@ var InputNumber = /* @__PURE__ */React7.forwardRef(({
       cursor: "pointer"
     },
     onClick: handleChangeDown
-  }, /* @__PURE__ */React7.createElement(Icon4, {
+  }, /* @__PURE__ */React8.createElement(Icon4, {
     icon: "picker-up"
   })));
 });
 InputNumber.displayName = "InputNumber";
 
 // src/components/InputPassword.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 var InputPassword = /* @__PURE__ */__name(({
   showPasswordByDefault = false,
   ...inputPasswordProps
 }) => {
-  const [hidePass, setHidePass] = React8.useState(Boolean(!showPasswordByDefault));
+  const [hidePass, setHidePass] = React9.useState(Boolean(!showPasswordByDefault));
   const {
     icon,
     inputType
-  } = React8.useMemo(() => {
+  } = React9.useMemo(() => {
     return {
       icon: hidePass ? "view-off" : "view-on",
       inputType: hidePass ? "password" : "text"
@@ -608,7 +673,7 @@ var InputPassword = /* @__PURE__ */__name(({
       return !prev;
     });
   }, "handleClick");
-  return /* @__PURE__ */React8.createElement(Input, {
+  return /* @__PURE__ */React9.createElement(Input, {
     ...inputPasswordProps,
     trailingIcon: {
       icon,
@@ -620,7 +685,7 @@ var InputPassword = /* @__PURE__ */__name(({
 
 // src/components/Label.tsx
 import { Icon as Icon5 } from "@ttoss/react-icons";
-import * as React9 from "react";
+import * as React10 from "react";
 import { Label as LabelUi } from "theme-ui";
 
 // src/components/Tooltip.tsx
@@ -702,9 +767,9 @@ var Label = /* @__PURE__ */__name(({
   sx,
   ...props
 }) => {
-  const id = React9.useId();
+  const id = React10.useId();
   const tooltipId = `${id}-tooltip`;
-  return /* @__PURE__ */React9.createElement(LabelUi, {
+  return /* @__PURE__ */React10.createElement(LabelUi, {
     sx: {
       alignItems: "center",
       fontSize: "sm",
@@ -714,7 +779,7 @@ var Label = /* @__PURE__ */__name(({
       ...sx
     },
     ...props
-  }, children, tooltip && /* @__PURE__ */React9.createElement(Text, {
+  }, children, tooltip && /* @__PURE__ */React10.createElement(Text, {
     "data-tooltip-id": tooltipId,
     sx: {
       color: "currentcolor",
@@ -722,23 +787,23 @@ var Label = /* @__PURE__ */__name(({
       marginLeft: "1"
     },
     "aria-label": TOOLTIP_LABEL
-  }, /* @__PURE__ */React9.createElement(Icon5, {
+  }, /* @__PURE__ */React10.createElement(Icon5, {
     icon: "info"
-  }), /* @__PURE__ */React9.createElement(Tooltip, {
+  }), /* @__PURE__ */React10.createElement(Tooltip, {
     id: tooltipId,
     ...tooltip
   })));
 }, "Label");
 
 // src/components/Link.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { Link as LinkUi } from "theme-ui";
-var Link = /* @__PURE__ */React10.forwardRef(({
+var Link = /* @__PURE__ */React11.forwardRef(({
   quiet,
   className,
   ...props
 }, ref) => {
-  return /* @__PURE__ */React10.createElement(LinkUi, {
+  return /* @__PURE__ */React11.createElement(LinkUi, {
     className: `${quiet ? "quiet" : ""} ${className ?? ""}`,
     ...props,
     ref
@@ -753,7 +818,7 @@ import { Paragraph } from "theme-ui";
 import { Radio } from "theme-ui";
 
 // src/components/SegmentedControl.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { Box as Box3, Flex as Flex2 } from "theme-ui";
 var variantTokens = {
   primary: {
@@ -813,8 +878,8 @@ var SegmentedControl = /* @__PURE__ */__name(({
   sx,
   ...rest
 }) => {
-  const [internalValue, setInternalValue] = React11.useState(propValue || defaultValue);
-  React11.useEffect(() => {
+  const [internalValue, setInternalValue] = React12.useState(propValue || defaultValue);
+  React12.useEffect(() => {
     if (propValue !== void 0) {
       setInternalValue(propValue);
     }
@@ -834,7 +899,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
   const currentValue = propValue !== void 0 ? propValue : internalValue;
   const tokens = variantTokens[variant];
   const sizeStyles = sizeTokens[size];
-  return /* @__PURE__ */React11.createElement(Flex2, {
+  return /* @__PURE__ */React12.createElement(Flex2, {
     className,
     "data-variant": variant,
     "data-size": size,
@@ -919,18 +984,18 @@ var SegmentedControl = /* @__PURE__ */__name(({
       ...sx
     },
     ...rest
-  }, /* @__PURE__ */React11.createElement("div", {
+  }, /* @__PURE__ */React12.createElement("div", {
     className: "rc-segmented"
-  }, /* @__PURE__ */React11.createElement(Flex2, {
+  }, /* @__PURE__ */React12.createElement(Flex2, {
     className: "rc-segmented-group custom-segmented-group"
   }, normalizedOptions.map((option, index) => {
     const isSelected = option.value === currentValue;
     const isLastItem = index === normalizedOptions.length - 1;
     const isItemDisabled = disabled || option.disabled;
     const showDivider = !isLastItem && option.value !== currentValue && normalizedOptions[index + 1].value !== currentValue;
-    return /* @__PURE__ */React11.createElement(React11.Fragment, {
+    return /* @__PURE__ */React12.createElement(React12.Fragment, {
       key: `${index}-${option.value}`
-    }, /* @__PURE__ */React11.createElement(Box3, {
+    }, /* @__PURE__ */React12.createElement(Box3, {
       as: "label",
       className: `rc-segmented-item ${isSelected ? "rc-segmented-item-selected" : ""} ${isItemDisabled ? "rc-segmented-item-disabled" : ""}`,
       onClick: /* @__PURE__ */__name(() => {
@@ -938,7 +1003,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
           handleChange(option.value);
         }
       }, "onClick")
-    }, /* @__PURE__ */React11.createElement("input", {
+    }, /* @__PURE__ */React12.createElement("input", {
       type: "radio",
       value: option.value,
       checked: isSelected,
@@ -948,9 +1013,9 @@ var SegmentedControl = /* @__PURE__ */__name(({
           handleChange(option.value);
         }
       }, "onChange")
-    }), /* @__PURE__ */React11.createElement("div", {
+    }), /* @__PURE__ */React12.createElement("div", {
       className: "rc-segmented-item-label"
-    }, option.label)), showDivider && /* @__PURE__ */React11.createElement(Box3, {
+    }, option.label)), showDivider && /* @__PURE__ */React12.createElement(Box3, {
       className: "segmented-divider",
       sx: {
         height: "60%",
@@ -961,7 +1026,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
         zIndex: 3
       }
     }));
-  }), currentValue !== void 0 && /* @__PURE__ */React11.createElement("div", {
+  }), currentValue !== void 0 && /* @__PURE__ */React12.createElement("div", {
     className: "rc-segmented-thumb",
     style: {
       width: `${100 / normalizedOptions.length}%`,
@@ -974,7 +1039,7 @@ var SegmentedControl = /* @__PURE__ */__name(({
 
 // src/components/Select.tsx
 import { Icon as Icon6 } from "@ttoss/react-icons";
-import * as React12 from "react";
+import * as React13 from "react";
 import ReactSelect, { components } from "react-select";
 var Control = /* @__PURE__ */__name(props => {
   const isDisabled = props.selectProps.isDisabled;
@@ -994,7 +1059,7 @@ var Control = /* @__PURE__ */__name(props => {
     }
     return "display.background.secondary.default";
   })();
-  return /* @__PURE__ */React12.createElement(Box, {
+  return /* @__PURE__ */React13.createElement(Box, {
     sx: {
       ".react-select__control": {
         borderColor,
@@ -1003,7 +1068,7 @@ var Control = /* @__PURE__ */__name(props => {
         paddingY: "3"
       }
     }
-  }, /* @__PURE__ */React12.createElement(components.Control, props));
+  }, /* @__PURE__ */React13.createElement(components.Control, props));
 }, "Control");
 var DropdownIndicator = /* @__PURE__ */__name(props => {
   const isDisabled = props.selectProps.isDisabled;
@@ -1013,7 +1078,7 @@ var DropdownIndicator = /* @__PURE__ */__name(props => {
     }
     return "text";
   })();
-  return /* @__PURE__ */React12.createElement(Text, {
+  return /* @__PURE__ */React13.createElement(Text, {
     sx: {
       fontSize: "md",
       color,
@@ -1021,14 +1086,14 @@ var DropdownIndicator = /* @__PURE__ */__name(props => {
       display: "flex",
       alignItems: "center"
     }
-  }, /* @__PURE__ */React12.createElement(Icon6, {
+  }, /* @__PURE__ */React13.createElement(Icon6, {
     icon: "picker-down"
   }));
 }, "DropdownIndicator");
 var IndicatorsContainer = /* @__PURE__ */__name(({
   children
 }) => {
-  return /* @__PURE__ */React12.createElement(Box, {
+  return /* @__PURE__ */React13.createElement(Box, {
     sx: {
       marginLeft: "4",
       border: "none"
@@ -1038,7 +1103,7 @@ var IndicatorsContainer = /* @__PURE__ */__name(({
 var Placeholder = /* @__PURE__ */__name(({
   children
 }) => {
-  return /* @__PURE__ */React12.createElement(Text, {
+  return /* @__PURE__ */React13.createElement(Text, {
     sx: {
       color: "onMuted",
       alignSelf: "center"
@@ -1056,10 +1121,10 @@ var SelectContainer = /* @__PURE__ */__name(({
   return (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     /* @__PURE__ */
-    React12.createElement(Box, {
+    React13.createElement(Box, {
       sx,
       css: css2
-    }, /* @__PURE__ */React12.createElement(components.SelectContainer, props, children))
+    }, /* @__PURE__ */React13.createElement(components.SelectContainer, props, children))
   );
 }, "SelectContainer");
 var ValueContainer = /* @__PURE__ */__name(({
@@ -1085,26 +1150,26 @@ var ValueContainer = /* @__PURE__ */__name(({
     }
     return leadingIcon || "search";
   })();
-  return /* @__PURE__ */React12.createElement(Flex, {
+  return /* @__PURE__ */React13.createElement(Flex, {
     sx: {
       gap: "4",
       flex: 1
     }
-  }, finalLeadingIcon && /* @__PURE__ */React12.createElement(Text, {
+  }, finalLeadingIcon && /* @__PURE__ */React13.createElement(Text, {
     sx: {
       alignSelf: "center",
       pointerEvents: "none",
       lineHeight: 0,
       fontSize: "md"
     }
-  }, /* @__PURE__ */React12.createElement(Icon6, {
+  }, /* @__PURE__ */React13.createElement(Icon6, {
     icon: finalLeadingIcon
-  })), /* @__PURE__ */React12.createElement(Flex, {
+  })), /* @__PURE__ */React13.createElement(Flex, {
     sx: {
       flex: 1,
       alignItems: "center"
     }
-  }, children), (trailingIcon || hasError) && /* @__PURE__ */React12.createElement(Text, {
+  }, children), (trailingIcon || hasError) && /* @__PURE__ */React13.createElement(Text, {
     className: hasError ? "error-icon" : "",
     sx: {
       alignSelf: "center",
@@ -1113,11 +1178,11 @@ var ValueContainer = /* @__PURE__ */__name(({
       fontSize: "md",
       color: trailingIconColor
     }
-  }, /* @__PURE__ */React12.createElement(Icon6, {
+  }, /* @__PURE__ */React13.createElement(Icon6, {
     icon: hasError ? "warning-alt" : trailingIcon
   })));
 }, "ValueContainer");
-var Select = /* @__PURE__ */React12.forwardRef(({
+var Select = /* @__PURE__ */React13.forwardRef(({
   ...props
 }, ref) => {
   const value = props.options?.find(option => {
@@ -1126,7 +1191,7 @@ var Select = /* @__PURE__ */React12.forwardRef(({
     }
     return false;
   });
-  return /* @__PURE__ */React12.createElement(ReactSelect, {
+  return /* @__PURE__ */React13.createElement(ReactSelect, {
     ref,
     /**
      * https://react-select.com/components
@@ -1208,7 +1273,7 @@ var Switch = /* @__PURE__ */__name(props => {
 }, "Switch");
 
 // src/components/Tag.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 var tagVariantMap = {
   positive: {
     bg: "feedback.background.positive.default",
@@ -1265,7 +1330,7 @@ var Tag = /* @__PURE__ */__name(({
     alignItems: "center"
   };
   if (Array.isArray(children)) {
-    return /* @__PURE__ */React13.createElement(Box, {
+    return /* @__PURE__ */React14.createElement(Box, {
       as: "span",
       sx: {
         ml: 2,
@@ -1275,7 +1340,7 @@ var Tag = /* @__PURE__ */__name(({
         ...sx
       }
     }, children.map((child, i) => {
-      return /* @__PURE__ */React13.createElement(Box, {
+      return /* @__PURE__ */React14.createElement(Box, {
         key: i,
         as: "span",
         sx: {
@@ -1289,7 +1354,7 @@ var Tag = /* @__PURE__ */__name(({
       }, child);
     }));
   }
-  return /* @__PURE__ */React13.createElement(Box, {
+  return /* @__PURE__ */React14.createElement(Box, {
     as: "span",
     sx: {
       ...baseStyles,
@@ -1300,15 +1365,15 @@ var Tag = /* @__PURE__ */__name(({
 
 // src/components/Textarea.tsx
 import { Icon as Icon7 } from "@ttoss/react-icons";
-import * as React14 from "react";
+import * as React15 from "react";
 import { Textarea as TextareaUI } from "theme-ui";
-var Textarea = /* @__PURE__ */React14.forwardRef(({
+var Textarea = /* @__PURE__ */React15.forwardRef(({
   trailingIcon,
   className,
   sx,
   ...textareaProps
 }, ref) => {
-  return /* @__PURE__ */React14.createElement(Flex, {
+  return /* @__PURE__ */React15.createElement(Flex, {
     className,
     sx: {
       ...sx,
@@ -1316,7 +1381,7 @@ var Textarea = /* @__PURE__ */React14.forwardRef(({
       padding: 0,
       border: "none"
     }
-  }, /* @__PURE__ */React14.createElement(TextareaUI, {
+  }, /* @__PURE__ */React15.createElement(TextareaUI, {
     ref,
     sx: {
       fontFamily: "body",
@@ -1328,13 +1393,13 @@ var Textarea = /* @__PURE__ */React14.forwardRef(({
     },
     className,
     ...textareaProps
-  }), trailingIcon && /* @__PURE__ */React14.createElement(Text, {
+  }), trailingIcon && /* @__PURE__ */React15.createElement(Text, {
     sx: {
       position: "absolute",
       right: "1.25rem",
       top: "0.75rem"
     }
-  }, /* @__PURE__ */React14.createElement(Icon7, {
+  }, /* @__PURE__ */React15.createElement(Icon7, {
     inline: true,
     icon: trailingIcon
   })));
@@ -1343,7 +1408,7 @@ Textarea.displayName = "Textarea";
 
 // src/components/TooltipIcon.tsx
 import { Icon as Icon8 } from "@ttoss/react-icons";
-import * as React15 from "react";
+import * as React16 from "react";
 var TooltipIcon = /* @__PURE__ */__name(({
   icon,
   onClick,
@@ -1352,9 +1417,9 @@ var TooltipIcon = /* @__PURE__ */__name(({
   variant,
   sx
 }) => {
-  const id = React15.useId();
+  const id = React16.useId();
   const tooltipId = `${id}-tooltip`;
-  return /* @__PURE__ */React15.createElement(React15.Fragment, null, /* @__PURE__ */React15.createElement(Text, {
+  return /* @__PURE__ */React16.createElement(React16.Fragment, null, /* @__PURE__ */React16.createElement(Text, {
     "data-testid": dataTestId,
     "data-tooltip-id": tooltip ? tooltipId : void 0,
     sx: {
@@ -1363,10 +1428,10 @@ var TooltipIcon = /* @__PURE__ */__name(({
     },
     onClick,
     variant
-  }, /* @__PURE__ */React15.createElement(Icon8, {
+  }, /* @__PURE__ */React16.createElement(Icon8, {
     inline: true,
     icon
-  })), tooltip && /* @__PURE__ */React15.createElement(Tooltip, {
+  })), tooltip && /* @__PURE__ */React16.createElement(Tooltip, {
     id: tooltipId,
     ...tooltip,
     variant
@@ -1384,21 +1449,17 @@ var ThemeProvider = /* @__PURE__ */__name(({
 }) => {
   return /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(ThemeUIProvider, {
     theme
-  }, /* @__PURE__ */React.createElement(Global, {
+  }, /* @__PURE__ */React.createElement(ChakraProvider, null, /* @__PURE__ */React.createElement(Global, {
     styles: css`
-            ${fonts.map(url => {
+              ${fonts.map(url => {
       return `@import url('${url}');`;
     }).join("\n")}
-          `
-  }), children));
+            `
+  }), children)));
 }, "ThemeProvider");
 
-// src/theme/useTheme.ts
-import { useThemeUI } from "theme-ui";
-var useTheme = useThemeUI;
-
 // src/index.ts
 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, SegmentedControl, Select, Slider, Spinner, Stack, Switch, Tag, Text, Textarea, ThemeProvider, Tooltip, TooltipIcon, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };
+export { ActionButton, Badge, BaseStyles, Box, Button, Card, ChakraProvider, Checkbox, CloseButton, Container, Divider, Flex, Global2 as Global, Grid, Heading, HelpText, IconButton, Image, InfiniteLinearProgress, Input, InputNumber, InputPassword, Label, Progress as LinearProgress, Link, Paragraph, Radio, SegmentedControl, Select, Slider, Spinner, Stack, Switch, Tag, Text, Textarea, ThemeProvider, Tooltip, TooltipIcon, keyframes, useBreakpointIndex, useResponsiveValue, useTheme };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { IconType } from '@ttoss/react-icons';
 import * as React from 'react';
+import { IconType } from '@ttoss/react-icons';
 import * as theme_ui from 'theme-ui';
 import { ButtonProps as ButtonProps$1, BadgeProps as BadgeProps$1, CardProps, BoxProps, CheckboxProps as CheckboxProps$1, CloseProps, TextProps, IconButtonProps as IconButtonProps$1, SxProp, InputProps as InputProps$1, LabelProps as LabelProps$1, LinkProps as LinkProps$1, FlexProps, SwitchProps, ThemeUIStyleObject, TextareaProps as TextareaProps$1, Theme } from 'theme-ui';
 export { BaseStyles, Box, BoxProps, CardProps, ContainerProps, Divider, DividerProps, Flex, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, 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';
@@ -9,6 +9,37 @@ import { Props } from 'react-select';
 export { Keyframes, keyframes } from '@emotion/react';
 export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 
+type ChakraThemeProviderProps = {
+    children?: React.ReactNode;
+};
+/**
+ * Opt-in Chakra UI provider that inherits design tokens from the parent
+ * theme-ui `ThemeProvider`.
+ *
+ * **Must be rendered as a child of `ThemeProvider`** so that `useThemeUI()`
+ * can read the active theme.
+ *
+ * This component automatically converts theme-ui tokens to Chakra UI v3
+ * system format, allowing seamless integration between both systems.
+ *
+ * @example
+ * ```tsx
+ * import { ThemeProvider } from '@ttoss/ui';
+ * import { ChakraProvider } from '@ttoss/ui/chakra';
+ *
+ * function App() {
+ *   return (
+ *     <ThemeProvider>
+ *       <ChakraProvider>
+ *         <Button colorScheme="blue">Click me</Button>
+ *       </ChakraProvider>
+ *     </ThemeProvider>
+ *   );
+ * }
+ * ```
+ */
+declare const ChakraProvider: ({ children }: ChakraThemeProviderProps) => react_jsx_runtime.JSX.Element;
+
 type ButtonProps = ButtonProps$1 & {
     leftIcon?: IconType;
     rightIcon?: IconType;
@@ -245,4 +276,4 @@ declare const ThemeProvider: ({ children, theme, fonts, }: ThemeProviderProps) =
 
 declare const useTheme: () => theme_ui.ThemeUIContextValue;
 
-export { ActionButton, type ActionButtonProps, Badge, type BadgeProps, Button, type ButtonProps, Card, Checkbox, type CheckboxProps, CloseButton, type CloseButtonProps, Container, HelpText, type HelpTextProps, IconButton, type IconButtonProps, InfiniteLinearProgress, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectOptions, type SelectProps, Stack, type StackProps, Switch, Tag, type TagProps, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipIcon, type TooltipIconProps, type TooltipProps, useTheme };
+export { ActionButton, type ActionButtonProps, Badge, type BadgeProps, Button, type ButtonProps, Card, ChakraProvider, type ChakraThemeProviderProps, Checkbox, type CheckboxProps, CloseButton, type CloseButtonProps, Container, HelpText, type HelpTextProps, IconButton, type IconButtonProps, InfiniteLinearProgress, Input, InputNumber, type InputNumberProps, InputPassword, type InputPasswordProps, type InputProps, Label, type LabelProps, Link, type LinkProps, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectOptions, type SelectProps, Stack, type StackProps, Switch, Tag, type TagProps, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, Tooltip, TooltipIcon, type TooltipIconProps, type TooltipProps, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "6.5.0",
+  "version": "6.6.0",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "MIT",
   "author": "ttoss",
@@ -24,29 +24,30 @@
   ],
   "sideEffects": false,
   "dependencies": {
+    "@chakra-ui/react": "^3.33.0",
     "@theme-ui/match-media": "^0.17.2",
     "rc-segmented": "^2.7.0",
     "react-select": "^5.10.2",
     "react-tooltip": "^5.30.0",
     "theme-ui": "^0.17.2",
-    "@ttoss/theme": "^2.9.0"
+    "@ttoss/theme": "^2.9.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
     "react": ">=16.8.0",
-    "@ttoss/react-icons": "^0.5.6"
+    "@ttoss/react-icons": "^0.6.0"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@iconify-icons/mdi-light": "^1.2.5",
     "@types/jest": "^30.0.0",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.14",
     "jest": "^30.2.0",
-    "react": "^19.2.1",
+    "react": "^19.2.4",
     "tsup": "^8.5.1",
-    "@ttoss/react-icons": "^0.5.6",
-    "@ttoss/config": "^1.35.12",
-    "@ttoss/test-utils": "^4.0.2"
+    "@ttoss/test-utils": "^4.1.0",
+    "@ttoss/config": "^1.36.0",
+    "@ttoss/react-icons": "^0.6.0"
   },
   "keywords": [
     "React",