@commercetools/nimbus 1.0.1 → 2.0.1-rc1

package/dist/field-errors.d.ts

@@ -0,0 +1,144 @@
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+/**
+ * # FieldErrors
+ *
+ * Renders error messages based on error object configuration.
+ * Provides backwards compatibility with UI-Kit FieldErrors while integrating
+ * with Nimbus design system patterns.
+ *
+ * Supports custom error renderers and localized built-in error messages
+ * for common validation scenarios like missing required fields.
+ */
+export declare const FieldErrors: {
+    ({ id, errors, isVisible, renderError, renderDefaultError, customMessages, ...props }: FieldErrorsProps): JSX.Element | null;
+    displayName: string;
+    errorTypes: {
+        readonly MISSING: "missing";
+        readonly INVALID: "invalid";
+        readonly EMPTY: "empty";
+        readonly MIN_LENGTH: "min";
+        readonly MAX_LENGTH: "max";
+        readonly FORMAT: "format";
+        readonly DUPLICATE: "duplicate";
+        readonly NEGATIVE: "negative";
+        readonly FRACTIONS: "fractions";
+        readonly BELOW_MIN: "belowMin";
+        readonly ABOVE_MAX: "aboveMax";
+        readonly OUT_OF_RANGE: "outOfRange";
+        readonly INVALID_FROM_SERVER: "invalidFromServer";
+        readonly NOT_FOUND: "notFound";
+        readonly BLOCKED: "blocked";
+    };
+    getBuiltInMessage: (key: string) => React.ReactNode;
+    getCustomMessage: (key: string, customMessages?: FieldErrorsProps["customMessages"]) => React.ReactNode;
+};
+
+export declare type FieldErrorsProps = FieldErrorsRootSlotProps & {
+    /**
+     * Unique identifier for the field errors
+     */
+    id?: string;
+    /**
+     * Object mapping error types to boolean values indicating presence
+     */
+    errors?: TFieldErrors;
+    /**
+     * Whether the error messages are visible
+     * @default false
+     */
+    isVisible?: boolean;
+    /**
+     * Custom render function for error messages
+     */
+    renderError?: TErrorRenderer;
+    /**
+     * Default render function for error messages when no custom renderer is provided
+     */
+    renderDefaultError?: TErrorRenderer;
+    /**
+     * Custom message overrides for specific error types
+     */
+    customMessages?: {
+        /** Message for missing field error */
+        missing?: ReactNode;
+        /** Message for invalid field error */
+        invalid?: ReactNode;
+        /** Message for empty field error */
+        empty?: ReactNode;
+        /** Message for minimum length error */
+        min?: ReactNode;
+        /** Message for maximum length error */
+        max?: ReactNode;
+        /** Message for format error */
+        format?: ReactNode;
+        /** Message for duplicate value error */
+        duplicate?: ReactNode;
+        /** Message for negative value error */
+        negative?: ReactNode;
+        /** Message for fractional value error */
+        fractions?: ReactNode;
+        /** Message for below minimum value error */
+        belowMin?: ReactNode;
+        /** Message for above maximum value error */
+        aboveMax?: ReactNode;
+        /** Message for out of range error */
+        outOfRange?: ReactNode;
+        /** Message for invalid from server error */
+        invalidFromServer?: ReactNode;
+        /** Message for not found error */
+        notFound?: ReactNode;
+        /** Message for blocked error */
+        blocked?: ReactNode;
+    };
+};
+
+declare type FieldErrorsRootSlotProps = HTMLChakraProps<"div"> & {
+    /**
+     * Unique identifier for the field errors container
+     */
+    id?: string;
+    /**
+     * ARIA role for the container
+     */
+    role?: string;
+    /**
+     * Error message content to display
+     */
+    children?: ReactNode;
+};
+
+export declare const FieldErrorTypes: {
+    readonly MISSING: "missing";
+    readonly INVALID: "invalid";
+    readonly EMPTY: "empty";
+    readonly MIN_LENGTH: "min";
+    readonly MAX_LENGTH: "max";
+    readonly FORMAT: "format";
+    readonly DUPLICATE: "duplicate";
+    readonly NEGATIVE: "negative";
+    readonly FRACTIONS: "fractions";
+    readonly BELOW_MIN: "belowMin";
+    readonly ABOVE_MAX: "aboveMax";
+    readonly OUT_OF_RANGE: "outOfRange";
+    readonly INVALID_FROM_SERVER: "invalidFromServer";
+    readonly NOT_FOUND: "notFound";
+    readonly BLOCKED: "blocked";
+};
+
+export declare type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
+
+export declare type TFieldErrors = Record<string, boolean>;
+
+export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/form-field.d.ts

