@commercetools/nimbus 0.0.0-canary-20250801132810

package/dist/date-input.d.ts

@@ -0,0 +1,103 @@
+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
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/dateinput}
+ */
+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";
+};
+};
+};
+plain: {
+segmentGroup: {
+px: "0";
+outline: "none!";
+boxShadow: "none!";
+};
+};
+};
+}>;
+
+/**
+ * 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,185 @@
+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";
+};
+};
+};
+plain: {
+segmentGroup: {
+px: "0";
+outline: "none!";
+boxShadow: "none!";
+};
+};
+};
+}>;
+
+/**
+ * # DatePicker
+ *
+ * a UI component for users to enter or select a specific calendar date.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/datepicker}
+ */
+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;
+    /**
+     * Whether to hide the time zone information when using ZonedDateTime values.
+     * This prop is forwarded to both the main date input and footer time input.
+     */
+    hideTimeZone?: boolean;
+}
+
+/**
+ * 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: {};
+};
+}>;
+
+/**
+ * Props for the DatePickerTimeInput component.
+ */
+export declare interface DatePickerTimeInputProps {
+    hideTimeZone?: boolean;
+    hourCycle?: 12 | 24;
+}
+
+/**
+ * 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" | "variant";
+
+export { }

package/dist/date-range-picker.d.ts

@@ -0,0 +1,111 @@
+import { DateRangePickerProps as DateRangePickerProps_2 } 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';
+
+/**
+ * DateRangePicker
+ * ============================================================
+ * Combines a DateInput with a RangeCalendar popover for date range selection.
+ * Users can either type a date range directly or select from the calendar.
+ */
+export declare const DateRangePicker: {
+    (props: DateRangePickerProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Main props interface for the DateRangePicker component.
+ *
+ * We extend React Aria's DateRangePickerProps and add the size/variant props
+ * that we want to pass through to the DateInput components.
+ */
+export declare interface DateRangePickerProps extends Omit<DateRangePickerProps_2<DateValue>, ExcludedProps>, Omit<DateRangePickerRootProps, keyof DateRangePickerProps_2<DateValue> | ExcludedProps>, RecipeVariantProps<typeof dateRangePickerSlotRecipe> {
+    /**
+     * 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;
+    /**
+     * Whether to hide the time zone information when using ZonedDateTime values.
+     * This prop is forwarded to both the main date inputs and footer time inputs.
+     */
+    hideTimeZone?: boolean;
+}
+
+/**
+ * Base recipe props interface that combines Chakra UI's recipe props
+ * with the unstyled prop option for the div element.
+ */
+declare interface DateRangePickerRecipeProps 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 DateRangePickerRootProps extends HTMLChakraProps<"div", DateRangePickerRecipeProps> {
+}
+
+declare const dateRangePickerSlotRecipe: SlotRecipeDefinition<"popover" | "group" | "root" | "trigger" | "calendar" | "calendarHeader" | "calendarGrid" | "calendarCell", {
+size: {
+sm: {
+group: {
+height: "800";
+pr: "calc({spacing.1400} + {spacing.400})";
+};
+trigger: {
+top: "50";
+};
+};
+md: {
+group: {
+height: "1000";
+pr: "calc({spacing.1600} + {spacing.200} + {spacing.400})";
+};
+trigger: {
+top: "100";
+};
+};
+};
+variant: {
+solid: {};
+ghost: {
+group: {
+bg: "transparent";
+px: "300";
+_hover: {
+bg: "primary.2";
+};
+};
+};
+};
+}>;
+
+/**
+ * Props for the DateRangePickerTimeInput component.
+ */
+export declare interface DateRangePickerTimeInputProps {
+    hideTimeZone?: boolean;
+    hourCycle?: 12 | 24;
+}
+
+/**
+ * Additional properties we want to exclude from the DateRangePicker 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/dialog.d.ts

@@ -0,0 +1,39 @@
+import { Dialog as Dialog_2 } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+
+/**
+ * # Dialog
+ *
+ * displays a dialog
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/feedback/dialog}
+ *
+ * @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/divider.d.ts

@@ -0,0 +1,87 @@
+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 { SeparatorProps } from 'react-aria';
+import { UnstyledProp } from '@chakra-ui/react';
+
+/**
+ * Divider
+ * ============================================================
+ * A visual separator that divides content sections
+ *
+ * Features:
+ *
+ * - allows forwarding refs to the underlying DOM element
+ * - accepts all native html 'HTMLDivElement' attributes (including aria- & data-attributes)
+ * - supports 'variants', 'orientation', etc. configured in the recipe
+ * - allows overriding styles by using style-props
+ * - supports 'asChild' and 'as' to modify the underlying html-element (polymorphic)
+ * - built with React Aria for accessibility
+ */
+export declare const Divider: {
+    (props: DividerProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Main props interface for the Divider component.
+ * Extends DividerVariantProps to include both root props and variant props,
+ * while adding support for React Aria separator props.
+ */
+export declare interface DividerProps extends Omit<DividerVariantProps, "orientation">, Pick<SeparatorProps, "orientation"> {
+    /** The orientation of the divider */
+    orientation?: "horizontal" | "vertical";
+    /** Reference to the divider element */
+    ref?: React.Ref<HTMLDivElement>;
+}
+
+/**
+ * Recipe configuration for the Divider component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+declare const dividerRecipe: RecipeDefinition<    {
+orientation: {
+horizontal: {
+width: "100%";
+height: "1px";
+borderTopWidth: "1px";
+borderTopStyle: "solid";
+borderLeftWidth: "0";
+};
+vertical: {
+height: "100%";
+width: "1px";
+borderLeftWidth: "1px";
+borderLeftStyle: "solid";
+borderTopWidth: "0";
+};
+};
+}>;
+
+/**
+ * Base recipe props interface that combines Chakra UI's recipe props
+ * with the unstyled prop option for the div element.
+ */
+export declare interface DividerRecipeProps 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.
+ */
+export declare interface DividerRootProps extends HTMLChakraProps<"div", DividerRecipeProps> {
+}
+
+/**
+ * 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 DividerVariantProps = DividerRootProps & RecipeVariantProps<typeof dividerRecipe> & {
+    [key: `data-${string}`]: unknown;
+};
+
+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,133 @@
+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 miscellaneous inputs in a FormField context
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/formfield}
+ */
+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,26 @@
+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
+ *
+ * An easily customizable Grid component, re-exported from Chakra UI, that provides a consistent layout structure across different products.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/layout/grid}
+ */
+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 { }