@commercetools/nimbus 0.0.0-canary-20251013071647 → 0.0.0-canary-20251013204307

package/dist/text.d.ts

@@ -14,10 +14,10 @@ declare const Text_2: {
 };
 export { Text_2 as Text }
 
-export declare interface TextProps extends Omit<TextProps_2, "slot"> {
+export declare type TextProps = Omit<TextProps_2, "slot"> & {
     ref?: React.Ref<HTMLElement>;
     slot?: string | null | undefined;
-}
+};
 
 export { }
 

package/dist/time-input.d.ts

@@ -1,16 +1,13 @@
-import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { HTMLChakraProps } from '@chakra-ui/react';
 import { JSX } from 'react/jsx-runtime';
-import { RecipeProps } from '@chakra-ui/react/styled-system';
-import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
-import { SlotRecipeDefinition } from '@chakra-ui/react';
+import { SlotRecipeProps } from '@chakra-ui/react';
 import { TimeFieldProps } from 'react-aria-components';
 import { TimeValue } from 'react-aria';
-import { UnstyledProp } from '@chakra-ui/react/styled-system';
+import { UnstyledProp } from '@chakra-ui/react';
 
 /**
  * Properties from TimeFieldProps that would conflict with similarly named
- * properties in TimeInputRootProps. We use this to prevent TypeScript interface
- * merging conflicts by prioritizing the TimeFieldProps implementation.
+ * properties in TimeInputRootProps.
  *
  * Examples include: value, defaultValue, onChange, onBlur, onFocus, etc.
  */
@@ -32,14 +29,16 @@ export declare const TimeInput: {
     displayName: string;
 };
 
+export declare type TimeInputLeadingElementProps = HTMLChakraProps<"div", TimeInputRecipeProps>;
+
 /**
- * Main props interface for the TimeInput component.
+ * Main props type for the TimeInput component.
  *
  * We use Omit to remove:
  * 1. Conflicting props from TimeInputRootProps to avoid TypeScript errors
  * 2. Explicitly excluded props that we don't want users to access
  */
