@commercetools/nimbus 0.0.9-rc6 → 0.0.9-rc7

package/dist/date-input.d.ts

@@ -0,0 +1,94 @@
+import { DateFieldProps } from 'react-aria-components';
+import { DateValue } from 'react-aria';
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+import { RecipeProps } from '@chakra-ui/react';
+import { RecipeVariantProps } from '@chakra-ui/react';
+import { SlotRecipeDefinition } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react';
+
+/**
+ * DateInput
+ * ============================================================
+ * allows entering a date in the currently selected locale
+ */
+export declare const DateInput: {
+    (props: DateInputProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Main props interface for the DateInput component.
+ *
+ * We use the same pattern as TextInput to avoid type conflicts:
+ * 1. Start with DateFieldProps as the base
+ * 2. Merge with DateInputRootProps, excluding conflicting keys
+ * 3. Add recipe variant props
+ */
+export declare interface DateInputProps extends DateFieldProps<DateValue>, Omit<DateInputRootProps, keyof DateFieldProps<DateValue> | ExcludedProps>, RecipeVariantProps<typeof dateInputSlotRecipe> {
+}
+
+/**
+ * Base recipe props interface that combines Chakra UI's recipe props
+ * with the unstyled prop option for the div element.
+ */
+declare interface DateInputRecipeProps 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 interface DateInputRootProps extends HTMLChakraProps<"div", DateInputRecipeProps> {
+}
+
+/**
+ * Recipe configuration for the DateInput component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+declare const dateInputSlotRecipe: SlotRecipeDefinition<"root" | "segmentGroup" | "segment", {
+size: {
+sm: {
+segmentGroup: {
+h: number;
+textStyle: "sm";
+px: number;
+};
+};
+md: {
+segmentGroup: {
+h: number;
+textStyle: "md";
+px: number;
+};
+};
+};
+variant: {
+solid: {
+segmentGroup: {
+"--border-width": "sizes.25";
+"--border-color": "colors.neutral.7";
+backgroundColor: "neutral.1";
+_hover: {
+backgroundColor: "primary.2";
+};
+};
+};
+ghost: {
+segmentGroup: {
+_hover: {
+backgroundColor: "primary.2";
+};
+};
+};
+};
+}>;
+
+/**
+ * Additional properties we want to exclude from the DateInput component.
+ * These are either deprecated or not intended for use in this component.
+ */
+declare type ExcludedProps = "validationState" | "label" | "description" | "errorMessage" | "css" | "colorScheme" | "unstyled" | "recipe" | "as" | "asChild";
+
+export { }

package/dist/date-picker.d.ts

@@ -0,0 +1,164 @@
+import { DateFieldProps } from 'react-aria-components';
+import { DatePickerStateOptions } from 'react-stately';
+import { DateValue } from 'react-aria';
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+import { RecipeProps } from '@chakra-ui/react';
+import { RecipeVariantProps } from '@chakra-ui/react';
+import { SlotRecipeDefinition } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react';
+
+/**
+ * Properties from DatePickerStateOptions that would conflict with similarly named
+ * properties in DateInputProps. We use this to prevent TypeScript interface
+ * merging conflicts by prioritizing the DatePickerStateOptions implementation.
+ */
+declare type ConflictingPickerStateProps = keyof DatePickerStateOptions<DateValue>;
+
+/**
+ * Main props interface for the DateInput component.
+ *
+ * We use the same pattern as TextInput to avoid type conflicts:
+ * 1. Start with DateFieldProps as the base
+ * 2. Merge with DateInputRootProps, excluding conflicting keys
+ * 3. Add recipe variant props
+ */
+declare interface DateInputProps extends DateFieldProps<DateValue>, Omit<DateInputRootProps, keyof DateFieldProps<DateValue> | ExcludedProps>, RecipeVariantProps<typeof dateInputSlotRecipe> {
+}
+
+/**
+ * Base recipe props interface that combines Chakra UI's recipe props
+ * with the unstyled prop option for the div element.
+ */
+declare interface DateInputRecipeProps 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 interface DateInputRootProps extends HTMLChakraProps<"div", DateInputRecipeProps> {
+}
+
+/**
+ * Recipe configuration for the DateInput component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+declare const dateInputSlotRecipe: SlotRecipeDefinition<"root" | "segmentGroup" | "segment", {
+size: {
+sm: {
+segmentGroup: {
+h: number;
+textStyle: "sm";
+px: number;
+};
+};
+md: {
+segmentGroup: {
+h: number;
+textStyle: "md";
+px: number;
+};
+};
+};
+variant: {
+solid: {
+segmentGroup: {
+"--border-width": "sizes.25";
+"--border-color": "colors.neutral.7";
+backgroundColor: "neutral.1";
+_hover: {
+backgroundColor: "primary.2";
+};
+};
+};
+ghost: {
+segmentGroup: {
+_hover: {
+backgroundColor: "primary.2";
+};
+};
+};
+};
+}>;
+
+/**
+ * DatePicker
+ * ============================================================
+ * Combines a DateInput with a Calendar popover for date selection.
+ * Users can either type a date directly or select from the calendar.
+ */
+export declare const DatePicker: {
+    (props: DatePickerProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Main props interface for the DatePicker component.
+ *
+ * We use Omit to remove:
+ * 1. Conflicting props from DateInputProps to avoid TypeScript errors
+ * 2. Explicitly excluded props that we don't want users to access
+ */
+export declare interface DatePickerProps extends Omit<DateInputProps, ConflictingPickerStateProps | ExcludedProps_2>, Omit<DatePickerStateOptions<DateValue>, ExcludedProps_2>, RecipeVariantProps<typeof datePickerSlotRecipe> {
+    /**
+     * Whether the calendar popover should be open by default (uncontrolled).
+     */
+    defaultOpen?: boolean;
+    /**
+     * Whether the calendar popover is open (controlled).
+     */
+    isOpen?: boolean;
+    /**
+     * Handler that is called when the calendar popover's open state changes.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+
+/**
+ * Recipe configuration for the DatePicker component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+declare const datePickerSlotRecipe: SlotRecipeDefinition<"popover" | "group" | "root" | "trigger" | "calendar" | "calendarHeader" | "calendarGrid" | "calendarCell", {
+size: {
+sm: {
+group: {
+"& .nimbus-date-input__root": {
+mr: "1400";
+};
+};
+trigger: {
+top: "50";
+};
+};
+md: {
+group: {
+"& .nimbus-date-input__root": {
+mr: "calc({spacing.1600} + {spacing.200})";
+};
+};
+trigger: {
+top: "100";
+};
+};
+};
+variant: {
+solid: {};
+ghost: {};
+};
+}>;
+
+/**
+ * Additional properties we want to exclude from the DateInput component.
+ * These are either deprecated or not intended for use in this component.
+ */
+declare type ExcludedProps = "validationState" | "label" | "description" | "errorMessage" | "css" | "colorScheme" | "unstyled" | "recipe" | "as" | "asChild";
+
+/**
+ * Additional properties we want to exclude from the DatePicker component.
+ * These are either deprecated or not intended for use in this component.
+ */
+declare type ExcludedProps_2 = "validationState" | "label" | "description" | "errorMessage" | "css" | "colorScheme" | "unstyled" | "recipe" | "as" | "asChild";
+
+export { }

package/dist/dialog.d.ts

@@ -0,0 +1,33 @@
+import { Dialog as Dialog_2 } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+
+/**
+ * @experimental This component is experimental and may change or be removed in future versions.
+ */
+export declare const Dialog: DialogComponents;
+
+declare interface DialogComponents {
+    Root: typeof Dialog_2.Root;
+    Trigger: typeof Dialog_2.Trigger;
+    Content: typeof DialogContent;
+    Backdrop: typeof Dialog_2.Backdrop;
+    Positioner: typeof Dialog_2.Positioner;
+    Title: typeof Dialog_2.Title;
+    Description: typeof Dialog_2.Description;
+    Body: typeof Dialog_2.Body;
+    Footer: typeof Dialog_2.Footer;
+    Header: typeof Dialog_2.Header;
+    CloseTrigger: typeof Dialog_2.CloseTrigger;
+    ActionTrigger: typeof Dialog_2.ActionTrigger;
+}
+
+declare const DialogContent: (props: DialogContentProps) => JSX.Element;
+
+declare interface DialogContentProps extends Dialog_2.ContentProps {
+    portalled?: boolean;
+    portalRef?: React.RefObject<HTMLElement>;
+    backdrop?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+}
+
+export { }

package/dist/flex.d.ts

@@ -0,0 +1,5 @@
+import { Flex } from '@chakra-ui/react';
+
+export { Flex }
+
+export { }

package/dist/form-field.d.ts

@@ -0,0 +1,131 @@
+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 { FormFieldProps as FormFieldProps_2 } from './form-field.types';
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+import { RecipeVariantProps } from '@chakra-ui/react';
+import { RefAttributes } from 'react';
+import { SlotRecipeDefinition } 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;
+    InfoBox: ({ children }: {
+        children: ReactNode;
+    }) => null;
+};
+
+export declare const _FormFieldDescription: ({ children, ...descriptionSlotProps }: FormFieldDescriptionSlotProps_2) => null;
+
+declare interface FormFieldDescriptionSlotProps_2 extends HTMLChakraProps<"div"> {
+}
+
+export declare const _FormFieldError: ({ children, ...errorSlotProps }: FormFieldErrorSlotProps_2) => null;
+
+declare interface FormFieldErrorSlotProps_2 extends HTMLChakraProps<"div"> {
+}
+
+export declare const _FormFieldInfoBox: ({ children }: FormFieldInfoBoxProps) => null;
+
+declare type FormFieldInfoBoxProps = {
+    /**
+     * The content to display in the InfoBox
+     */
+    children: ReactNode;
+};
+
+export declare const _FormFieldInput: ({ children, ...inputSlotProps }: FormFieldInputSlotProps_2) => null;
+
+declare interface FormFieldInputSlotProps_2 extends HTMLChakraProps<"div"> {
+}
+
+export declare const _FormFieldLabel: ({ children, ...labelSlotProps }: FormFieldLabelSlotProps_2) => null;
+
+declare interface FormFieldLabelSlotProps_2 extends 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 {
+    children?: React.ReactNode;
+    /** true if the field is a required field */
+    isRequired?: boolean;
+    /** true if the field is invalid */
+    isInvalid?: boolean;
+    /** true if the field is disabled */
+    isDisabled?: boolean;
+    /** true, if the field is read only  */
+    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)";
+};
+};
+};
+}>;
+
+/**
+ * FormField
+ * ============================================================
+ * displays inputs in a FormField context
+ */
+export declare const _FormFieldRoot: ForwardRefExoticComponent<FormFieldProps & RefAttributes<HTMLDivElement>>;
+
+declare interface FormFieldRootSlotProps extends HTMLChakraProps<"div", RecipeVariantProps<typeof formFieldRecipe> & UnstyledProp> {
+}
+
+export { }