@@ -1,36 +1,32 @@
-import { FormFieldDescriptionSlotProps } from './form-field.slots';
-import { FormFieldErrorSlotProps } from './form-field.slots';
-import { FormFieldInputSlotProps } from './form-field.slots';
-import { FormFieldLabelSlotProps } from './form-field.slots';
+import { FormFieldDescriptionSlotProps as FormFieldDescriptionSlotProps_2 } from './form-field.types';
+import { FormFieldErrorSlotProps as FormFieldErrorSlotProps_2 } from './form-field.types';
+import { FormFieldInputSlotProps as FormFieldInputSlotProps_2 } from './form-field.types';
+import { FormFieldLabelSlotProps as FormFieldLabelSlotProps_2 } from './form-field.types';
 import { FormFieldProps as FormFieldProps_2 } from './form-field.types';
-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 { ReactNode } from 'react';
-import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
-import { RefAttributes } from 'react';
-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';
 
 export declare const FormField: {
-    Root: ForwardRefExoticComponent<FormFieldProps_2 & RefAttributes<HTMLDivElement>>;
-    Label: ({ children, ...labelSlotProps }: FormFieldLabelSlotProps) => null;
-    Input: ({ children, ...inputSlotProps }: FormFieldInputSlotProps) => null;
-    Description: ({ children, ...descriptionSlotProps }: FormFieldDescriptionSlotProps) => null;
-    Error: ({ children, ...errorSlotProps }: FormFieldErrorSlotProps) => null;
+    Root: ({ ref: forwardedRef, id, isInvalid, isRequired, isDisabled, isReadOnly, children, ...props }: FormFieldProps_2) => JSX.Element;
+    Label: ({ children, ...labelSlotProps }: FormFieldLabelSlotProps_2) => null;
+    Input: ({ children, ...inputSlotProps }: FormFieldInputSlotProps_2) => null;
+    Description: ({ children, ...descriptionSlotProps }: FormFieldDescriptionSlotProps_2) => null;
+    Error: ({ children, ...errorSlotProps }: FormFieldErrorSlotProps_2) => null;
     InfoBox: ({ children }: {
         children: ReactNode;
     }) => null;
 };
 
-export declare const _FormFieldDescription: ({ children, ...descriptionSlotProps }: FormFieldDescriptionSlotProps_2) => null;
+export declare const _FormFieldDescription: ({ children, ...descriptionSlotProps }: FormFieldDescriptionSlotProps) => null;
 
-declare interface FormFieldDescriptionSlotProps_2 extends HTMLChakraProps<"div"> {
-}
+export declare type FormFieldDescriptionSlotProps = HTMLChakraProps<"div">;
 
-export declare const _FormFieldError: ({ children, ...errorSlotProps }: FormFieldErrorSlotProps_2) => null;
+export declare const _FormFieldError: ({ children, ...errorSlotProps }: FormFieldErrorSlotProps) => null;
 
-declare interface FormFieldErrorSlotProps_2 extends HTMLChakraProps<"div"> {
-}
+export declare type FormFieldErrorSlotProps = HTMLChakraProps<"div">;
 
 export declare const _FormFieldInfoBox: ({ children }: FormFieldInfoBoxProps) => null;
 
@@ -41,82 +37,63 @@ declare type FormFieldInfoBoxProps = {
     children: ReactNode;
 };
 
-export declare const _FormFieldInput: ({ children, ...inputSlotProps }: FormFieldInputSlotProps_2) => null;
+export declare const _FormFieldInput: ({ children, ...inputSlotProps }: FormFieldInputSlotProps) => null;
 
