@commercetools/nimbus 0.0.9-rc5 → 0.0.9-rc7

package/dist/kbd.d.ts

@@ -0,0 +1,10 @@
+import { ForwardRefExoticComponent } from 'react';
+import { KbdProps } from '@chakra-ui/react';
+import { RefAttributes } from 'react';
+
+/**
+ * @experimental This component is experimental and may change or be removed in future versions.
+ */
+export declare const Kbd: ForwardRefExoticComponent<KbdProps & RefAttributes<HTMLElement>>;
+
+export { }

package/dist/link.d.ts

@@ -0,0 +1,92 @@
+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
+ *
+ * Features:
+ *
+ * - allows forwarding refs to the underlying DOM element
+ * - accepts all native html 'HTMLAnchorElement' attributes (including aria- & data-attributes)
+ * - supports 'variants', 'sizes', etc. configured in the recipe
+ * - allows overriding styles by using style-props
+ * - supports 'asChild' and 'as' to modify the underlying html-element (polymorphic)
+ */
+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,21 @@
+import { ForwardRefExoticComponent } from 'react';
+import { List as List_2 } from '@chakra-ui/react';
+import { ListIndicatorProps } from '@chakra-ui/react';
+import { RefAttributes } from 'react';
+
+/**
+ * @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,88 @@
+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
+ */
+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,76 @@
+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';
+
+/**
+ * MultilineTextInput
+ * ============================================================
+ * A textarea component that takes in multiline text as input
+ *
+ * Features:
+ *
+ * - allows forwarding refs to the underlying DOM element
+ * - accepts all native html 'HTMLTextAreaElement' attributes (including aria- & data-attributes)
+ * - supports 'variants', 'sizes', etc. configured in the recipe
+ * - allows overriding styles by using style-props
+ * - supports auto-growing height based on content when `autoGrow` is enabled
+ */
+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,23 @@
+import { Dispatch } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { SetStateAction } from 'react';
+import { ThemeProviderProps } from 'next-themes';
+
+declare interface ColorModeProviderProps extends ThemeProviderProps {
+}
+
+export declare function NimbusProvider({ children, locale, ...props }: ColorModeProviderProps & {
+    locale?: string;
+}): JSX.Element;
+
+export declare function useColorMode(): {
+    colorMode: string | undefined;
+    setColorMode: Dispatch<SetStateAction<string>>;
+    toggleColorMode: () => void;
+};
+
+export declare function useColorModeValue<T>(light: T, dark: T): T;
+
+export declare function useColorScheme(): string;
+
+export { }

package/dist/number-input.d.ts

@@ -0,0 +1,143 @@
+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
+ * ============================================================
+ * An input component that accepts only numbers with increment/decrement buttons
+ *
+ * Features:
+ *
+ * - supports ref forwarding to the underlying DOM element
+ * - supports number-specific props like min, max, step
+ * - includes increment/decrement buttons for easy number adjustment
+ * - supports 'variants', 'sizes', etc. configured in the recipe
+ * - allows overriding styles by using style-props
+ * - provides full accessibility support
+ */
+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,74 @@
+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
+ * ============================================================
+ * An input component that takes in password as input with toggleable visibility
+ *
+ * Features:
+ *
+ * - Based on TextInput with added password visibility toggle
+ * - Allows toggling between type="password" and type="text"
+ * - Positions the toggle button at the right edge of the input
+ * - Inherits all TextInput features and props
+ */
+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 { }

package/dist/radio-input.d.ts

@@ -0,0 +1,70 @@
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+import { RadioGroupProps as RadioGroupProps_2 } from 'react-aria-components';
+import { RadioInputOptionProps as RadioInputOptionProps_2 } from './radio-input.types';
+import { RadioInputRootProps as RadioInputRootProps_2 } from './radio-input.types';
+import { RadioProps } from 'react-aria-components';
+import { RecipeProps } from '@chakra-ui/react';
+import { RecipeVariantProps } from '@chakra-ui/react';
+import { SlotRecipeDefinition } from '@chakra-ui/react';
+
+declare type RadioGroupProps = Omit<RadioGroupProps_2, "children"> & {
+    children?: React.ReactNode;
+};
+
+export declare const RadioInput: {
+    Root: {
+        (props: RadioInputRootProps_2): JSX.Element;
+        displayName: string;
+    };
+    Option: {
+        ({ children, value, ...rest }: RadioInputOptionProps_2): JSX.Element;
+        displayName: string;
+    };
+};
+
+export declare const _RadioInputOption: {
+    ({ children, value, ...rest }: RadioInputOptionProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface RadioInputOptionProps extends RadioProps, Omit<RadioInputOptionSlotProps, keyof RadioProps> {
+}
+
+export declare interface RadioInputOptionSlotProps extends HTMLChakraProps<"span", RecipeProps<"option">> {
+}
+
+export declare const _RadioInputRoot: {
+    (props: RadioInputRootProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface RadioInputRootProps extends RadioGroupProps, Omit<RadioInputRootSlotProps, keyof RadioGroupProps> {
+}
+
+export declare interface RadioInputRootSlotProps extends HTMLChakraProps<"div", RecipeVariantProps<typeof radioInputSlotRecipe>> {
+}
+
+/**
+ * Recipe configuration for the RadioInput component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+declare const radioInputSlotRecipe: SlotRecipeDefinition<"option" | "root", {
+orientation: {
+horizontal: {
+root: {
+flexDirection: "row";
+gap: "600";
+};
+};
+vertical: {
+root: {
+flexDirection: "column";
+alignItems: "flex-start";
+gap: "400";
+};
+};
+};
+}>;
+
+export { }