@commercetools/nimbus 0.0.0-canary-20250801132810

package/dist/link.d.ts

@@ -0,0 +1,86 @@
+import { AriaLinkOptions } from 'react-aria';
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+import { RecipeDefinition } from '@chakra-ui/react';
+import { RecipeProps } from '@chakra-ui/react';
+import { RecipeVariantProps } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react';
+
+/**
+ * # Link
+ *
+ * To allow a user to navigate to a different page or resource
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/navigation/link}
+ */
+export declare const Link: {
+    (props: LinkProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Main props interface for the Link component.
+ * Extends LinkVariantProps to include both root props and variant props,
+ * while adding support for React children.
+ */
+export declare interface LinkProps extends LinkVariantProps {
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLAnchorElement>;
+}
+
+/**
+ * Recipe configuration for the Link component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+declare const linkRecipe: RecipeDefinition<    {
+size: {
+xs: {
+fontSize: "300";
+lineHeight: "450";
+};
+sm: {
+fontSize: "350";
+lineHeight: "500";
+};
+md: {
+fontSize: "400";
+lineHeight: "600";
+};
+};
+fontColor: {
+primary: {
+color: "primary";
+};
+inherit: {
+color: "inherit";
+};
+};
+}>;
+
+/**
+ * Base recipe props interface that combines Chakra UI's recipe props
+ * with the unstyled prop option for the a element.
+ */
+declare interface LinkRecipeProps extends RecipeProps<"a">, UnstyledProp {
+}
+
+/**
+ * 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 type LinkRootProps = HTMLChakraProps<"a", LinkRecipeProps>;
+
+/**
+ * Combines the root props with Chakra UI's recipe variant props.
+ * This allows the component to accept both structural props from Root
+ * and styling variants from the recipe.
+ *
+ * Differences between LinkRootProps and LinkVariantProps necessitate
+ * the use of Omit and Pick to ensure the correct props are passed
+ */
+declare type LinkVariantProps = Omit<LinkRootProps, "onFocus" | "onBlur" | "onClick"> & Pick<AriaLinkOptions, "onFocus" | "onBlur" | "onClick"> & RecipeVariantProps<typeof linkRecipe> & {
+    [key: `data-${string}`]: string;
+};
+
+export { }

package/dist/list.d.ts

@@ -0,0 +1,26 @@
+import { ForwardRefExoticComponent } from 'react';
+import { List as List_2 } from '@chakra-ui/react';
+import { ListIndicatorProps } from '@chakra-ui/react';
+import { RefAttributes } from 'react';
+
+/**
+ * # List
+ *
+ * displays a list
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/typography/list}
+ * @experimental This component is experimental and may change or be removed in future versions.
+ */
+export declare const List: {
+    Root: ForwardRefExoticComponent<List_2.RootProps & RefAttributes<HTMLUListElement>>;
+    Item: ForwardRefExoticComponent<List_2.ItemProps & RefAttributes<HTMLLIElement>>;
+    Indicator: ForwardRefExoticComponent<ListIndicatorProps & RefAttributes<HTMLSpanElement>>;
+};
+
+export declare const _ListIndicator: ForwardRefExoticComponent<ListIndicatorProps & RefAttributes<HTMLSpanElement>>;
+
+export declare const _ListItem: ForwardRefExoticComponent<List_2.ItemProps & RefAttributes<HTMLLIElement>>;
+
+export declare const _ListRoot: ForwardRefExoticComponent<List_2.RootProps & RefAttributes<HTMLUListElement>>;
+
+export { }

package/dist/loading-spinner.d.ts

@@ -0,0 +1,90 @@
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+import { RecipeDefinition } from '@chakra-ui/react';
+import { RecipeProps } from '@chakra-ui/react';
+import { RecipeVariantProps } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react';
+
+/**
+ * # LoadingSpinner
+ *
+ * Indicates ongoing processes or loading states
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/feedback/loadingspinner}
+ */
+export declare const LoadingSpinner: {
+    (props: LoadingSpinnerProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Main props interface for the LoadingSpinner component.
+ * Extends LoadingSpinnerVariantProps to include both root props and variant props,
+ * while adding support for React children.
+ */
+export declare type LoadingSpinnerProps = LoadingSpinnerVariantProps & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+
+/**
+ * Recipe configuration for the LoadingSpinner component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+declare const loadingSpinnerRecipe: RecipeDefinition<    {
+size: {
+"2xs": {
+width: "350";
+height: "350";
+};
+xs: {
+width: "500";
+height: "500";
+};
+sm: {
+width: "600";
+height: "600";
+};
+md: {
+width: "800";
+height: "800";
+};
+lg: {
+width: "1000";
+height: "1000";
+};
+};
+tone: {
+primary: {
+colorPalette: "ctvioletAlpha";
+};
+white: {
+colorPalette: "whiteAlpha";
+};
+};
+}>;
+
+/**
+ * Base recipe props interface that combines Chakra UI's recipe props
+ * with the unstyled prop option for the div element.
+ */
+declare interface LoadingSpinnerRecipeProps extends RecipeProps<"div">, UnstyledProp {
+}
+
+/**
+ * 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 type LoadingSpinnerRootProps = Omit<HTMLChakraProps<"div", LoadingSpinnerRecipeProps>, "as" | "asChild">;
+
+/**
+ * Combines the root props with Chakra UI's recipe variant props and Aria's progress bar props.
+ *
+ * This allows the component to accept both structural props from Root
+ * and styling variants from the recipe.
+ */
+declare type LoadingSpinnerVariantProps = LoadingSpinnerRootProps & RecipeVariantProps<typeof loadingSpinnerRecipe> & {
+    [key: `data-${string}`]: string;
+};
+
+export { }

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

@@ -0,0 +1,70 @@
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+import { RecipeDefinition } from '@chakra-ui/react';
+import { RecipeVariantProps } from '@chakra-ui/react';
+import { TextFieldProps } from 'react-aria-components';
+import { UnstyledProp } from '@chakra-ui/react';
+
+/**
+ * # Multiline Text Input
+ *
+ * A multiline text input component for capturing longer text content.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/forms/multiline-text-input}
+ */
+export declare const MultilineTextInput: {
+    (props: MultilineTextInputProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface MultilineTextInputProps extends TextFieldProps, Omit<MultilineTextInputRootSlotProps, keyof TextFieldProps | "as" | "asChild"> {
+    ref?: React.Ref<HTMLTextAreaElement>;
+    /**
+     * When true, the textarea will automatically grow in height to fit its content.
+     * This works in addition to the default draggable resize behavior.
+     */
+    autoGrow?: boolean;
+}
+
+/**
+ * Recipe configuration for the MultilineTextInput component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+declare const multilineTextInputRecipe: RecipeDefinition<    {
+size: {
+sm: {
+minH: number;
+textStyle: "sm";
+px: number;
+py: number;
+};
+md: {
+minH: number;
+textStyle: "md";
+px: number;
+py: number;
+};
+};
+variant: {
+solid: {
+"--border-width": "sizes.25";
+"--border-color": "colors.neutral.7";
+backgroundColor: "neutral.1";
+_hover: {
+backgroundColor: "primary.2";
+};
+};
+ghost: {
+_hover: {
+backgroundColor: "primary.2";
+};
+};
+};
+}>;
+
+declare interface MultilineTextInputRecipeProps extends RecipeVariantProps<typeof multilineTextInputRecipe>, UnstyledProp {
+}
+
+declare type MultilineTextInputRootSlotProps = HTMLChakraProps<"textarea", MultilineTextInputRecipeProps>;
+
+export { }

package/dist/nimbus-provider.d.ts

@@ -0,0 +1,100 @@
+import { JSX } from 'react/jsx-runtime';
+import { ThemeProviderProps } from 'next-themes';
+
+export declare interface ColorModeProviderProps extends ThemeProviderProps {
+}
+
+/**
+ * # NimbusProvider
+ *
+ * provides an environment for the rest of the components to work in
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/utilities/nimbusprovider}
+ */
+export declare function NimbusProvider({ children, locale, router, ...props }: NimbusProviderProps): JSX.Element;
+
+export declare interface NimbusProviderProps extends 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').
+     * Defaults to the user's browser locale if not provided.
+     */
+    locale?: string;
+    /**
+     * Optional router configuration object for client-side navigation.
+     * When provided, all nimbus components with href props will use client-side routing.
+     * - `navigate`: Function to programmatically navigate to routes.
+     * - `useHref`: Optional function to transform hrefs (useful for base paths).
+     */
+    router?: NimbusRouterConfig | TypedNimbusRouterConfig;
+}
+
+export declare interface NimbusRouterConfig {
+    /**
+     * Function to programmatically navigate to a new route.
+     * This should be the navigate function from your client-side router.
+     *
+     * @example
+     * // React Router
+     * const navigate = useNavigate();
+     * <NimbusProvider router={{ navigate }} />
+     *
+     * @example
+     * // Next.js App Router
+     * const router = useRouter();
+     * <NimbusProvider router={{ navigate: router.push }} />
+     */
+    navigate: (href: string, routerOptions?: any) => void;
+    /**
+     * Optional function to transform hrefs before they are used.
+     * Useful for prepending base paths or other URL transformations.
+     *
+     * @example
+     * // Next.js with basePath
+     * const useHref = (href: string) => process.env.BASE_PATH + href;
+     * <NimbusProvider router={{ navigate, useHref }} />
+     */
+    useHref?: (href: string) => string;
+}
+
+/**
+ * TypeScript module augmentation for Nimbus router configuration.
+ *
+ * This allows consumers to extend the router configuration types
+ * to match their specific router framework, providing better type safety.
+ *
+ * TODO: Document this in an mdx-file, available to consumers via the docs-app
+ *
+ * @example
+ * // For React Router
+ * import type { NavigateOptions } from 'react-router-dom';
+ *
+ * declare module '@commercetools/nimbus' {
+ *   interface NimbusRouterOptionsBase {
+ *     routerOptions?: NavigateOptions;
+ *   }
+ * }
+ *
+ * @example
+ * // For Next.js App Router
+ * import type { AppRouterInstance } from 'next/dist/shared/lib/app-router-context';
+ *
+ * declare module '@commercetools/nimbus' {
+ *   interface NimbusRouterOptionsBase {
+ *     routerOptions?: Parameters<AppRouterInstance['push']>[1];
+ *   }
+ * }
+ */
+export declare interface NimbusRouterOptionsBase {
+}
+
+export declare type RouterOptions = NimbusRouterOptionsBase extends {
+    routerOptions: any;
+} ? NimbusRouterOptionsBase["routerOptions"] : any;
+
+export declare interface TypedNimbusRouterConfig {
+    navigate: (href: string, routerOptions?: RouterOptions) => void;
+    useHref?: (href: string) => string;
+}
+
+export { }

package/dist/number-input.d.ts

@@ -0,0 +1,136 @@
+import { AriaNumberFieldProps } from 'react-aria';
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+import { RecipeVariantProps } from '@chakra-ui/react';
+import { SlotRecipeDefinition } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react';
+
+declare type ExcludedNumberInputProps = "asChild" | "onChange";
+
+/**
+ * # NumberInput
+ *
+ * A number input allows users to enter numerical values and adjust them incrementally.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/number-input}
+ */
+export declare const NumberInput: {
+    (props: NumberInputProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface NumberInputProps extends AriaNumberFieldProps, Omit<NumberInputRootSlotProps, keyof AriaNumberFieldProps | ExcludedNumberInputProps> {
+    ref?: React.Ref<HTMLInputElement>;
+}
+
+/**
+ * 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" | "incrementButton" | "decrementButton", {
+size: {
+sm: {
+input: {
+h: number;
+textStyle: "sm";
+px: number;
+paddingRight: number;
+};
+};
+md: {
+input: {
+h: number;
+textStyle: "md";
+px: number;
+paddingRight: number;
+};
+};
+};
+variant: {
+solid: {
+root: {
+"&:has(button:hover) input": {
+backgroundColor: "primary.2";
+};
+};
+input: {
+"&[data-invalid='true']": {
+boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)";
+"--border-width": "sizes.50";
+};
+boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)";
+backgroundColor: "neutral.1";
+_hover: {
+backgroundColor: "primary.2";
+};
+};
+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.3";
+};
+};
+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.3";
+};
+};
+};
+ghost: {
+root: {
+"&:has(button:hover) input": {
+backgroundColor: "primary.2";
+};
+};
+input: {
+"&[data-invalid='true']": {
+boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)";
+"--border-width": "sizes.50";
+};
+_hover: {
+backgroundColor: "primary.2";
+};
+};
+incrementButton: {
+"&[data-invalid='true']": {
+borderTop: "2px solid var(--border-color)";
+borderRight: "2px solid var(--border-color)";
+};
+_hover: {
+backgroundColor: "primaryAlpha.3";
+};
+};
+decrementButton: {
+"&[data-invalid='true']": {
+borderBottom: "2px solid var(--border-color)";
+borderRight: "2px solid var(--border-color)";
+};
+_hover: {
+backgroundColor: "primaryAlpha.3";
+};
+};
+};
+};
+}>;
+
+declare interface NumberInputRecipeProps extends RecipeVariantProps<typeof numberInputRecipe>, UnstyledProp {
+}
+
+declare type NumberInputRootSlotProps = HTMLChakraProps<"div", NumberInputRecipeProps>;
+
+export { }

package/dist/password-input.d.ts

@@ -0,0 +1,69 @@
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { RecipeDefinition } from '@chakra-ui/react';
+import { RecipeVariantProps } from '@chakra-ui/react';
+import { RefAttributes } from 'react';
+import { TextFieldProps } from 'react-aria-components';
+import { UnstyledProp } from '@chakra-ui/react';
+
+/**
+ * # PasswordInput
+ *
+ * A password input is a text field that hides entered characters for secure password entry.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/passwordinput}
+ */
+export declare const PasswordInput: ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & RefAttributes<HTMLInputElement>>;
+
+/**
+ * Interface 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
+ */
+export declare interface PasswordInputProps extends Omit<TextInputProps, "type"> {
+}
+
+declare interface TextInputProps extends TextFieldProps, Omit<TextInputRootSlotProps, keyof TextFieldProps | "as" | "asChild"> {
+    ref?: React.Ref<HTMLInputElement>;
+}
+
+/**
+ * Recipe configuration for the TextInput component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+declare const textInputRecipe: RecipeDefinition<    {
+size: {
+sm: {
+h: number;
+textStyle: "sm";
+px: number;
+};
+md: {
+h: number;
+textStyle: "md";
+px: number;
+};
+};
+variant: {
+solid: {
+"--border-width": "sizes.25";
+"--border-color": "colors.neutral.7";
+backgroundColor: "primary.1";
+_hover: {
+backgroundColor: "primary.2";
+};
+};
+ghost: {
+_hover: {
+backgroundColor: "primary.2";
+};
+};
+};
+}>;
+
+declare interface TextInputRecipeProps extends RecipeVariantProps<typeof textInputRecipe>, UnstyledProp {
+}
+
+declare type TextInputRootSlotProps = HTMLChakraProps<"input", TextInputRecipeProps>;
+
+export { }