-declare interface FormFieldInputSlotProps_2 extends HTMLChakraProps<"div"> {
-}
+export declare type FormFieldInputSlotProps = HTMLChakraProps<"div">;
 
-export declare const _FormFieldLabel: ({ children, ...labelSlotProps }: FormFieldLabelSlotProps_2) => null;
+export declare const _FormFieldLabel: ({ children, ...labelSlotProps }: FormFieldLabelSlotProps) => null;
 
-declare interface FormFieldLabelSlotProps_2 extends HTMLChakraProps<"div"> {
-}
+export declare type FormFieldLabelSlotProps = HTMLChakraProps<"div">;
 
-/**
- * Main props interface for the FormField component.
- * Extends FormFieldVariantProps to include both root props and variant props,
- * while adding support for React children.
- */
-export declare interface FormFieldProps extends FormFieldRootSlotProps {
+export declare type FormFieldPopoverSlotProps = HTMLChakraProps<"div">;
+
+export declare type FormFieldProps = FormFieldRootSlotProps & {
+    /**
+     * Form field content (label, input, description, error)
+     */
     children?: React.ReactNode;
-    /** true if the field is a required field */
+    /**
+     * Whether the field is required for form submission
+     * @default false
+     */
     isRequired?: boolean;
-    /** true if the field is invalid */
+    /**
+     * Whether the field has a validation error
+     * @default false
+     */
     isInvalid?: boolean;
-    /** true if the field is disabled */
+    /**
+     * Whether the field is disabled
+     * @default false
+     */
     isDisabled?: boolean;
-    /** true, if the field is read only  */
+    /**
+     * Whether the field is read-only
+     * @default false
+     */
     isReadOnly?: boolean;
-}
-
-/**
- * Recipe configuration for the FormField component.
- * Defines the styling variants and base styles using Chakra UI's recipe system.
- */
-declare const formFieldRecipe: SlotRecipeDefinition<"input" | "label" | "popover" | "description" | "root" | "error", {
-size: {
-md: {
-root: {
-"--form-field-font-size": "fontSizes.350";
-"--form-field-line-height": "lineHeights.500";
-};
-};
-sm: {
-root: {
-"--form-field-font-size": "fontSizes.300";
-"--form-field-line-height": "lineHeights.450";
-};
-};
-};
-direction: {
-column: {
-root: {
-gridTemplateAreas: "\n\"label\"\n\"input\"\n\"description\"\n\"error\"\n";
-};
-input: {
-mt: "var(--grid-gap)";
-};
-description: {
-mt: "var(--grid-gap)";
-};
-error: {
-mt: "var(--grid-gap)";
-};
-};
-row: {
-root: {
-gridTemplateAreas: "\n\"label input\"\n\"label description\"\n\"label error\"\n";
-gridTemplateColumns: "auto 1fr";
-gridColumnGap: "200";
-};
-description: {
-mt: "var(--grid-gap)";
-};
-error: {
-mt: "var(--grid-gap)";
-};
+    /**
+     * Unique identifier for the input element
+     */
+    id?: string;
+    /**
+     * Ref forwarding to the root element
+     */
+    ref?: React.Ref<HTMLDivElement>;
 };
+
+declare type FormFieldRecipeProps = {
+    /**
+     * Size variant of the form field
+     * @default "md"
+     */
+    size?: SlotRecipeProps<"formField">["size"];
+    /**
+     * Layout direction for label and input positioning
+     * @default "column"
+     */
+    direction?: SlotRecipeProps<"formField">["direction"];
 };
-}>;
 
 /**
  * # FormField
@@ -125,10 +102,9 @@ mt: "var(--grid-gap)";
  *
  * @see {@link https://nimbus-documentation.vercel.app/components/inputs/formfield}
  */
-export declare const _FormFieldRoot: ForwardRefExoticComponent<FormFieldProps & RefAttributes<HTMLDivElement>>;
+export declare const _FormFieldRoot: ({ ref: forwardedRef, id, isInvalid, isRequired, isDisabled, isReadOnly, children, ...props }: FormFieldProps) => JSX.Element;
 
-declare interface FormFieldRootSlotProps extends HTMLChakraProps<"div", RecipeVariantProps<typeof formFieldRecipe> & UnstyledProp> {
-}
+export declare type FormFieldRootSlotProps = HTMLChakraProps<"div", FormFieldRecipeProps & UnstyledProp>;
 
 export { }
 

package/dist/grid.d.ts

@@ -18,10 +18,10 @@ export declare const Grid: {
  *
  * @see {@link https://nimbus-documentation.vercel.app/components/layout/grid}
  */
-export declare interface GridProps extends GridProps_2 {
+export declare type GridProps = GridProps_2 & {
     children?: React.ReactNode;
     ref?: React.Ref<HTMLDivElement>;
-}
+};
 
 export { }
 

package/dist/group.d.ts

@@ -10,27 +10,21 @@ declare type DefaultExcludedProps = "css" | "asChild" | "as" | "colorScheme";
 
 export declare const Group: GroupComponent;
 
-/** Type signature for the main `Group` component. */
+/**
+ * Type signature for the main Group component.
+ */
 export declare type GroupComponent = FC<GroupProps>;
 
-export declare interface GroupProps extends Omit<GroupSlotProps, DefaultExcludedProps>, Pick<GroupProps_2, "isDisabled" | "isInvalid" | "onHoverChange" | "onHoverStart" | "onHoverEnd"> {
+export declare interface GroupProps extends Omit<GroupRootSlotProps, DefaultExcludedProps>, Pick<GroupProps_2, "isDisabled" | "isInvalid" | "onHoverChange" | "onHoverStart" | "onHoverEnd"> {
+    /**
+     * Ref forwarding to the root element
+     */
     ref?: Ref<typeof Group_2>;
 }
 
-/**
- * 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 {
-}
+declare type GroupRecipeProps = RecipeProps<"group"> & 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 interface GroupSlotProps extends HTMLChakraProps<"div", GroupRecipeProps> {
-}
+export declare type GroupRootSlotProps = HTMLChakraProps<"div", GroupRecipeProps>;
 
 export { }
 

package/dist/heading.d.ts

@@ -1,6 +1,47 @@
-import { Heading } from '@chakra-ui/react/heading';
+import { HeadingProps as HeadingProps_2 } from '@chakra-ui/react/heading';
+import { JSX } from 'react/jsx-runtime';
 
-export { Heading }
+/**
+ * # Heading
+ *
+ * renders a heading
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/typography/heading}
+ */
+export declare const Heading: {
+    ({ ref: forwardedRef, ...props }: HeadingProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Props for the Heading component.
+ *
+ * @property {React.Ref<HTMLHeadingElement>} [ref] - Ref to the underlying heading element.
+ * @property {string | null | undefined} [slot] - Slot attribute for custom element slotting.
+ */
+export declare type HeadingProps = HeadingRecipeVariantProps & Omit<HeadingProps_2, "slot"> & {
+    /**
+     * Ref to the underlying heading element.
+     */
+    ref?: React.Ref<HTMLHeadingElement>;
+    /**
+     * Slot attribute for custom element slotting.
+     */
+    slot?: string | null | undefined;
+    /**
+     * Size variant
+     * @default "xl"
+     */
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
+};
+
+declare type HeadingRecipeVariantProps = {
+    /**
+     * Size variant
+     * @default "xl"
+     */
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl";
+};
 
 export { }
 

package/dist/hooks.d.ts

@@ -1,53 +1,14 @@
-import { Editor } from 'slate';
-import { Key } from 'react-aria';
-import { TextStyleDefinition } from '../constants';
-
-export declare const useFormattingState: ({ withPreservedSelection, }: UseFormattingStateProps) => {
-    selectedKeys: Set<string>;
-    selectedScriptKeys: Set<string>;
-    allSelectedKeys: Set<string>;
-    handleAllSelectionChange: (keys: "all" | Set<Key>) => void;
-};
-
-export declare interface UseFormattingStateProps {
-    withPreservedSelection: (fn: () => void) => () => void;
-}
-
-export declare const useKeyboardShortcuts: ({ editor }: UseKeyboardShortcutsProps) => {
-    handleKeyDown: (event: React.KeyboardEvent) => void;
-};
-
-export declare interface UseKeyboardShortcutsProps {
-    editor: Editor;
-}
-
 /**
- * Hook that provides a helper function to preserve selection when toolbar actions are executed.
- * This prevents losing text selection when interacting with toolbar buttons and menus.
- *
- * TODO: This works for toggle buttons, but not for menus.
- *
- * @param editor - The Slate editor instance
- * @returns A function that wraps actions to preserve selection and focus
+ * Hook for processing and sanitizing SVG data
+ * @param data - Raw SVG markup as a string
+ * @returns Processed SVG attributes, content, and sanitization status
  */
-export declare const usePreservedSelection: (editor: Editor) => (action: () => void) => () => void;
-
-export declare const useToolbarState: ({ withPreservedSelection, }: UseToolbarStateProps) => {
-    currentTextStyle: string;
-    selectedTextStyle: TextStyleDefinition | undefined;
-    selectedTextStyleLabel: string;
-    handleTextStyleChange: (styleId: string) => void;
-    handleListToggle: (selectedKeys: Set<Key>) => void;
-    selectedFormatKeys: Set<string>;
-    selectedListKeys: Set<string>;
-    hasUndos: boolean;
-    hasRedos: boolean;
+export declare function useInlineSvg(data: string): {
+    isValid: boolean;
+    svgAttributes: Record<string, string>;
+    innerSvgContent: string;
 };
 
-export declare interface UseToolbarStateProps {
-    withPreservedSelection: (fn: () => void) => () => void;
-}
-
 export { }
 
 

package/dist/icon-button.d.ts

@@ -1,33 +1,43 @@
 import { AriaButtonProps } 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 { UnstyledProp } from '@chakra-ui/react/styled-system';
+import { RecipeProps } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react';
 
-declare interface ButtonProps extends FunctionalButtonProps {
+declare type ButtonProps = Omit<ButtonRootSlotProps, keyof AriaButtonProps> & AriaButtonProps & {
+    /**
+     * Data attributes for testing or custom metadata
+     */
+    [key: `data-${string}`]: unknown;
+    /**
+     * Slot name for React Aria Components composition
+     */
     slot?: string | null | undefined;
+    /**
+     * Ref forwarding to the button element
+     */
     ref?: React.Ref<HTMLButtonElement>;
-}
+};
 
-/**
- * Base recipe props interface that combines Chakra UI's recipe props
- * with the unstyled prop option for the button element.
- */
-declare interface ButtonRecipeProps extends RecipeProps<"button">, UnstyledProp {
-}
+declare type ButtonRecipeProps = {
+    /**
+     * Size variant of the button
+     * @default "md"
+     */
+    size?: RecipeProps<"button">["size"];
+    /**
+     * Visual style variant of the button
+     * @default "subtle"
+     */
+    variant?: RecipeProps<"button">["variant"];
+    /**
+     * Color tone palette for the button
+     */
+    tone?: RecipeProps<"button">["tone"];
+} & 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 interface ButtonRootProps extends Omit<HTMLChakraProps<"button", ButtonRecipeProps>, "slot"> {
+declare type ButtonRootSlotProps = Omit<HTMLChakraProps<"button", ButtonRecipeProps>, "slot"> & {
     slot?: string | null | undefined;
-}
-
-/** combine chakra-button props with aria-button props */
-declare type FunctionalButtonProps = AriaButtonProps & Omit<ButtonRootProps, keyof AriaButtonProps | "slot"> & {
-    [key: `data-${string}`]: unknown;
 };
 
 /**
@@ -42,14 +52,16 @@ export declare const IconButton: {
     displayName: string;
 };
 
-/**
- * Main props interface for the IconButton component.
- */
-export declare interface IconButtonProps extends ButtonProps {
-    /** explains the intended action, required for accessibility */
+export declare type IconButtonProps = ButtonProps & {
+    /**
+     * Required accessible label explaining the intended action
+     */
     "aria-label": string;
+    /**
+     * Ref forwarding to the button element
+     */
     ref?: React.Ref<HTMLButtonElement>;
-}
+};
 
 export { }