@commercetools/nimbus 1.0.1 → 2.0.1-rc1

package/dist/progress-bar.d.ts

@@ -1,15 +1,9 @@
 import { AriaProgressBarProps } from 'react-aria';
-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 { UnstyledProp } from '@chakra-ui/react/styled-system';
+import { SlotRecipeProps } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react';
 
-/**
- * Additional properties we want to exclude from the ProgressBar component.
- * These are chakra-ui props we don't want exposed.
- */
 declare type ExcludedProps = "css" | "unstyled" | "as" | "asChild";
 
 /**
@@ -34,138 +28,61 @@ export declare const ProgressBar: {
     displayName: string;
 };
 
-/**
- * Main props interface for the ProgressBar component.
- * Extends ProgressBarRootProps to include root props, variant props, and aria props,
- * while adding custom props for label display and formatting.
- */
-export declare interface ProgressBarProps extends Omit<ProgressBarRootProps, ExcludedProps> {
+export declare type ProgressBarFillSlotProps = HTMLChakraProps<"div">;
+
+export declare type ProgressBarLabelSlotProps = HTMLChakraProps<"span">;
+
+export declare type ProgressBarProps = Omit<ProgressBarRootSlotProps, ExcludedProps> & {
     /**
      * Ref forwarding to the root element
      */
     ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Format options for the progress bar value display
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     * @default { style: "percent" }
+     */
+    formatOptions?: ProgressBarRootSlotProps["formatOptions"];
+};
+
+declare type ProgressBarRecipeProps = {
+    /**
+     * Size variant of the progress bar
+     * @default "md"
+     */
+    size?: SlotRecipeProps<"progressBar">["size"];
     /**
      * Whether the progress bar represents an active, ongoing process.
      * Set to `true` for dynamic progress (e.g., file uploads, downloads).
      * Set to `false` for static progress indicators (e.g., step 3 of 5 in a wizard).
      * @default true
      */
-    isDynamic?: boolean;
+    isDynamic?: SlotRecipeProps<"progressBar">["isDynamic"];
     /**
-     * Format options for the progress bar.
-     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
-     * @default { style: "percent" }
+     * Whether the progress is indeterminate (unknown duration)
+     * @default false
      */
-    formatOptions?: ProgressBarRootProps["formatOptions"];
-}
-
-/**
- * Base recipe props interface that combines Chakra UI's recipe props
- * with the unstyled prop option for the div element.
- */
-declare interface ProgressBarRecipeProps extends RecipeProps<"div">, UnstyledProp {
-}
+    isIndeterminate?: SlotRecipeProps<"progressBar">["isIndeterminate"];
+    /**
+     * Visual style variant of the progress bar
+     * @default "solid"
+     */
+    variant?: SlotRecipeProps<"progressBar">["variant"];
+    /**
+     * Layout configuration for label and value positioning
+     * @default "stacked"
+     */
+    layout?: SlotRecipeProps<"progressBar">["layout"];
+} & UnstyledProp;
 