-export declare interface TimeInputProps extends Omit<TimeInputRootProps, ConflictingFieldStateProps | ExcludedProps>, Omit<TimeFieldProps<TimeValue>, ExcludedProps>, RecipeVariantProps<typeof timeInputRecipe> {
+export declare type TimeInputProps = Omit<TimeInputRootProps, ConflictingFieldStateProps | ExcludedProps> & Omit<TimeFieldProps<TimeValue>, ExcludedProps> & {
     /**
      * Optional element to display at the start of the input
      * Will respect text direction (left in LTR, right in RTL)
@@ -50,90 +49,25 @@ export declare interface TimeInputProps extends Omit<TimeInputRootProps, Conflic
      * Will respect text direction (right in LTR, left in RTL)
      */
     trailingElement?: React.ReactNode;
-}
-
-/**
- * Recipe configuration for the TimeInput component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-declare const timeInputRecipe: SlotRecipeDefinition<"root" | "leadingElement" | "trailingElement" | "segmentGroup" | "segment", {
-size: {
-sm: {
-root: {
-h: number;
-gap: number;
-px: number;
-};
-segment: {
-textStyle: "sm";
-};
-leadingElement: {
-"& svg": {
-boxSize: "400";
-};
-};
-trailingElement: {
-"& svg": {
-boxSize: "400";
-};
-};
-};
-md: {
-root: {
-h: number;
-gap: number;
-px: number;
-};
-segment: {
-textStyle: "md";
-};
-leadingElement: {
-"& svg": {
-boxSize: "500";
 };
-};
-trailingElement: {
-"& svg": {
-boxSize: "500";
-};
-};
-};
-};
-variant: {
-solid: {
-root: {
-"--border-width": "sizes.25";
-"--border-color": "colors.neutral.7";
-backgroundColor: "neutral.1";
-_hover: {
-backgroundColor: "primary.2";
-};
-};
-};
-ghost: {
-root: {
-_hover: {
-backgroundColor: "primary.2";
-};
-};
-};
-};
-}>;
 
 /**
- * Base recipe props interface that combines Chakra UI's recipe props
+ * Base recipe props type that combines Chakra UI's recipe props
  * with the unstyled prop option for the div element.
  */
-declare interface TimeInputRecipeProps extends RecipeProps<"div">, UnstyledProp {
-}
+declare type TimeInputRecipeProps = {
+    size?: SlotRecipeProps<"timeInput">["size"];
+    variant?: SlotRecipeProps<"timeInput">["variant"];
+} & UnstyledProp;
 
 /**
- * Root props interface that extends Chakra's HTML props with our recipe props.
+ * Root props type that extends Chakra's HTML props with our recipe props.
  * This creates a complete set of props for the root element, combining
  * HTML attributes, Chakra's styling system, and our custom recipe props.
  */
-declare interface TimeInputRootProps extends HTMLChakraProps<"div", TimeInputRecipeProps> {
-}
+export declare type TimeInputRootProps = HTMLChakraProps<"div", TimeInputRecipeProps>;
+
+export declare type TimeInputTrailingElementProps = HTMLChakraProps<"div", TimeInputRecipeProps>;
 
 export { }
 

package/dist/toggle-button-group.d.ts

@@ -1,70 +1,12 @@
 import { AriaToggleButtonGroupProps } from 'react-aria';
 import { AriaToggleButtonProps } from 'react-aria';
 import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
-import { PropsWithChildren } from 'react';
 import { RecipeProps } from '@chakra-ui/react/styled-system';
-import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
-import { SlotRecipeDefinition } from '@chakra-ui/react';
 import { ToggleButton } from 'react-aria-components';
 import { ToggleButtonGroup as ToggleButtonGroup_2 } from 'react-aria-components';
 import { ToggleButtonGroupButtonComponent as ToggleButtonGroupButtonComponent_2 } from './toggle-button-group.types';
 import { ToggleButtonGroupRootComponent as ToggleButtonGroupRootComponent_2 } from './toggle-button-group.types';
 
-/**
- * Recipe configuration for the ToggleButtonGroup component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-declare const buttonGroupRecipe: SlotRecipeDefinition<"button" | "root", {
-size: {
-xs: {
-button: {
-h: "800";
-minW: "800";
-fontSize: "350";
-fontWeight: "500";
-lineHeight: "400";
-px: "300";
-gap: "100";
-_icon: {
-width: "500";
-height: "500";
-};
-} | undefined;
-};
-md: {
-button: {
-h: "1000";
-minW: "1000";
-fontSize: "400";
-lineHeight: "500";
-px: "400";
-gap: "200";
-_icon: {
-width: "600";
-height: "600";
-};
-} | undefined;
-};
-};
-tone: {
-primary: {
-button: {
-colorPalette: "primary";
-};
-};
-critical: {
-button: {
-colorPalette: "critical";
-};
-};
-neutral: {
-button: {
-colorPalette: "neutral";
-};
-};
-};
-}>;
-
 /**
  * ToggleButtonGroup
  * ============================================================
@@ -89,10 +31,22 @@ export declare type ToggleButtonGroupButtonProps = ToggleButtonGroupButtonSlotPr
 declare type ToggleButtonGroupButtonSlotProps = HTMLChakraProps<"button", RecipeProps<"button">>;
 
 /** Final external props for the `<ToggleButtonGroup>` component, including `children`. */
-export declare type ToggleButtonGroupProps = PropsWithChildren<ToggleButtonGroupRootProps> & {
+export declare type ToggleButtonGroupProps = ToggleButtonGroupRecipeVariantProps & Omit<ToggleButtonGroupRootProps, "size" | "tone"> & {
     ref?: React.Ref<typeof ToggleButtonGroup_2>;
 };
 
+declare type ToggleButtonGroupRecipeVariantProps = {
+    /**
+     * Size variant
+     * @default "md"
+     */
+    size?: "xs" | "md";
+    /**
+     * Tone variant
+     */
+    tone?: "primary" | "critical" | "neutral";
+};
+
 /**
  * # ToggleButtonGroup
  *
@@ -106,7 +60,7 @@ export declare const _ToggleButtonGroupRoot: ToggleButtonGroupRootComponent;
 export declare type ToggleButtonGroupRootComponent = React.FC<ToggleButtonGroupProps>;
 
 /** Combined props for the root element (Chakra styles + Aria behavior + Recipe variants). */
-declare type ToggleButtonGroupRootProps = ToggleButtonGroupRootSlotProps & AriaToggleButtonGroupProps & RecipeVariantProps<typeof buttonGroupRecipe>;
+declare type ToggleButtonGroupRootProps = ToggleButtonGroupRootSlotProps & AriaToggleButtonGroupProps;
 
 /** Base Chakra styling props for the root `div` slot. */
 declare type ToggleButtonGroupRootSlotProps = HTMLChakraProps<"div", RecipeProps<"div">>;

package/dist/toggle-button.d.ts

@@ -1,15 +1,13 @@
-import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { HTMLChakraProps } from '@chakra-ui/react';
 import { JSX } from 'react/jsx-runtime';
-import { RecipeDefinition } from '@chakra-ui/react';
-import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
+import { RecipeProps } from '@chakra-ui/react';
 import { ToggleButtonProps as ToggleButtonProps_2 } from 'react-aria-components';
-import { UnstyledProp } from '@chakra-ui/react/styled-system';
 
 /**
  * Additional properties we want to exclude from the ToggleButton component.
  * These are chakra-ui props we don't want exposed for non-polymorphic components.
  */
-declare type ExcludedProps = "css" | "colorScheme" | "unstyled" | "recipe" | "as" | "asChild";
+declare type ExcludedProps = "css" | "colorScheme" | "recipe" | "as" | "asChild";
 
 /**
  * # ToggleButton
@@ -24,115 +22,21 @@ export declare const ToggleButton: {
     displayName: string;
 };
 
-export declare interface ToggleButtonProps extends ToggleButtonProps_2, Omit<ToggleButtonRootProps, keyof ToggleButtonProps_2 | ExcludedProps> {
+export declare type ToggleButtonProps = Omit<ToggleButtonRootProps, keyof ToggleButtonProps_2 | ExcludedProps> & ToggleButtonProps_2 & {
     /**
      * Ref to the underlying button element
      */
     ref?: React.Ref<HTMLButtonElement>;
-}
-
-declare const toggleButtonRecipe: RecipeDefinition<    {
-size: {
-"2xs"?: {
-h: "600";
-minW: "600";
-fontSize: "300";
-fontWeight: "500";
-lineHeight: "400";
-px: "200";
-gap: "100";
-_icon: {
-width: "400";
-height: "400";
-};
-} | undefined;
-xs?: {
-h: "800";
-minW: "800";
-fontSize: "350";
-fontWeight: "500";
-lineHeight: "400";
-px: "300";
-gap: "100";
-_icon: {
-width: "500";
-height: "500";
-};
-} | undefined;
-md?: {
-h: "1000";
-minW: "1000";
-fontSize: "400";
-lineHeight: "500";
-px: "400";
-gap: "200";
-_icon: {
-width: "600";
-height: "600";
-};
-} | undefined;
-};
-variant: {
-outline: {
-"--button-bg": "transparent";
-"--button-text": "{colors.colorPalette.11}";
-"--border-width": "{sizes.25}";
-"--border-color": "{colors.colorPalette.7}";
-bg: "var(--button-bg)";
-boxShadow: "0 0 0 var(--border-width) var(--border-color)";
-color: "var(--button-text)";
-"&[data-hovered='true']": {
-"--button-bg": "{colors.colorPalette.2}";
-"--border-color": "{colors.colorPalette.8}";
-};
-"&[data-selected=true]": {
-"--button-bg": "{colors.colorPalette.3}";
-"--border-color": "{colors.colorPalette.8}";
-_hover: {
-"--button-bg": "{colors.colorPalette.4}";
-"--border-color": "{colors.colorPalette.9}";
-};
-};
 };
-ghost: {
-"--button-text": "{colors.neutral.11}";
-"--button-bg": "transparent";
-color: "var(--button-text)";
-bg: "var(--button-bg)";
-"&[data-hovered='true']": {
-"--button-bg": "{colors.colorPalette.2}";
-};
-"&[data-selected='true']": {
-"--button-bg": "{colors.colorPalette.3}";
-"--button-text": "{colors.colorPalette.11}";
-"&[data-hovered='true']": {
-"--button-bg": "{colors.colorPalette.4}";
-};
-};
-};
-};
-tone: {
-primary?: {
-colorPalette: "primary";
-} | undefined;
-critical?: {
-colorPalette: "critical";
-} | undefined;
-neutral?: {
-colorPalette: "neutral";
-} | undefined;
-info?: {
-colorPalette: "info";
-} | undefined;
-};
-}>;
 
 /**
- * Base recipe props interface that combines Chakra UI's recipe props
- * with the unstyled prop option for the toggle button element.
+ * Base recipe props interface.
  */
-declare interface ToggleButtonRecipeProps extends RecipeVariantProps<typeof toggleButtonRecipe>, UnstyledProp {
-}
+declare type ToggleButtonRecipeProps = {
+    size?: RecipeProps<"toggleButton">["size"];
+    variant?: RecipeProps<"toggleButton">["variant"];
+    tone?: RecipeProps<"toggleButton">["tone"];
+};
 
 /**
  * Root props interface that extends Chakra's HTML props with our recipe props.

package/dist/toolbar.d.ts

@@ -1,8 +1,6 @@
 import { FC } from 'react';
 import { HTMLChakraProps } from '@chakra-ui/react';
-import { RecipeDefinition } from '@chakra-ui/react';
 import { RecipeProps } from '@chakra-ui/react';
-import { RecipeVariantProps } from '@chakra-ui/react';
 import { Ref } from 'react';
 import { ToolbarProps as ToolbarProps_2 } from 'react-aria-components';
 import { UnstyledProp } from '@chakra-ui/react';
@@ -13,76 +11,28 @@ export declare const Toolbar: ToolbarComponent;
 
 export declare type ToolbarComponent = FC<ToolbarProps>;
 
-export declare interface ToolbarProps extends Omit<ToolbarSlotProps, DefaultExcludedProps | "orientation" | "children" | "slot">, Omit<ToolbarProps_2, "orientation" | "className" | "style"> {
-    /**
-     * The orientation of the toolbar.
-     * Supports responsive values for different breakpoints.
-     * @default "horizontal"
-     */
-    orientation?: RecipeVariantProps<typeof toolbarRecipe>["orientation"];
-    /**
-     * The size of the toolbar.
-     * @default "md"
-     */
-    size?: RecipeVariantProps<typeof toolbarRecipe>["size"];
-    /**
-     * The visual variant of the toolbar.
-     * @default "plain"
-     */
-    variant?: RecipeVariantProps<typeof toolbarRecipe>["variant"];
+export declare type ToolbarProps = Omit<ToolbarSlotProps, DefaultExcludedProps | "children" | "slot"> & Omit<ToolbarProps_2, "orientation" | "className" | "style"> & {
     ref?: Ref<HTMLDivElement>;
-}
-
-declare const toolbarRecipe: RecipeDefinition<    {
-size: {
-xs: {
-"--toolbar-spacing": "{spacing.100}";
-"--divider-size": "{sizes.600}";
-};
-md: {
-"--toolbar-spacing": "{spacing.200}";
-"--divider-size": "{sizes.800}";
-};
-};
-orientation: {
-horizontal: {
-"--toolbar-direction": "row";
-"& .nimbus-divider": {
-height: "var(--divider-size)";
-mx: "var(--toolbar-spacing)";
-};
-};
-vertical: {
-"--toolbar-direction": "column";
-"& .nimbus-divider": {
-width: "var(--divider-size)";
-my: "var(--toolbar-spacing)";
 };
-};
-};
-variant: {
-plain: {};
-outline: {
-boxShadow: "0 0 0 {sizes.25} {colors.neutral.6}";
-};
-};
-}>;
 
 /**
- * Base recipe props interface that combines Chakra UI's recipe props
+ * Base recipe props type that combines Chakra UI's recipe props
  * with the unstyled prop option for the toolbar recipe.
  */
-declare interface ToolbarRecipeProps extends RecipeProps<typeof toolbarRecipe>, UnstyledProp {
-}
+declare type ToolbarRecipeProps = {
+    size?: RecipeProps<"toolbar">["size"];
+    orientation?: RecipeProps<"toolbar">["orientation"];
+    variant?: RecipeProps<"toolbar">["variant"];
+} & UnstyledProp;
 
 /**
- * Root props interface that extends Chakra's HTML props with our recipe props.
+ * Root props type that extends Chakra's HTML props with our recipe props.
  * This creates a complete set of props for the root element, combining
  * HTML attributes, Chakra's styling system, and our custom recipe props.
  */
-declare interface ToolbarSlotProps extends Omit<HTMLChakraProps<"div", ToolbarRecipeProps>, "translate"> {
+export declare type ToolbarSlotProps = Omit<HTMLChakraProps<"div", ToolbarRecipeProps>, "translate"> & {
     translate?: "yes" | "no";
-}
+};
 
 export { }
 

package/dist/tooltip.d.ts

@@ -1,16 +1,13 @@
 import { FocusableOptions } from 'react-aria';
-import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { HTMLChakraProps } from '@chakra-ui/react';
 import { JSX } from 'react/jsx-runtime';
 import { JSXElementConstructor } from 'react';
 import { PropsWithChildren } from 'react';
 import { ReactElement } from 'react';
-import { RecipeDefinition } from '@chakra-ui/react';
-import { RecipeProps } from '@chakra-ui/react/styled-system';
-import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
-import { RecipeVariantRecord } from '@chakra-ui/react';
+import { RecipeProps } from '@chakra-ui/react';
 import { TooltipProps as TooltipProps_2 } from 'react-aria-components';
 import { TooltipTriggerComponentProps } from 'react-aria-components';
-import { UnstyledProp } from '@chakra-ui/react/styled-system';
+import { UnstyledProp } from '@chakra-ui/react';
 
 /**
  * For use in components that use the polymorphic `as` and `asChild` props
@@ -51,12 +48,12 @@ export declare const MakeElementFocusable: {
     displayName: string;
 };
 
-export declare interface MakeElementFocusableProps extends PropsWithChildren<FocusableOptions<HTMLElement>> {
+export declare type MakeElementFocusableProps = PropsWithChildren<FocusableOptions<HTMLElement>> & {
     /**
      * React ref to be forwarded to the underlying element
      */
     ref?: React.Ref<HTMLElement>;
-}
+};
 
 export declare const Tooltip: {
     Root: typeof _TooltipRoot;
@@ -86,24 +83,16 @@ export declare namespace _TooltipContent {
 }
 
 /**
- * Main props interface for the Tooltip components
+ * Main props type for the Tooltip components
  * Extends TooltipVariantProps to include root props, variant props,
  * and react-aria props, while adding support for React children.
  */
-export declare interface TooltipProps extends PropsWithChildren<TooltipVariantProps> {
-}
-
-/**
- * Recipe configuration for the Tooltip component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-declare const tooltipRecipe: RecipeDefinition<RecipeVariantRecord>;
+export declare type TooltipProps = PropsWithChildren<TooltipVariantProps>;
 
 /**
- * Base recipe props interface that combines Chakra UI's recipe props
+ * Base recipe props type that combines Chakra UI's recipe props
  */
-declare interface TooltipRecipeProps extends RecipeProps<"div">, UnstyledProp {
-}
+declare type TooltipRecipeProps = RecipeProps<"tooltip"> & UnstyledProp;
 
 /**
  * # Tooltip
@@ -119,12 +108,11 @@ export declare namespace _TooltipRoot {
 }
 
 /**
- * Root props interface that extends Chakra's HTML props with our recipe props.
+ * Root props type that extends Chakra's HTML props with our recipe props.
  * This creates a complete set of props for the root element, combining
  * HTML attributes, Chakra's styling system, and our custom recipe props.
  */
-declare interface TooltipRootProps extends HTMLChakraProps<"div", TooltipRecipeProps> {
-}
+export declare type TooltipRootProps = HTMLChakraProps<"div", TooltipRecipeProps>;
 
 /**
  * Combines the root props with Chakra UI's recipe variant props, and
@@ -134,7 +122,7 @@ declare interface TooltipRootProps extends HTMLChakraProps<"div", TooltipRecipeP
  * - styling variants from the recipe
  * - a11y/state related props from react-aria-components Tooltip
  */
-declare type TooltipVariantProps = ExcludePolymorphicFromProps<TooltipRootProps & RecipeVariantProps<typeof tooltipRecipe> & TooltipProps_2>;
+declare type TooltipVariantProps = ExcludePolymorphicFromProps<TooltipRootProps & TooltipProps_2>;
 
 export { }
 

package/dist/utils.d.ts

@@ -6,7 +6,7 @@ export declare function canUseDOM(): boolean;
 /**
  * Configuration options for SVG sanitization
  */
-declare interface SanitizationOptions {
+declare type SanitizationOptions = {
     /**
      * Whether to allow style attributes in SVG elements
      * @default false
@@ -22,7 +22,7 @@ declare interface SanitizationOptions {
      * @default []
      */
     forbiddenTags?: string[];
-}
+};
 
 /**
  * Sanitizes SVG markup string to prevent XSS attacks

package/dist/visually-hidden.d.ts

@@ -13,11 +13,11 @@ export declare const VisuallyHidden: {
     displayName: string;
 };
 
-export declare interface VisuallyHiddenProps extends Omit<VisuallyHiddenProps_2, "elementType"> {
+export declare type VisuallyHiddenProps = Omit<VisuallyHiddenProps_2, "elementType"> & {
     /** specifies the element type to render, use `span` for inline content
      * and `div` for block content */
     as?: "span" | "div";
-}
+};
 
 export { }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools/nimbus",
-  "version": "0.0.0-canary-20251013071647",
+  "version": "0.0.0-canary-20251013204307",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "type": "module",
@@ -94,15 +94,15 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4",
-    "@commercetools/nimbus-icons": "^0.0.0-canary-20251013071647",
-    "@commercetools/nimbus-tokens": "^0.0.0-canary-20251013071647"
+    "@commercetools/nimbus-icons": "^0.0.0-canary-20251013204307",
+    "@commercetools/nimbus-tokens": "^0.0.0-canary-20251013204307"
   },
   "peerDependencies": {
     "@chakra-ui/react": "^3.27.1",
     "react": "19.x",
     "react-intl": "7.x",
-    "@commercetools/nimbus-icons": "^0.0.0-canary-20251013071647",
-    "@commercetools/nimbus-tokens": "^0.0.0-canary-20251013071647"
+    "@commercetools/nimbus-icons": "^0.0.0-canary-20251013204307",
+    "@commercetools/nimbus-tokens": "^0.0.0-canary-20251013204307"
   },
   "scripts": {
     "build": "pnpm run build-theme-typings && pnpm run build:lib",