package/dist/grid.d.ts

@@ -0,0 +1,28 @@
+import { ForwardRefExoticComponent } from 'react';
+import { GridItemProps } from '@chakra-ui/react';
+import { GridProps as GridProps_2 } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+import { RefAttributes } from 'react';
+
+export declare const Grid: {
+    (props: GridProps): JSX.Element;
+    displayName: string;
+} & {
+    Item: ForwardRefExoticComponent<GridItemProps & RefAttributes<HTMLDivElement>>;
+};
+
+/**
+ * Grid
+ * ============================================================
+ * The Grid Layout Component provides a flexible and responsive way to structure content using a two-dimensional grid system. It allows elements to be arranged in rows and columns, enabling dynamic and efficient layouts for different screen sizes.
+ *
+ * Features:
+ *
+ * - allows forwarding refs to the underlying DOM element
+ */
+export declare interface GridProps extends GridProps_2 {
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+}
+
+export { }

package/dist/heading.d.ts

@@ -0,0 +1,5 @@
+import { Heading } from '@chakra-ui/react';
+
+export { Heading }
+
+export { }

package/dist/icon-button.d.ts

@@ -0,0 +1,53 @@
+import { AriaButtonProps } from 'react-aria';
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+import { RecipeProps } from '@chakra-ui/react';
+import { UnstyledProp } from '@chakra-ui/react';
+
+declare interface ButtonProps extends FunctionalButtonProps {
+    slot?: string | null | undefined;
+    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 {
+}
+
+/**
+ * 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"> {
+    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;
+};
+
+/**
+ * IconButton
+ * ============================================================
+ * displays a button with only an icon as child. It is based
+ * on the regular `Button` component, but with a few adjustments.
+ */
+export declare const IconButton: {
+    (props: IconButtonProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Main props interface for the IconButton component.
+ */
+export declare interface IconButtonProps extends ButtonProps {
+    /** explains the intended action, required for accessibility */
+    "aria-label": string;
+    ref?: React.Ref<HTMLButtonElement>;
+}
+
+export { }

package/dist/icon.d.ts

@@ -0,0 +1,99 @@
+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';
+
+declare interface BoxProps extends HTMLChakraProps<"div"> {
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+}
+
+/**
+ * Icon
+ * displays icon components
+ */
+export declare const Icon: {
+    (props: IconProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Main props interface for the Icon component.
+ * Extends IconVariantProps to include both root props and variant props,
+ * while adding support for React children.
+ */
+export declare interface IconProps extends IconVariantProps {
+    /**
+     * Accepts only a single child - an icon-component or SVG html-element.
+     * Alternatively, as shorthand, use the `as` property.
+     */
+    children?: React.ReactNode;
+    /**
+     * Colors the icon, accepts a color token from the theme or a custom value
+     */
+    color?: BoxProps["color"];
+    /**
+     * Accepts a React component to be rendered as the icon .
+     */
+    as?: BoxProps["as"];
+    /**
+     * Ref to the icon element
+     */
+    ref?: React.Ref<SVGSVGElement>;
+}
+
+/**
+ * Recipe configuration for the Icon component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+declare const iconRecipe: RecipeDefinition<    {
+/**
+* allows applying a predefined size to the icon
+*/
+size: {
+"2xs": {
+boxSize: "600";
+};
+xs: {
+boxSize: "800";
+};
+sm: {
+boxSize: "900";
+};
+md: {
+boxSize: "1000";
+};
+lg: {
+boxSize: "1200";
+};
+xl: {
+boxSize: "1400";
+};
+};
+}>;
+
+/**
+ * Base recipe props interface that combines Chakra UI's recipe props
+ * with the unstyled prop option for the svg element.
+ */
+declare interface IconRecipeProps extends RecipeProps<"svg">, 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 IconRootSlotProps extends HTMLChakraProps<"svg", IconRecipeProps> {
+}
+
+/**
+ * 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.
+ */
+declare type IconVariantProps = Omit<IconRootSlotProps, keyof React.SVGProps<SVGSVGElement> | "css" | "unstyled" | "asChild" | "recipe"> & RecipeVariantProps<typeof iconRecipe>;
+
+export { }

package/dist/image.d.ts

@@ -0,0 +1,18 @@
+import { ImageProps as ImageProps_2 } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+
+/**
+ * Image
+ *
+ * Use this component to display an image.
+ */
+declare const Image_2: {
+    (props: ImageProps): JSX.Element;
+    displayName: string;
+};
+export { Image_2 as Image }
+
+export declare interface ImageProps extends ImageProps_2 {
+}
+
+export { }