@ttoss/ui 6.6.0 → 6.7.0

package/dist/esm/index.js

@@ -5,6 +5,12 @@ var __name = (target, value) => __defProp(target, "name", {
   value,
   configurable: true
 });
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
 
 // src/chakra/ChakraThemeProvider.tsx
 import { ChakraProvider as ChakraProviderBase, createSystem, defaultConfig } from "@chakra-ui/react";
@@ -14,6 +20,123 @@ import * as React2 from "react";
 import { useThemeUI } from "theme-ui";
 var useTheme = useThemeUI;
 
+// src/chakra/recipes/index.ts
+var recipes_exports = {};
+__export(recipes_exports, {
+  button: () => button
+});
+
+// src/chakra/recipes/button.ts
+import { defineRecipe } from "@chakra-ui/react";
+var button = defineRecipe({
+  className: "button",
+  base: {
+    color: "action.text.primary.default",
+    backgroundColor: "navigation.text.accent.default",
+    borderColor: "action.border.primary.default",
+    _hover: {
+      backgroundColor: "action.background.primary.active",
+      _disabled: {
+        backgroundColor: "action.background.primary.disabled"
+      }
+    },
+    _active: {
+      backgroundColor: "action.background.primary.active"
+    },
+    _disabled: {
+      backgroundColor: "action.background.primary.disabled",
+      color: "action.text.muted.default",
+      opacity: 1
+    }
+  },
+  variants: {
+    variant: {
+      solid: {
+        color: "action.text.primary.default",
+        backgroundColor: "navigation.text.accent.default",
+        _hover: {
+          backgroundColor: "action.background.primary.active"
+        }
+      },
+      outline: {
+        color: "action.text.primary.default",
+        backgroundColor: "navigation.text.accent.default",
+        borderColor: "action.border.primary.default",
+        _hover: {
+          backgroundColor: "action.background.primary.default"
+        }
+      },
+      ghost: {
+        color: "action.text.primary.default",
+        backgroundColor: "transparent",
+        _hover: {
+          backgroundColor: "action.background.secondary.default"
+        }
+      },
+      plain: {
+        color: "action.text.accent.default",
+        backgroundColor: "transparent",
+        _hover: {
+          color: "action.text.accent.default"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "solid"
+  }
+});
+
+// src/chakra/slotRecipes/index.ts
+var slotRecipes_exports = {};
+__export(slotRecipes_exports, {
+  steps: () => steps
+});
+
+// src/chakra/slotRecipes/steps.ts
+import { defineSlotRecipe } from "@chakra-ui/react";
+var steps = defineSlotRecipe({
+  className: "steps",
+  slots: ["root", "list", "item", "trigger", "indicator", "separator", "title", "description", "number"],
+  base: {
+    indicator: {
+      // Map to ttoss semantic colors
+      borderColor: "display.border.muted.default",
+      color: "display.text.muted.default",
+      backgroundColor: "display.background.secondary.default",
+      // Active/completed state
+      _complete: {
+        backgroundColor: "action.background.accent.default",
+        borderColor: "action.background.accent.default",
+        color: "action.text.accent.default"
+      },
+      // Current/active step
+      _current: {
+        borderColor: "display.border.accent.default",
+        color: "display.text.accent"
+      }
+    },
+    separator: {
+      // Map to ttoss semantic colors
+      backgroundColor: "display.border.muted.default",
+      _complete: {
+        backgroundColor: "action.background.accent.default"
+      }
+    },
+    title: {
+      // Map to ttoss semantic colors
+      color: "navigation.text.primary.default",
+      _current: {
+        color: "display.text.accent"
+      }
+    },
+    description: {
+      // Map to ttoss semantic colors
+      color: "navigation.text.muted.default"
+    }
+  }
+});
+
 // src/chakra/ChakraThemeProvider.tsx
 var wrapTokenValues = /* @__PURE__ */__name(tokens => {
   if (!tokens) {
@@ -36,7 +159,6 @@ var toChakraTheme = /* @__PURE__ */__name((themeUITheme, overrides = {}) => {
     theme: {
       tokens: {
         borders: wrapTokenValues(themeUITheme.borders),
-        colors: wrapTokenValues(themeUITheme.rawColors ?? themeUITheme.colors),
         fonts: wrapTokenValues(themeUITheme.fonts),
         fontSizes: wrapTokenValues(themeUITheme.fontSizes),
         fontWeights: wrapTokenValues(themeUITheme.fontWeights),
@@ -47,25 +169,39 @@ var toChakraTheme = /* @__PURE__ */__name((themeUITheme, overrides = {}) => {
         spacing: wrapTokenValues(themeUITheme.space),
         zIndex: wrapTokenValues(themeUITheme.zIndices)
       },
+      semanticTokens: {
+        colors: wrapTokenValues(themeUITheme.rawColors)
+      },
       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
+      } : void 0,
+      recipes: {
+        ...recipes_exports,
+        ...overrides.theme?.recipes
+      },
+      slotRecipes: {
+        ...slotRecipes_exports,
+        ...overrides.theme?.slotRecipes
+      }
     },
     ...overrides
   };
   return createSystem(defaultConfig, config);
 }, "toChakraTheme");
 var ChakraProvider = /* @__PURE__ */__name(({
-  children
+  children,
+  themeUITheme: themeUIThemeProp,
+  overrides
 }) => {
-  const themeUITheme = useTheme();
+  const themeUIThemeContext = useTheme();
+  const themeUITheme = themeUIThemeProp ?? themeUIThemeContext.theme;
   const chakraSystem = React2.useMemo(() => {
-    return toChakraTheme(themeUITheme.theme);
-  }, [themeUITheme.theme]);
+    return toChakraTheme(themeUITheme, overrides);
+  }, [themeUITheme, overrides]);
   return /* @__PURE__ */React2.createElement(ChakraProviderBase, {
     value: chakraSystem
   }, children);

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { createSystem } from '@chakra-ui/react';
 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';
+import { Theme, 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 } 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';
+import { IconType } from '@ttoss/react-icons';
 import { ITooltip } from 'react-tooltip';
 import { Props } from 'react-select';
 export { Keyframes, keyframes } from '@emotion/react';
@@ -11,18 +12,43 @@ export { useBreakpointIndex, useResponsiveValue } from '@theme-ui/match-media';
 
 type ChakraThemeProviderProps = {
     children?: React.ReactNode;
+    /**
+     * Optional Theme UI theme to use instead of reading from context.
+     * Useful when you need to pass a specific theme directly.
+     */
+    themeUITheme?: Theme;
+    /**
+     * Optional Chakra-specific config overrides.
+     * Use this to add recipes, slot recipes, or customize tokens.
+     *
+     * @example
+     * ```tsx
+     * <ChakraProvider
+     *   overrides={{
+     *     theme: {
+     *       slotRecipes: {
+     *         steps: stepsSlotRecipe,
+     *       },
+     *     },
+     *   }}
+     * >
+     *   ...
+     * </ChakraProvider>
+     * ```
+     */
+    overrides?: Parameters<typeof createSystem>[1];
 };
 /**
  * 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.
+ * can read the active theme (unless `themeUITheme` prop is provided).
  *
  * This component automatically converts theme-ui tokens to Chakra UI v3
  * system format, allowing seamless integration between both systems.
  *
- * @example
+ * @example Basic usage (inherits from ThemeProvider context)
  * ```tsx
  * import { ThemeProvider } from '@ttoss/ui';
  * import { ChakraProvider } from '@ttoss/ui/chakra';
@@ -37,8 +63,30 @@ type ChakraThemeProviderProps = {
  *   );
  * }
  * ```
+ *
+ * @example With custom theme
+ * ```tsx
+ * <ChakraProvider themeUITheme={customTheme}>
+ *   <Button>Click me</Button>
+ * </ChakraProvider>
+ * ```
+ *
+ * @example With recipe overrides
+ * ```tsx
+ * <ChakraProvider
+ *   overrides={{
+ *     theme: {
+ *       slotRecipes: {
+ *         steps: customStepsRecipe,
+ *       },
+ *     },
+ *   }}
+ * >
+ *   <Steps.Root>...</Steps.Root>
+ * </ChakraProvider>
+ * ```
  */
-declare const ChakraProvider: ({ children }: ChakraThemeProviderProps) => react_jsx_runtime.JSX.Element;
+declare const ChakraProvider: ({ children, themeUITheme: themeUIThemeProp, overrides, }: ChakraThemeProviderProps) => react_jsx_runtime.JSX.Element;
 
 type ButtonProps = ButtonProps$1 & {
     leftIcon?: IconType;
@@ -235,7 +283,7 @@ type SelectProps = Omit<Props<SelectOption, IsMulti>, 'styles' | 'value' | 'onCh
 /**
  * https://react-select.com/home
  */
-declare const Select: React.ForwardRefExoticComponent<Omit<Props<SelectOption, false>, "value" | "onChange" | "styles" | "components"> & SxProp & {
+declare const Select: React.ForwardRefExoticComponent<Omit<Props<SelectOption, false>, "value" | "styles" | "onChange" | "components"> & SxProp & {
     value?: SelectOptionValue;
     onChange?: (value: SelectOptionValue | undefined) => void;
     disabled?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/ui",
-  "version": "6.6.0",
+  "version": "6.7.0",
   "description": "Primitive layout, typographic, and other components for styling applications.",
   "license": "MIT",
   "author": "ttoss",
@@ -45,8 +45,8 @@
     "jest": "^30.2.0",
     "react": "^19.2.4",
     "tsup": "^8.5.1",
-    "@ttoss/test-utils": "^4.1.0",
     "@ttoss/config": "^1.36.0",
+    "@ttoss/test-utils": "^4.1.0",
     "@ttoss/react-icons": "^0.6.0"
   },
   "keywords": [