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

package/dist/money-input.d.ts

@@ -1,14 +1,8 @@
-import { Group } from 'react-aria-components';
-import { GroupProps as GroupProps_2 } from 'react-aria-components';
-import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
-import { HTMLChakraProps as HTMLChakraProps_2 } from '@chakra-ui/react';
+import { HTMLChakraProps } from '@chakra-ui/react';
 import { JSX } from 'react/jsx-runtime';
-import { RecipeProps } from '@chakra-ui/react';
-import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
-import { Ref } from 'react';
-import { SlotRecipeDefinition } from '@chakra-ui/react';
-import { UnstyledProp } from '@chakra-ui/react/styled-system';
-import { UnstyledProp as UnstyledProp_2 } from '@chakra-ui/react';
+import { SlotRecipeProps } from '@chakra-ui/react';
+import { TMoneyValue as TMoneyValue_2 } from '..';
+import { TValue as TValue_2 } from '..';
 
 declare const currencies: {
     readonly ADP: {
@@ -676,37 +670,8 @@ declare const currencies: {
     };
 };
 
-declare type DefaultExcludedProps = "css" | "asChild" | "as" | "colorScheme";
-
 declare type ExcludedSlotProps = "asChild" | "onChange" | "onBlur" | "onFocus" | "id" | "name" | "value" | "step";
 
-declare const formatMoneyValueForDisplay: (moneyValue: TMoneyValue, locale: string) => TValue;
-
-declare interface GroupProps extends Omit<GroupSlotProps, DefaultExcludedProps>, Pick<GroupProps_2, "isDisabled" | "isInvalid" | "onHoverChange" | "onHoverStart" | "onHoverEnd"> {
-    ref?: Ref<typeof Group>;
-}
-
-/**
- * Base recipe props interface that combines Chakra UI's recipe props
- * with the unstyled prop option for the div element.
- */
-declare interface GroupRecipeProps extends RecipeProps<"div">, UnstyledProp_2 {
-}
-
-/**
- * Root props interface 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 GroupSlotProps extends HTMLChakraProps_2<"div", GroupRecipeProps> {
-}
-
-declare const isEmpty: (formValue: TValue) => boolean;
-
-declare const isHighPrecision: (formValue: TValue, locale: string) => boolean;
-
-export declare const MoneyInput: MoneyInputType;
-
 /**
  * # MoneyInput
  *
@@ -773,12 +738,18 @@ export declare const MoneyInput: MoneyInputType;
  * - **Accessibility compliant** following WCAG 2.1 AA standards
  * - **Dual API support** for backward compatibility and modern development
  */
-declare const MoneyInputComponent: {
+export declare const MoneyInput: {
     (props: MoneyInputProps): JSX.Element;
+    getAmountInputId(id?: string): string | undefined;
+    getCurrencyDropdownId(id?: string): string | undefined;
+    convertToMoneyValue: (value: TValue_2, locale: string) => TMoneyValue_2 | null;
+    parseMoneyValue: (moneyValue: TMoneyValue_2, locale: string) => TValue_2;
+    isEmpty: (formValue: TValue_2) => boolean;
+    isHighPrecision: (formValue: TValue_2, locale: string) => boolean;
     displayName: string;
 };
 
-declare interface MoneyInputProps extends Omit<MoneyInputRootSlotProps, ExcludedSlotProps> {
+declare type MoneyInputProps = Omit<MoneyInputRootSlotProps, ExcludedSlotProps> & {
     /**
      * Used as HTML id property. An id is auto-generated when it is not specified.
      */
@@ -855,67 +826,14 @@ declare interface MoneyInputProps extends Omit<MoneyInputRootSlotProps, Excluded
      * Focus the input on initial render
      */
     autoFocus?: boolean;
-    /**
-     * Size variant for the input
-     */
-    size?: RecipeVariantProps<typeof moneyInputRecipe>["size"];
-}
-
-declare const moneyInputRecipe: SlotRecipeDefinition<"container" | "root" | "currencySelect" | "currencyLabel" | "amountInput" | "badge", {
-size: {
-sm: {
-root: {
-fontSize: "fontSize.20";
-"& .nimbus-select__trigger": {
-width: "2600";
-};
 };
-currencySelect: {
-padding: "0 spacing.20";
-};
-amountInput: {
-paddingRight: "spacing.30";
-};
-currencyLabel: {
-fontSize: "300";
-lineHeight: "450";
-};
-};
-md: {
-root: {
-fontSize: "fontSize.30";
-"& .nimbus-select__trigger": {
-width: "2800";
-};
-};
-currencySelect: {
-padding: "0 spacing.25";
-};
-amountInput: {
-paddingRight: "spacing.40";
-};
-currencyLabel: {
-fontSize: "350";
-lineHeight: "500";
-};
-};
-};
-}>;
-
-declare type MoneyInputRootSlotProps = HTMLChakraProps<"div", MoneyInputSlotRecipeProps> & GroupProps;
 
-declare interface MoneyInputSlotRecipeProps extends RecipeVariantProps<typeof moneyInputRecipe>, UnstyledProp {
-}
-
-declare type MoneyInputType = typeof MoneyInputComponent & {
-    convertToMoneyValue: typeof transformFormInputToMoneyValue;
-    parseMoneyValue: typeof formatMoneyValueForDisplay;
-    isEmpty: typeof isEmpty;
-    isHighPrecision: typeof isHighPrecision;
-    getAmountInputId: (id?: string) => string | undefined;
-    getCurrencyDropdownId: (id?: string) => string | undefined;
+declare type MoneyInputRecipeProps = {
+    size?: SlotRecipeProps<"moneyInput">["size"];
 };
 
+declare type MoneyInputRootSlotProps = HTMLChakraProps<"div", MoneyInputRecipeProps>;
+
 export declare type TCurrencyCode = keyof typeof currencies;
 
 export declare type TCustomEvent = {
@@ -940,8 +858,6 @@ export declare type TMoneyValue = {
     fractionDigits: number;
 } & TMoneyConditionalProps;
 
-declare const transformFormInputToMoneyValue: (value: TValue, locale: string) => TMoneyValue | null;
-
 export declare type TValue = {
     amount: string;
     currencyCode: TCurrencyCode | "";

package/dist/multiline-text-input.d.ts

@@ -1,9 +1,8 @@
-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';
-import { UnstyledProp } from '@chakra-ui/react/styled-system';
+import { UnstyledProp } from '@chakra-ui/react';
 
 /**
  * # Multiline Text Input
@@ -17,7 +16,9 @@ export declare const MultilineTextInput: {
     displayName: string;
 };
 
-export declare interface MultilineTextInputProps extends TextFieldProps, Omit<MultilineTextInputRootSlotProps, keyof TextFieldProps | "as" | "asChild"> {
+export declare type MultilineTextInputLeadingElementProps = HTMLChakraProps<"div", MultilineTextInputRecipeProps>;
+
+export declare type MultilineTextInputProps = Omit<MultilineTextInputRootSlotProps, keyof TextFieldProps | "as" | "asChild"> & TextFieldProps & {
     ref?: React.Ref<HTMLTextAreaElement>;
     /**
      * When true, the textarea will automatically grow in height to fit its content.
@@ -35,77 +36,16 @@ export declare interface MultilineTextInputProps extends TextFieldProps, Omit<Mu
      */
     leadingElement?: React.ReactNode;
     placeholder?: string;
-}
-
-/**
- * Recipe configuration for the MultilineTextInput component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-declare const multilineTextInputRecipe: SlotRecipeDefinition<"textarea" | "root" | "leadingElement", {
-size: {
-sm: {
-root: {
-minH: "800";
-textStyle: "sm";
-gap: "100";
-pl: "300";
-};
-textarea: {
-pr: "300";
-py: "100";
-};
-leadingElement: {
-pt: "200";
-"& svg": {
-boxSize: "400";
-};
-};
-};
-md: {
-root: {
-minH: "1000";
-textStyle: "md";
-gap: "200";
-pl: "400";
-};
-textarea: {
-py: "200";
-pr: "400";
-};
-leadingElement: {
-pt: "200";
-"& svg": {
-mt: "50";
-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";
-};
-};
-};
-};
-}>;
 
-declare interface MultilineTextInputRecipeProps extends RecipeVariantProps<typeof multilineTextInputRecipe>, UnstyledProp {
-}
+export declare type MultilineTextInputRecipeProps = {
+    size?: SlotRecipeProps<"multilineTextInput">["size"];
+    variant?: SlotRecipeProps<"multilineTextInput">["variant"];
+} & UnstyledProp;
+
+export declare type MultilineTextInputRootSlotProps = HTMLChakraProps<"div", MultilineTextInputRecipeProps>;
 
-declare type MultilineTextInputRootSlotProps = HTMLChakraProps<"div", MultilineTextInputRecipeProps>;
+export declare type MultilineTextInputTextAreaSlotProps = HTMLChakraProps<"textarea", MultilineTextInputRecipeProps>;
 
 export { }
 

package/dist/nimbus-provider.d.ts

@@ -1,8 +1,7 @@
 import { JSX } from 'react/jsx-runtime';
 import { ThemeProviderProps } from 'next-themes';
 
-export declare interface ColorModeProviderProps extends ThemeProviderProps {
-}
+export declare type ColorModeProviderProps = ThemeProviderProps;
 
 /**
  * # NimbusProvider
@@ -13,7 +12,7 @@ export declare interface ColorModeProviderProps extends ThemeProviderProps {
  */
 export declare function NimbusProvider({ children, locale, router, ...props }: NimbusProviderProps): JSX.Element;
 
-export declare interface NimbusProviderProps extends ColorModeProviderProps {
+export declare type NimbusProviderProps = ColorModeProviderProps & {
     /**
      * Optional locale for internationalization.
      * Expects a [BCP47 language tag](https://en.wikipedia.org/wiki/IETF_language_tag) (e.g., 'en-US', 'de-DE', 'fr-FR').
@@ -27,9 +26,9 @@ export declare interface NimbusProviderProps extends ColorModeProviderProps {
      * - `useHref`: Optional function to transform hrefs (useful for base paths).
      */
     router?: NimbusRouterConfig | TypedNimbusRouterConfig;
-}
+};
 
-export declare interface NimbusRouterConfig {
+export declare type NimbusRouterConfig = {
     /**
      * Function to programmatically navigate to a new route.
      * This should be the navigate function from your client-side router.
@@ -55,7 +54,7 @@ export declare interface NimbusRouterConfig {
      * <NimbusProvider router={{ navigate, useHref }} />
      */
     useHref?: (href: string) => string;
-}
+};
 
 /**
  * TypeScript module augmentation for Nimbus router configuration.
@@ -85,17 +84,16 @@ export declare interface NimbusRouterConfig {
  *   }
  * }
  */
-export declare interface NimbusRouterOptionsBase {
-}
+export declare type NimbusRouterOptionsBase = {};
 
 export declare type RouterOptions = NimbusRouterOptionsBase extends {
     routerOptions: any;
 } ? NimbusRouterOptionsBase["routerOptions"] : any;
 
-export declare interface TypedNimbusRouterConfig {
+export declare type TypedNimbusRouterConfig = {
     navigate: (href: string, routerOptions?: RouterOptions) => void;
     useHref?: (href: string) => string;
-}
+};
 
 export { }
 

package/dist/number-input.d.ts

@@ -1,9 +1,8 @@
 import { AriaNumberFieldProps } from 'react-aria';
-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 { UnstyledProp } from '@chakra-ui/react/styled-system';
+import { SlotRecipeProps } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react';
 
 declare type ExcludedNumberInputProps = "asChild" | "onChange";
 
@@ -18,7 +17,7 @@ export declare const NumberInput: {
     displayName: string;
 };
 
-export declare interface NumberInputProps extends AriaNumberFieldProps, Omit<NumberInputRootSlotProps, keyof AriaNumberFieldProps | ExcludedNumberInputProps> {
+export declare type NumberInputProps = Omit<NumberInputRootSlotProps, keyof AriaNumberFieldProps | ExcludedNumberInputProps> & AriaNumberFieldProps & {
     ref?: React.Ref<HTMLInputElement>;
     /**
      * Optional element to display at the start of the input
@@ -30,124 +29,12 @@ export declare interface NumberInputProps extends AriaNumberFieldProps, Omit<Num
      * Will respect text direction (right in LTR, left in RTL)
      */
     trailingElement?: React.ReactNode;
-}
-
-/**
- * Recipe configuration for the NumberInput component.
- * Defines the styling variants and base styles using Chakra UI's slot recipe system.
- */
-declare const numberInputRecipe: SlotRecipeDefinition<"input" | "root" | "leadingElement" | "trailingElement" | "incrementButton" | "decrementButton", {
-size: {
-sm: {
-root: {
-pl: "300";
-pr: "900";
-gap: "100";
-};
-input: {
-h: "800";
-textStyle: "sm";
-};
-leadingElement: {
-"& > svg": {
-boxSize: "400";
-};
-};
-trailingElement: {
-"& > svg": {
-boxSize: "400";
-};
-};
-};
-md: {
-root: {
-pl: "400";
-pr: "1000";
-gap: "200";
-};
-input: {
-h: "1000";
-textStyle: "md";
-};
-leadingElement: {
-"& > svg": {
-boxSize: "500";
-};
-};
-trailingElement: {
-"& > svg": {
-boxSize: "500";
-};
-};
-};
-};
-variant: {
-solid: {
-root: {
-_hover: {
-backgroundColor: "primary.2";
-};
-"--border-width": "sizes.25";
-"--border-color": "colors.neutral.7";
-backgroundColor: "neutral.1";
-};
-incrementButton: {
-"&[data-invalid='true']": {
-borderTop: "2px solid var(--border-color)";
-borderRight: "2px solid var(--border-color)";
-};
-borderTop: "var(--border-width) solid var(--border-color)";
-borderRight: "var(--border-width) solid var(--border-color)";
-borderLeft: "var(--border-width) solid var(--border-color)";
-boxShadow: "inset 0 -0.5px 0 0 var(--border-color)";
-_hover: {
-backgroundColor: "primaryAlpha.4";
-};
-};
-decrementButton: {
-"&[data-invalid='true']": {
-borderBottom: "2px solid var(--border-color)";
-borderRight: "2px solid var(--border-color)";
-};
-borderBottom: "var(--border-width) solid var(--border-color)";
-borderRight: "var(--border-width) solid var(--border-color)";
-borderLeft: "var(--border-width) solid var(--border-color)";
-boxShadow: "inset 0 0.5px 0 0 var(--border-color)";
-_hover: {
-backgroundColor: "primaryAlpha.4";
-};
-};
-};
-ghost: {
-root: {
-_hover: {
-backgroundColor: "primary.2";
-};
-};
-incrementButton: {
-"&[data-invalid='true']": {
-borderTop: "2px solid var(--border-color)";
-borderRight: "2px solid var(--border-color)";
-};
-_hover: {
-backgroundColor: "primaryAlpha.4";
-};
-};
-decrementButton: {
-"&[data-invalid='true']": {
-borderBottom: "2px solid var(--border-color)";
-borderRight: "2px solid var(--border-color)";
-};
-_hover: {
-backgroundColor: "primaryAlpha.4";
-};
-};
-};
 };
-}>;
 
-declare interface NumberInputRecipeProps extends RecipeVariantProps<typeof numberInputRecipe>, UnstyledProp {
-}
+declare type NumberInputRecipeProps = {
+    size?: SlotRecipeProps<"numberInput">["size"];
+    variant?: SlotRecipeProps<"numberInput">["variant"];
+} & UnstyledProp;
 
 declare type NumberInputRootSlotProps = HTMLChakraProps<"div", NumberInputRecipeProps> & {
     name?: string;

package/dist/pagination.d.ts

@@ -13,7 +13,7 @@ export declare const Pagination: {
     displayName: string;
 };
 
-export declare interface PaginationProps {
+export declare type PaginationProps = {
     /** Total number of items */
     totalItems: number;
     /** Current page (1-based) */
@@ -32,7 +32,7 @@ export declare interface PaginationProps {
     enablePageInput?: boolean;
     /** Enables the page size selector dropdown */
     enablePageSizeSelector?: boolean;
-}
+};
 
 export { }
 

package/dist/password-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';
 
 /**
@@ -17,14 +16,13 @@ export declare const PasswordInput: {
 };
 
 /**
- * Interface for PasswordInput component props
+ * Type for PasswordInput component props
  * Extends TextInputProps but omits the type prop since it's controlled internally
- * We want to keep this as an explicit interface to allow for future additions
+ * We want to keep this as an explicit type to allow for future additions
  */
-export declare interface PasswordInputProps extends Omit<TextInputProps, "type" | "trailingElement"> {
-}
+export declare type PasswordInputProps = Omit<TextInputProps, "type" | "trailingElement">;
 
-declare interface TextInputProps extends Omit<TextFieldProps, "ref">, Omit<TextInputRootProps, keyof TextFieldProps | "as" | "asChild"> {
+declare type TextInputProps = Omit<TextInputRootProps, keyof TextFieldProps | "as" | "asChild"> & Omit<TextFieldProps, "ref"> & {
     /**
      * React ref to be forwarded to the input element
      */
@@ -40,65 +38,14 @@ declare interface TextInputProps extends Omit<TextFieldProps, "ref">, Omit<TextI
      */
     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"];
 };
-}>;
+
+declare type TextInputRootProps = HTMLChakraProps<"div", TextInputRecipeProps>;
 
 export { }
 

package/dist/popover.d.ts

@@ -1,10 +1,8 @@
-import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { HTMLChakraProps } from '@chakra-ui/react';
 import { JSX } from 'react/jsx-runtime';
 import { PopoverProps as PopoverProps_2 } from 'react-aria-components';
-import { RecipeDefinition } from '@chakra-ui/react';
-import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
-import { RecipeVariantRecord } from '@chakra-ui/react';
-import { UnstyledProp } from '@chakra-ui/react/styled-system';
+import { RecipeProps } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react';
 
 /**
  * # Popover
@@ -20,16 +18,9 @@ export declare const Popover: {
 
 export declare type PopoverProps = PopoverProps_2 & PopoverSlotProps;
 
-/**
- * Recipe configuration for the Popover component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-declare const popoverRecipe: RecipeDefinition<RecipeVariantRecord>;
-
-declare interface PopoverRecipeProps extends RecipeVariantProps<typeof popoverRecipe>, UnstyledProp {
-}
+export declare type PopoverRecipeProps = RecipeProps<"popover"> & UnstyledProp;
 
-declare type PopoverSlotProps = HTMLChakraProps<"div", PopoverRecipeProps>;
+export declare type PopoverSlotProps = HTMLChakraProps<"div", PopoverRecipeProps>;
 
 export { }