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

package/dist/tabs.d.ts

@@ -1,9 +1,8 @@
 import { ForwardRefExoticComponent } from 'react';
-import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { HTMLChakraProps } from '@chakra-ui/react';
 import { JSX } from 'react/jsx-runtime';
-import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
 import { RefAttributes } from 'react';
-import { SlotRecipeDefinition } from '@chakra-ui/react';
+import { SlotRecipeProps } from '@chakra-ui/react';
 import { TabListProps as TabListProps_2 } from './tabs.types';
 import { TabPanelProps as TabPanelProps_2 } from './tabs.types';
 import { TabPanelsProps as TabPanelsProps_2 } from './tabs.types';
@@ -23,7 +22,7 @@ export declare const _Tab: {
 /**
  * Props for individual tab item component
  */
-export declare interface TabItemProps {
+export declare type TabItemProps = {
     /**
      * The id of the tab item
      */
@@ -40,7 +39,7 @@ export declare interface TabItemProps {
      * Whether the tab item is disabled
      */
     isDisabled?: boolean;
-}
+};
 
 /**
  * # TabList
@@ -55,11 +54,11 @@ export declare const _TabList: {
 /**
  * Props for individual tab list component
  */
-export declare interface TabListProps extends TabsListSlotProps {
+export declare type TabListProps = TabsListSlotProps & {
     tabs?: TabItemProps[];
     children?: React.ReactNode;
     ref?: React.Ref<HTMLDivElement>;
-}
+};
 
 /**
  * # TabPanel
@@ -71,11 +70,11 @@ export declare const _TabPanel: ForwardRefExoticComponent<Omit<TabPanelProps, "r
 /**
  * Props for individual tab panel component
  */
-export declare interface TabPanelProps extends TabsPanelSlotProps {
+export declare type TabPanelProps = TabsPanelSlotProps & {
     tabs?: TabItemProps[];
     children?: React.ReactNode;
     ref?: React.Ref<HTMLDivElement>;
-}
+};
 
 /**
  * # TabPanels
@@ -90,20 +89,20 @@ export declare const _TabPanels: {
 /**
  * Props for tab panels container component
  */
-export declare interface TabPanelsProps extends TabsPanelsSlotProps {
+export declare type TabPanelsProps = TabsPanelsSlotProps & {
     tabs?: TabItemProps[];
     children?: React.ReactNode;
     ref?: React.Ref<HTMLDivElement>;
-}
+};
 
 /**
  * Props for individual tab component
  */
-export declare interface TabProps extends TabsTabSlotProps {
+export declare type TabProps = TabsTabSlotProps & {
     children?: React.ReactNode;
     ref?: React.Ref<HTMLButtonElement>;
     isDisabled?: boolean;
-}
+};
 
 export declare const Tabs: {
     Root: {
@@ -125,46 +124,33 @@ export declare const Tabs: {
     Panel: ForwardRefExoticComponent<Omit<TabPanelProps_2, "ref"> & RefAttributes<HTMLDivElement>>;
 };
 
-export declare interface TabsListSlotProps extends HTMLChakraProps<"div", RecipeVariantProps<typeof tabsSlotRecipe>> {
+export declare type TabsListSlotProps = HTMLChakraProps<"div", TabsRecipeProps> & {
     children?: React.ReactNode;
-}
+};
 
-export declare interface TabsPanelSlotProps extends HTMLChakraProps<"div", RecipeVariantProps<typeof tabsSlotRecipe>> {
+export declare type TabsPanelSlotProps = HTMLChakraProps<"div", SlotRecipeProps<"tabs">> & {
     id?: string;
-}
+};
 
-export declare interface TabsPanelsSlotProps extends HTMLChakraProps<"div", RecipeVariantProps<typeof tabsSlotRecipe>> {
+export declare type TabsPanelsSlotProps = HTMLChakraProps<"div", SlotRecipeProps<"tabs">> & {
     children?: React.ReactNode;
-}
+};
 
 /**
- * Main props interface for the Tabs root component.
+ * Main props type for the Tabs root component.
  * Combines React Aria tabs props with our styling variants.
  */
-export declare interface TabsProps extends TabsRootSlotProps, TabsVariantProps {
+export declare type TabsProps = TabsRootSlotProps & TabsVariantProps & {
     children?: React.ReactNode;
     ref?: React.Ref<HTMLDivElement>;
-    /**
-     * Direction of the tabs layout
-     * @default "horizontal"
-     */
-    orientation?: "horizontal" | "vertical";
-    /**
-     * Placement of the tab list relative to panels
-     * @default "start"
-     */
-    placement?: "start" | "end";
-    /**
-     * Size of the tabs affecting padding and font size
-     * @default "md"
-     */
-    size?: "sm" | "md" | "lg";
-    /**
-     * Array of tab items for collection rendering
-     * When provided, tabs will be rendered automatically from this data
-     */
     tabs?: TabItemProps[];
-}
+};
+
+declare type TabsRecipeProps = {
+    orientation?: SlotRecipeProps<"tabs">["orientation"];
+    placement?: SlotRecipeProps<"tabs">["placement"];
+    size?: SlotRecipeProps<"tabs">["size"];
+};
 
 /**
  * # Tabs
@@ -179,9 +165,9 @@ export declare const _TabsRoot: {
 };
 
 /**
- * Root props interface that extends React Aria's tabs props with our recipe props.
+ * Root props type that extends React Aria's tabs props with our recipe props.
  */
-export declare interface TabsRootSlotProps extends HTMLChakraProps<"div", RecipeVariantProps<typeof tabsSlotRecipe>> {
+export declare type TabsRootSlotProps = HTMLChakraProps<"div", TabsRecipeProps> & {
     /**
      * The children of the Tabs component.
      */
@@ -202,97 +188,17 @@ export declare interface TabsRootSlotProps extends HTMLChakraProps<"div", Recipe
      * The keyboard activation of the Tabs component.
      */
     keyboardActivation?: "automatic" | "manual";
-    /**
-     * The orientation of the Tabs component.
-     */
-    orientation?: "horizontal" | "vertical";
-    /**
-     * The placement of the Tabs component.
-     */
-    placement?: "start" | "end";
-    /**
-     * The size of the Tabs component.
-     */
-    size?: "sm" | "md" | "lg";
-}
-
-/**
- * Recipe configuration for the Tabs component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-declare const tabsSlotRecipe: SlotRecipeDefinition<"trigger" | "list" | "root" | "panel" | "tab" | "panels", {
-orientation: {
-horizontal: {
-root: {
-flexDirection: "column";
-};
-list: {
-borderBottom: "{spacing.25} {colors.neutral.6} solid";
-};
-tab: {
-borderBottom: "{spacing.50} solid transparent";
-marginRight: "-25";
-_selected: {
-borderBottomColor: "primary.9";
-};
-};
-};
-vertical: {
-root: {
-flexDirection: "row";
-};
-list: {
-flexDirection: "column";
-};
-tab: {
-justifyContent: "flex-start";
 };
-};
-};
-placement: {
-start: {};
-end: {};
-};
-size: {
-sm: {
-tab: {
-"--tabs-font-size": "fontSizes.300";
-"--tabs-padding-top": "spacing.100";
-"--tabs-padding-right": "spacing.300";
-"--tabs-padding-bottom": "spacing.100";
-"--tabs-padding-left": "spacing.300";
-};
-};
-md: {
-tab: {
-"--tabs-font-size": "fontSizes.350";
-"--tabs-padding-top": "spacing.200";
-"--tabs-padding-right": "spacing.400";
-"--tabs-padding-bottom": "spacing.200";
-"--tabs-padding-left": "spacing.400";
-};
-};
-lg: {
-tab: {
-"--tabs-font-size": "fontSizes.400";
-"--tabs-padding-top": "spacing.300";
-"--tabs-padding-right": "spacing.600";
-"--tabs-padding-bottom": "spacing.300";
-"--tabs-padding-left": "spacing.600";
-};
-};
-};
-}>;
 
-export declare interface TabsTabSlotProps extends HTMLChakraProps<"button", RecipeVariantProps<typeof tabsSlotRecipe>> {
+export declare type TabsTabSlotProps = HTMLChakraProps<"button", TabsRecipeProps> & {
     id?: string;
     isDisabled?: boolean;
-}
+};
 
 /**
  * Tabs recipe variant props for direction and placement configuration
  */
-declare type TabsVariantProps = RecipeVariantProps<typeof tabsSlotRecipe> & {
+declare type TabsVariantProps = SlotRecipeProps<"tabs"> & {
     [key: `data-${string}`]: unknown;
 };
 

package/dist/tag-group.d.ts

@@ -1,11 +1,10 @@
 import { FC } from 'react';
-import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { HTMLChakraProps } from '@chakra-ui/react';
 import { JSX } from 'react/jsx-runtime';
-import { PropsWithChildren } from 'react';
-import { RecipeProps } from '@chakra-ui/react/styled-system';
-import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
+import { RecipeProps } from '@chakra-ui/react';
+import { Ref } from 'react';
 import { RefAttributes } from 'react';
-import { SlotRecipeDefinition } from '@chakra-ui/react';
+import { SlotRecipeProps } from '@chakra-ui/react';
 import { Tag } from 'react-aria-components';
 import { TagGroup as TagGroup_2 } from 'react-aria-components';
 import { TagGroupProps as TagGroupProps_2 } from 'react-aria-components';
@@ -31,48 +30,22 @@ export declare const TagGroup: {
 };
 
 /** Final external props for the `<TagGroup>` component, including `children`. */
-export declare type TagGroupProps = PropsWithChildren<TagGroupRootProps> & {
-    ref?: React.Ref<typeof TagGroup_2>;
+export declare type TagGroupProps = TagGroupRecipeVariantProps & Omit<TagGroupRootProps, "size"> & {
+    ref?: Ref<typeof TagGroup_2>;
+};
+
+declare type TagGroupRecipeVariantProps = {
+    size?: SlotRecipeProps<"taggroup">["size"];
 };
 
 /** Type signature for the main `TagGroup` component. */
 export declare type TagGroupRootComponent = FC<TagGroupProps>;
 
-/** Combined props for the root element (Chakra styles + Aria behavior + Recipe variants). */
-declare type TagGroupRootProps = TagGroupRootSlotProps & TagGroupProps_2 & RecipeVariantProps<typeof tagGroupSlotRecipe>;
+/** Combined props for the root element (Chakra styles + Aria behavior). */
+declare type TagGroupRootProps = TagGroupRootSlotProps & TagGroupProps_2;
 
 /** Base Chakra styling props for the root `div` slot. */
-declare type TagGroupRootSlotProps = HTMLChakraProps<"div", RecipeProps<"div">>;
-
-/**
- * Recipe configuration for the TagGroup component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-declare const tagGroupSlotRecipe: SlotRecipeDefinition<"root" | "tagList" | "tag", {
-size: {
-sm: {
-tag: {
-minH: "600";
-paddingX: "200";
-fontSize: "350";
-lineHeight: "400";
-};
-};
-md: {
-tag: {
-minH: "800";
-paddingX: "200";
-paddingY: "100";
-};
-};
-lg: {
-tag: {
-minH: "1000";
-padding: "200";
-};
-};
-};
-}>;
+declare type TagGroupRootSlotProps = HTMLChakraProps<"div", TagGroupRecipeVariantProps>;
 
 /** Type signature for the `TagGroup.Tag` sub-component. */
 export declare type TagGroupTagComponent = FC<TagGroupTagProps>;
@@ -82,7 +55,7 @@ export declare type TagGroupTagListComponent<T extends object> = FC<TagGroupTagL
 
 /** Combined props for the tagList element (Chakra styles + Aria behavior + Recipe variants). */
 export declare type TagGroupTagListProps<T extends object> = TagListProps<T> & Omit<TagGroupTagListSlotProps, keyof TagListProps<T>> & {
-    ref?: React.Ref<HTMLDivElement>;
+    ref?: Ref<HTMLDivElement>;
 };
 
 /** Base Chakra styling props for the root `div` slot. */
@@ -90,7 +63,7 @@ declare type TagGroupTagListSlotProps = HTMLChakraProps<"div", RecipeProps<"div"
 
 /** Combined props for the tag element (Chakra styles + Aria behavior + Recipe variants). */
 export declare type TagGroupTagProps = TagProps & Omit<TagGroupTagSlotProps, keyof TagProps> & {
-    ref?: React.Ref<typeof Tag>;
+    ref?: Ref<typeof Tag>;
 };
 
 /** Base Chakra styling props for the root `div` slot. */

package/dist/text-input.d.ts

@@ -1,7 +1,6 @@
-import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { HTMLChakraProps } from '@chakra-ui/react';
 import { JSX } from 'react/jsx-runtime';
-import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
-import { SlotRecipeDefinition } from '@chakra-ui/react';
+import { SlotRecipeProps } from '@chakra-ui/react';
 import { TextFieldProps } from 'react-aria-components';
 
 /**
@@ -16,7 +15,11 @@ export declare const TextInput: {
     displayName: string;
 };
 
-export declare interface TextInputProps extends Omit<TextFieldProps, "ref">, Omit<TextInputRootProps, keyof TextFieldProps | "as" | "asChild"> {
+export declare type TextInputInputProps = HTMLChakraProps<"input">;
+
+export declare type TextInputLeadingElementProps = HTMLChakraProps<"div">;
+
+export declare type TextInputProps = Omit<TextInputRootProps, keyof TextFieldProps | "as" | "asChild"> & Omit<TextFieldProps, "ref"> & {
     /**
      * React ref to be forwarded to the input element
      */
@@ -32,65 +35,16 @@ export declare interface TextInputProps extends Omit<TextFieldProps, "ref">, Omi
      */
     trailingElement?: React.ReactNode;
     placeholder?: string;
-}
-
-declare interface TextInputRootProps extends HTMLChakraProps<"div", RecipeVariantProps<typeof textInputSlotRecipe>> {
-}
-
-/**
- * Recipe configuration for the TextInput component.
- * Defines the styling variants and base styles using Chakra UI's slot recipe system.
- */
-declare const textInputSlotRecipe: SlotRecipeDefinition<"input" | "root" | "leadingElement" | "trailingElement", {
-size: {
-sm: {
-root: {
-height: "800";
-px: "300";
-gap: "100";
-textStyle: "sm";
-};
-leadingElement: {
-"& > svg": {
-boxSize: "400";
-};
-};
-trailingElement: {
-"& > svg": {
-boxSize: "400";
-};
-};
-};
-md: {
-root: {
-height: "1000";
-px: "400";
-gap: "200";
-textStyle: "md";
 };
-leadingElement: {
-"& > svg": {
-boxSize: "500";
-};
-};
-trailingElement: {
-"& > svg": {
-boxSize: "500";
-};
-};
-};
-};
-variant: {
-solid: {
-root: {
-"--border-width": "sizes.25";
-"--border-color": "colors.neutral.7";
-backgroundColor: "primary.1";
-};
-};
-ghost: {};
+
+declare type TextInputRecipeProps = {
+    size?: SlotRecipeProps<"textInput">["size"];
+    variant?: SlotRecipeProps<"textInput">["variant"];
 };
-}>;
+
+export declare type TextInputRootProps = HTMLChakraProps<"div", TextInputRecipeProps>;
+
+export declare type TextInputTrailingElementProps = HTMLChakraProps<"div">;
 
 export { }
 

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 { }