-/**
- * Root props interface that extends Chakra's HTML props with our recipe props,
- * aria props, and data attributes.
- */
-declare interface ProgressBarRootProps extends Omit<HTMLChakraProps<"div", ProgressBarRecipeProps>, "translate">, Omit<RecipeVariantProps<typeof progressBarSlotRecipe>, "isIndeterminate">, AriaProgressBarProps {
+export declare type ProgressBarRootSlotProps = Omit<HTMLChakraProps<"div", ProgressBarRecipeProps>, "translate"> & Omit<ProgressBarRecipeProps, "isIndeterminate"> & AriaProgressBarProps & {
     [key: `data-${string}`]: string;
     translate?: "yes" | "no";
-}
-
-/**
- * Recipe configuration for the ProgressBar component.
- * Defines the styling variants and base styles using Chakra UI's slot recipe system.
- */
-declare const progressBarSlotRecipe: SlotRecipeDefinition<"fill" | "label" | "track" | "value" | "root", {
-size: {
-"2xs": {
-root: {
-"--progress-bar-radius": "{radii.300}";
-"--progress-bar-font-size": "{fontSizes.350}";
-"--progress-bar-height": "{sizes.300}";
-"--progress-bar-line-height": "{fontSizes.500}";
-};
 };
-md: {
-root: {
-"--progress-bar-radius": "{radii.600}";
-"--progress-bar-font-size": "{fontSizes.400}";
-"--progress-bar-height": "{sizes.600}";
-"--progress-bar-line-height": "{fontSizes.600}";
-};
-};
-};
-isDynamic: {
-true: {
-fill: {
-"--progress-bar-animation": "gradient-shimmer 4s ease-in-out infinite";
-"&[data-complete='true']": {
-"--progress-bar-animation": "none";
-};
-};
-};
-};
-isIndeterminate: {
-true: {
-fill: {
-"--progress-bar-animation": "progress-indeterminate 2s ease-in-out infinite";
-width: "40% !important";
-};
-};
-};
-variant: {
-solid: {
-root: {
-"--progress-bar-text-color": "{colors.neutral.12}";
-"--progress-bar-track-bg": "{colors.neutralAlpha.3}";
-};
-};
-contrast: {
-root: {
-"--progress-bar-text-color": "{colors.colorPalette.contrast}";
-"--progress-bar-track-bg": "{colors.colorPalette.contrast/15}";
-};
-fill: {
-bgImage: "linear-gradient(90deg, {colors.colorPalette.contrast/25}, {colors.colorPalette.contrast}, {colors.colorPalette.contrast/25})";
-};
-};
-};
-layout: {
-minimal: {
-label: {
-display: "none";
-};
-value: {
-display: "none";
-};
-};
-inline: {
-root: {
-flexDirection: "row";
-alignItems: "center";
-gap: "400";
-};
-track: {
-flex: number;
-};
-};
-stacked: {
-root: {
-flexDirection: "column";
-gap: "200";
-};
-text: {
-display: "flex";
-justifyContent: "space-between";
-alignItems: "center";
-width: "100%";
-};
-};
-};
-}>;
+
+export declare type ProgressBarTrackSlotProps = HTMLChakraProps<"div">;
+
+export declare type ProgressBarValueSlotProps = HTMLChakraProps<"span">;
 
 export { }
 

package/dist/radio-input.d.ts

@@ -1,14 +1,13 @@
-import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { HTMLChakraProps } from '@chakra-ui/react';
 import { JSX } from 'react/jsx-runtime';
-import { RadioGroupProps as RadioGroupProps_2 } from 'react-aria-components';
+import { RadioGroupProps } 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/styled-system';
-import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
-import { SlotRecipeDefinition } from '@chakra-ui/react';
+import { RecipeProps } from '@chakra-ui/react';
 
-declare type RadioGroupProps = Omit<RadioGroupProps_2, "children"> & {
+declare type RadioGroupPropsSubset = Omit<RadioGroupProps, "children" | "orientation"> & {
+    /** Radio options to display */
     children?: React.ReactNode;
 };
 
@@ -28,11 +27,17 @@ export declare const _RadioInputOption: {
     displayName: string;
 };
 
-export declare interface RadioInputOptionProps extends RadioProps, Omit<RadioInputOptionSlotProps, keyof RadioProps> {
-}
+export declare type RadioInputOptionProps = RadioProps & Omit<RadioInputOptionSlotProps, keyof RadioProps>;
 
-export declare interface RadioInputOptionSlotProps extends HTMLChakraProps<"span", RecipeProps<"option">> {
-}
+export declare type RadioInputOptionSlotProps = HTMLChakraProps<"span", RecipeProps<"option">>;
+
+declare type RadioInputRecipeProps = {
+    /**
+     * Layout orientation for radio options
+     * @default "vertical"
+     */
+    orientation?: RecipeProps<"radioInput">["orientation"];
+};
 
 /**
  * # RadioInput
@@ -46,33 +51,9 @@ export declare const _RadioInputRoot: {
     displayName: string;
 };
 
-export declare interface RadioInputRootProps extends RadioGroupProps, Omit<RadioInputRootSlotProps, keyof RadioGroupProps> {
-}
-
-export declare interface RadioInputRootSlotProps extends HTMLChakraProps<"div", RecipeVariantProps<typeof radioInputSlotRecipe>> {
-}
+export declare type RadioInputRootProps = Omit<RadioInputRootSlotProps, keyof RadioGroupPropsSubset> & RadioGroupPropsSubset;
 
-/**
- * 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 declare type RadioInputRootSlotProps = HTMLChakraProps<"div", RadioInputRecipeProps>;
 
 export { }
 

package/dist/range-calendar.d.ts

@@ -1,30 +1,35 @@
 import { DateValue } from '@internationalized/date';
-import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { HTMLChakraProps } from '@chakra-ui/react';
 import { JSX } from 'react/jsx-runtime';
 import { RangeCalendarProps as RangeCalendarProps_2 } from 'react-aria-components';
-import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
-import { SlotRecipeDefinition } from '@chakra-ui/react';
-import { SlotRecipeVariantRecord } from '@chakra-ui/react';
-
-/**
- * Additional properties we want to exclude from the RangeCalendar component.
- * These are either deprecated or not intended for use in this component.
- */
+import { SlotRecipeProps } from '@chakra-ui/react';
+
 declare type ExcludedProps = "as" | "style" | "createCalendar";
 
 export declare const RangeCalendar: (props: RangeCalendarProps<DateValue>) => JSX.Element;
 
-export declare interface RangeCalendarProps<T extends DateValue> extends Omit<RangeCalendarRootSlotProps, keyof RangeCalendarProps_2<DateValue> | ExcludedProps>, Omit<RangeCalendarProps_2<T>, ExcludedProps>, RecipeVariantProps<typeof rangeCalendarSlotRecipe> {
-}
+export declare type RangeCalendarCellSlotProps = HTMLChakraProps<"td">;
+
+export declare type RangeCalendarGridBodySlotProps = HTMLChakraProps<"tbody">;
+
+export declare type RangeCalendarGridHeaderSlotProps = HTMLChakraProps<"thead">;
+
+export declare type RangeCalendarGridSlotProps = HTMLChakraProps<"table">;
+
+export declare type RangeCalendarGridsSlotProps = HTMLChakraProps<"div">;
+
+export declare type RangeCalendarHeaderCellSlotProps = HTMLChakraProps<"th">;
+
+export declare type RangeCalendarHeaderSlotProps = HTMLChakraProps<"div">;
+
+export declare type RangeCalendarMonthTitleSlotProps = HTMLChakraProps<"div">;
+
+export declare type RangeCalendarProps<T extends DateValue> = Omit<RangeCalendarRootSlotProps, keyof RangeCalendarProps_2<DateValue> | ExcludedProps> & Omit<RangeCalendarProps_2<T>, ExcludedProps> & SlotRecipeProps<"rangeCalendar">;
 
-declare interface RangeCalendarRootSlotProps extends HTMLChakraProps<"div", RecipeVariantProps<typeof rangeCalendarSlotRecipe> & RangeCalendarProps_2<DateValue>> {
-}
+declare type RangeCalendarRecipeProps = SlotRecipeProps<"rangeCalendar">;
 
-declare const rangeCalendarSlotRecipe: SlotRecipeDefinition<"grid" | "header" | "root" | "grids" | "monthTitle" | "gridHeader" | "headerCell" | "gridBody" | "bodyCell", SlotRecipeVariantRecord<"grid" | "header" | "root" | "grids" | "monthTitle" | "gridHeader" | "headerCell" | "gridBody" | "bodyCell">>;
+export declare type RangeCalendarRootSlotProps = HTMLChakraProps<"div", RangeCalendarRecipeProps & RangeCalendarProps_2<DateValue>>;
 
-/**
- * Range value type for date ranges
- */
 export declare type RangeValue<T> = {
     start: T;
     end: T;

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

@@ -1,9 +1,8 @@
 import { FocusEventHandler } from 'react';
 import { HTMLChakraProps } from '@chakra-ui/react';
 import { JSX } from 'react/jsx-runtime';
-import { RecipeVariantProps } from '@chakra-ui/react';
 import { Ref } from 'react';
-import { SlotRecipeDefinition } from '@chakra-ui/react';
+import { SlotRecipeProps } from '@chakra-ui/react';
 import { UnstyledProp } from '@chakra-ui/react';
 
 declare type DefaultExcludedProps = "css" | "asChild" | "as" | "onChange";
@@ -16,7 +15,9 @@ export declare const RichTextInput: {
     displayName: string;
 };
 
-export declare interface RichTextInputProps extends Omit<RichTextInputRootSlotProps, DefaultExcludedProps | "children"> {
+export declare type RichTextInputEditableSlotProps = HTMLChakraProps<"div">;
+
+export declare type RichTextInputProps = Omit<RichTextInputRootSlotProps, DefaultExcludedProps | "children"> & {
     /**
      * The ref for the rich text input component
      */
@@ -61,11 +62,13 @@ export declare interface RichTextInputProps extends Omit<RichTextInputRootSlotPr
      * Whether to focus the input when it mounts
      */
     autoFocus?: boolean;
-}
+};
+
+declare type RichTextInputRecipeProps = SlotRecipeProps<"richTextInput">;
 
-declare const richTextInputRecipe: SlotRecipeDefinition<"toolbar" | "root" | "editable", {}>;
+export declare type RichTextInputRootSlotProps = HTMLChakraProps<"div", RichTextInputRecipeProps & UnstyledProp>;
 
-declare type RichTextInputRootSlotProps = HTMLChakraProps<"div", RecipeVariantProps<typeof richTextInputRecipe> & UnstyledProp>;
+export declare type RichTextInputToolbarSlotProps = HTMLChakraProps<"div">;
 
 export { }
 

package/dist/scoped-search-input.d.ts

@@ -0,0 +1,94 @@
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+import { ScopedSearchInputValue as ScopedSearchInputValue_2 } from './scoped-search-input.types';
+import { SlotRecipeProps } from '@chakra-ui/react';
+
+export declare const ScopedSearchInput: {
+    (props: ScopedSearchInputProps): JSX.Element;
+    isEmpty: (value: ScopedSearchInputValue_2) => boolean;
+    displayName: string;
+};
+
+export declare type ScopedSearchInputOption = {
+    /** Display label for the option */
+    label: string;
+    /** Unique value for the option */
+    value: string;
+    /** Whether the option is disabled */
+    isDisabled?: boolean;
+};
+
+export declare type ScopedSearchInputOptionGroup = {
+    /** Group label */
+    label: string;
+    /** Options within the group */
+    options: ScopedSearchInputOption[];
+};
+
+export declare type ScopedSearchInputProps = Omit<ScopedSearchInputRootSlotProps, "value" | "onSubmit" | "as" | "asChild"> & {
+    /** Current value (text + selected option) */
+    value: ScopedSearchInputValue;
+    /** Callback when complete value changes */
+    onValueChange?: (value: ScopedSearchInputValue) => void;
+    /** Callback when only search text changes */
+    onTextChange?: (text: string) => void;
+    /** Callback when only option changes */
+    onOptionChange?: (option: string) => void;
+    /** Callback when search is submitted */
+    onSubmit: (value: ScopedSearchInputValue) => void;
+    /** Callback when search is reset/cleared */
+    onReset?: () => void;
+    /** Available scope options or option groups */
+    options: ScopedSearchInputOption[] | ScopedSearchInputOptionGroup[];
+    /** Placeholder for scope selector */
+    selectPlaceholder?: string;
+    /** Placeholder for search input */
+    searchPlaceholder?: string;
+    /** Aria label for scope selector */
+    selectAriaLabel?: string;
+    /** Aria label for search input */
+    searchAriaLabel?: string;
+    /** Whether to show clear button */
+    isClearable?: boolean;
+    /** Whether the input is disabled */
+    isDisabled?: boolean;
+    /** Whether the input is read-only */
+    isReadOnly?: boolean;
+    /** Whether the input has validation errors */
+    isInvalid?: boolean;
+    /** Whether the input is required */
+    isRequired?: boolean;
+    /** Unique identifier */
+    id?: string;
+    /** ID of element describing the input */
+    "aria-describedby"?: string;
+    /** ID of element labeling the input */
+    "aria-labelledby"?: string;
+};
+
+declare type ScopedSearchInputRecipeProps = {
+    /**
+     * Size variant of the scoped search input
+     */
+    size?: SlotRecipeProps<"scopedSearchInput">["size"];
+};
+
+declare type ScopedSearchInputRootSlotProps = HTMLChakraProps<"div", ScopedSearchInputRecipeProps>;
+
+export declare type ScopedSearchInputValue = {
+    /** Search text entered by user */
+    text: string;
+    /** Selected scope/category option */
+    option: string;
+};
+
+export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/search-input.d.ts

@@ -0,0 +1,56 @@
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+import { SearchFieldProps } from 'react-aria-components';
+import { SlotRecipeProps } from '@chakra-ui/react';
+
+/**
+ * # SearchInput
+ *
+ * A search input component that allows users to enter search queries with built-in
+ * clear functionality. Built on React Aria's SearchField for accessibility.
+ */
+export declare const SearchInput: {
+    (props: SearchInputProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type SearchInputInputSlotProps = HTMLChakraProps<"input">;
+
+export declare type SearchInputLeadingElementSlotProps = HTMLChakraProps<"div">;
+
+export declare type SearchInputProps = Omit<SearchInputRootSlotProps, keyof SearchFieldProps | "as" | "asChild"> & Omit<SearchFieldProps, "ref"> & {
+    /**
+     * Ref forwarding to the input element
+     */
+    ref?: React.Ref<HTMLInputElement>;
+    /**
+     * Placeholder text for the search input
+     */
+    placeholder?: string;
+};
+
+declare type SearchInputRecipeProps = {
+    /**
+     * Size variant of the search input
+     * @default "md"
+     */
+    size?: SlotRecipeProps<"searchInput">["size"];
+    /**
+     * Visual style variant of the search input
+     * @default "solid"
+     */
+    variant?: SlotRecipeProps<"searchInput">["variant"];
+};
+
+export declare type SearchInputRootSlotProps = HTMLChakraProps<"div", SearchInputRecipeProps>;
+
+export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}