@commercetools/nimbus 0.0.0-canary-20250801132810

package/dist/tag-group.d.ts

@@ -0,0 +1,99 @@
+import { FC } from 'react';
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+import { RecipeProps } from '@chakra-ui/react';
+import { RecipeVariantProps } from '@chakra-ui/react';
+import { RefAttributes } from 'react';
+import { SlotRecipeDefinition } from '@chakra-ui/react';
+import { Tag } from 'react-aria-components';
+import { TagGroup as TagGroup_2 } from 'react-aria-components';
+import { TagGroupProps as TagGroupProps_2 } from 'react-aria-components';
+import { TagGroupRootComponent as TagGroupRootComponent_2 } from './tag-group.types';
+import { TagGroupTagComponent as TagGroupTagComponent_2 } from './tag-group.types';
+import { TagGroupTagListProps as TagGroupTagListProps_2 } from './tag-group.types';
+import { TagListProps } from 'react-aria-components';
+import { TagProps } from 'react-aria-components';
+
+/**
+ * TagGroup
+ * ============================================================
+ * A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.
+ *
+ */
+export declare const TagGroup: {
+    Root: TagGroupRootComponent_2;
+    TagList: {
+        <T extends object>({ children, ref, ...rest }: TagGroupTagListProps_2<T> & RefAttributes<HTMLDivElement>): JSX.Element;
+        displayName: string;
+    };
+    Tag: TagGroupTagComponent_2;
+};
+
+/** Final external props for the `<TagGroup>` component, including `children`. */
+export declare type TagGroupProps = PropsWithChildren<TagGroupRootProps> & {
+    ref?: React.Ref<typeof TagGroup_2>;
+};
+
+/** Type signature for the main `TagGroup` component. */
+export declare type TagGroupRootComponent = FC<TagGroupProps>;
+
+/** Combined props for the root element (Chakra styles + Aria behavior + Recipe variants). */
+declare type TagGroupRootProps = TagGroupRootSlotProps & TagGroupProps_2 & RecipeVariantProps<typeof tagGroupSlotRecipe>;
+
+/** Base Chakra styling props for the root `div` slot. */
+declare type TagGroupRootSlotProps = HTMLChakraProps<"div", RecipeProps<"div">>;
+
+/**
+ * Recipe configuration for the TagGroup component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+declare const tagGroupSlotRecipe: SlotRecipeDefinition<"root" | "tagList" | "tag", {
+size: {
+sm: {
+tag: {
+minH: "600";
+paddingX: "200";
+fontSize: "350";
+lineHeight: "400";
+};
+};
+md: {
+tag: {
+minH: "800";
+paddingX: "200";
+paddingY: "100";
+};
+};
+lg: {
+tag: {
+minH: "1000";
+padding: "200";
+};
+};
+};
+}>;
+
+/** Type signature for the `TagGroup.Tag` sub-component. */
+export declare type TagGroupTagComponent = FC<TagGroupTagProps>;
+
+/** Type signature for the `TagGroup.TagList` sub-component. */
+export declare type TagGroupTagListComponent<T extends object> = FC<TagGroupTagListProps<T>>;
+
+/** Combined props for the tagList element (Chakra styles + Aria behavior + Recipe variants). */
+export declare type TagGroupTagListProps<T extends object> = TagListProps<T> & Omit<TagGroupTagListSlotProps, keyof TagListProps<T>> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+
+/** Base Chakra styling props for the root `div` slot. */
+declare type TagGroupTagListSlotProps = HTMLChakraProps<"div", RecipeProps<"div">>;
+
+/** Combined props for the tag element (Chakra styles + Aria behavior + Recipe variants). */
+export declare type TagGroupTagProps = TagProps & Omit<TagGroupTagSlotProps, keyof TagProps> & {
+    ref?: React.Ref<typeof Tag>;
+};
+
+/** Base Chakra styling props for the root `div` slot. */
+declare type TagGroupTagSlotProps = HTMLChakraProps<"div", RecipeProps<"div">>;
+
+export { }

package/dist/text-input.d.ts

@@ -0,0 +1,63 @@
+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';
+
+/**
+ * # TextInput
+ *
+ * An input component that takes in a text as input
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/textinput}
+ */
+export declare const TextInput: {
+    (props: TextInputProps): JSX.Element;
+    displayName: string;
+};
+
+export 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/text.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'react/jsx-runtime';
+import { TextProps as TextProps_2 } from '@chakra-ui/react';
+
+/**
+ * # Text
+ *
+ * the Text component is used to display text
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/typography/text}
+ */
+declare const Text_2: {
+    ({ ref: forwardedRef, ...props }: TextProps): JSX.Element;
+    displayName: string;
+};
+export { Text_2 as Text }
+
+export declare interface TextProps extends Omit<TextProps_2, "slot"> {
+    ref?: React.Ref<HTMLElement>;
+    slot?: string | null | undefined;
+}
+
+export { }

package/dist/time-input.d.ts

@@ -0,0 +1,102 @@
+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 { TimeFieldStateOptions } from 'react-stately';
+import { TimeValue } from 'react-aria';
+import { UnstyledProp } from '@chakra-ui/react';
+
+/**
+ * Properties from TimeFieldStateOptions that would conflict with similarly named
+ * properties in TimeInputRootProps. We use this to prevent TypeScript interface
+ * merging conflicts by prioritizing the TimeFieldStateOptions implementation.
+ *
+ * Examples include: value, defaultValue, onChange, onBlur, onFocus, etc.
+ */
+declare type ConflictingFieldStateProps = keyof TimeFieldStateOptions<TimeValue>;
+
+/**
+ * Additional properties we want to exclude from the TimeInput 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";
+
+/**
+ * TimeInput
+ * ============================================================
+ * allows entering a time in the currently selected locale
+ */
+export declare const TimeInput: {
+    (props: TimeInputProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Main props interface for the TimeInput component.
+ *
+ * We use Omit to remove:
+ * 1. Conflicting props from TimeInputRootProps to avoid TypeScript errors
+ * 2. Explicitly excluded props that we don't want users to access
+ */
+export declare interface TimeInputProps extends Omit<TimeInputRootProps, ConflictingFieldStateProps | ExcludedProps>, Omit<TimeFieldStateOptions<TimeValue>, ExcludedProps>, RecipeVariantProps<typeof timeInputRecipe> {
+}
+
+/**
+ * Recipe configuration for the TimeInput component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+declare const timeInputRecipe: 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";
+};
+};
+};
+};
+}>;
+
+/**
+ * Base recipe props interface that combines Chakra UI's recipe props
+ * with the unstyled prop option for the div element.
+ */
+declare interface TimeInputRecipeProps 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 TimeInputRootProps extends HTMLChakraProps<"div", TimeInputRecipeProps> {
+}
+
+export { }

package/dist/toggle-button-group.d.ts

@@ -0,0 +1,114 @@
+import { AriaToggleButtonGroupProps } from 'react-aria';
+import { AriaToggleButtonProps } from 'react-aria';
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { PropsWithChildren } from 'react';
+import { RecipeProps } from '@chakra-ui/react';
+import { RecipeVariantProps } from '@chakra-ui/react';
+import { SlotRecipeDefinition } from '@chakra-ui/react';
+import { ToggleButton } from 'react-aria-components';
+import { ToggleButtonGroup as ToggleButtonGroup_2 } from 'react-aria-components';
+import { ToggleButtonGroupButtonComponent as ToggleButtonGroupButtonComponent_2 } from './toggle-button-group.types';
+import { ToggleButtonGroupRootComponent as ToggleButtonGroupRootComponent_2 } from './toggle-button-group.types';
+
+/**
+ * Recipe configuration for the ToggleButtonGroup component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+declare const buttonGroupRecipe: SlotRecipeDefinition<"button" | "root", {
+size: {
+xs: {
+button: {
+h: "800";
+minW: "800";
+fontSize: "350";
+fontWeight: "500";
+lineHeight: "400";
+px: "300";
+gap: "100";
+_icon: {
+width: "500";
+height: "500";
+};
+} | undefined;
+};
+md: {
+button: {
+h: "1000";
+minW: "1000";
+fontSize: "400";
+lineHeight: "500";
+px: "400";
+gap: "200";
+_icon: {
+width: "600";
+height: "600";
+};
+} | undefined;
+};
+};
+tone: {
+primary: {
+button: {
+colorPalette: "primary";
+};
+};
+critical: {
+button: {
+colorPalette: "critical";
+};
+};
+neutral: {
+button: {
+colorPalette: "neutral";
+};
+};
+};
+}>;
+
+/**
+ * ToggleButtonGroup
+ * ============================================================
+ * To group multiple `Button` components together, visually and logically, representing a set of related actions.
+ */
+export declare const ToggleButtonGroup: {
+    Root: ToggleButtonGroupRootComponent_2;
+    Button: ToggleButtonGroupButtonComponent_2;
+};
+
+export declare const _ToggleButtonGroupButton: ToggleButtonGroupButtonComponent;
+
+/** Type signature for the `ToggleButtonGroup.Button` sub-component. */
+export declare type ToggleButtonGroupButtonComponent = React.FC<ToggleButtonGroupButtonProps>;
+
+/** Combined props for the button element (Chakra styles + Aria behavior). */
+export declare type ToggleButtonGroupButtonProps = ToggleButtonGroupButtonSlotProps & AriaToggleButtonProps & {
+    ref?: React.Ref<typeof ToggleButton>;
+};
+
+/** Base Chakra styling props for the `button` slot. */
+declare type ToggleButtonGroupButtonSlotProps = HTMLChakraProps<"button", RecipeProps<"button">>;
+
+/** Final external props for the `<ToggleButtonGroup>` component, including `children`. */
+export declare type ToggleButtonGroupProps = PropsWithChildren<ToggleButtonGroupRootProps> & {
+    ref?: React.Ref<typeof ToggleButtonGroup_2>;
+};
+
+/**
+ * # ToggleButtonGroup
+ *
+ * A set of closely related, mutually exclusive or complementary actions that are important enough to be displayed directly in the interface for quick access.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/togglebuttongroup}
+ */
+export declare const _ToggleButtonGroupRoot: ToggleButtonGroupRootComponent;
+
+/** Type signature for the main `ToggleButtonGroup` component. */
+export declare type ToggleButtonGroupRootComponent = React.FC<ToggleButtonGroupProps>;
+
+/** Combined props for the root element (Chakra styles + Aria behavior + Recipe variants). */
+declare type ToggleButtonGroupRootProps = ToggleButtonGroupRootSlotProps & AriaToggleButtonGroupProps & RecipeVariantProps<typeof buttonGroupRecipe>;
+
+/** Base Chakra styling props for the root `div` slot. */
+declare type ToggleButtonGroupRootSlotProps = HTMLChakraProps<"div", RecipeProps<"div">>;
+
+export { }

package/dist/toggle-button.d.ts

@@ -0,0 +1,144 @@
+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 { ToggleButtonProps as ToggleButtonProps_2 } from 'react-aria-components';
+import { UnstyledProp } from '@chakra-ui/react';
+
+/**
+ * Additional properties we want to exclude from the ToggleButton component.
+ * These are chakra-ui props we don't want exposed for non-polymorphic components.
+ */
+declare type ExcludedProps = "css" | "colorScheme" | "unstyled" | "recipe" | "as" | "asChild";
+
+/**
+ * # ToggleButton
+ *
+ * A toggleable button component that can be pressed to switch between
+ * selected and unselected states.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/inputs/togglebutton}
+ */
+export declare const ToggleButton: {
+    ({ ref: forwardedRef, ...props }: ToggleButtonProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface ToggleButtonProps extends ToggleButtonProps_2, Omit<ToggleButtonRootProps, keyof ToggleButtonProps_2 | ExcludedProps> {
+    /**
+     * Ref to the underlying button element
+     */
+    ref?: React.Ref<HTMLButtonElement>;
+}
+
+declare const toggleButtonRecipe: RecipeDefinition<    {
+size: {
+"2xs"?: {
+h: "600";
+minW: "600";
+fontSize: "300";
+fontWeight: "500";
+lineHeight: "400";
+px: "200";
+gap: "100";
+_icon: {
+width: "400";
+height: "400";
+};
+} | undefined;
+xs?: {
+h: "800";
+minW: "800";
+fontSize: "350";
+fontWeight: "500";
+lineHeight: "400";
+px: "300";
+gap: "100";
+_icon: {
+width: "500";
+height: "500";
+};
+} | undefined;
+md?: {
+h: "1000";
+minW: "1000";
+fontSize: "400";
+lineHeight: "500";
+px: "400";
+gap: "200";
+_icon: {
+width: "600";
+height: "600";
+};
+} | undefined;
+};
+variant: {
+outline: {
+"--button-bg": "transparent";
+"--button-text": "{colors.colorPalette.11}";
+"--border-width": "{sizes.25}";
+"--border-color": "{colors.colorPalette.7}";
+bg: "var(--button-bg)";
+boxShadow: "0 0 0 var(--border-width) var(--border-color)";
+color: "var(--button-text)";
+"&[data-hovered='true']": {
+"--button-bg": "{colors.colorPalette.2}";
+"--border-color": "{colors.colorPalette.8}";
+};
+"&[data-selected=true]": {
+"--button-bg": "{colors.colorPalette.3}";
+"--border-color": "{colors.colorPalette.8}";
+_hover: {
+"--button-bg": "{colors.colorPalette.4}";
+"--border-color": "{colors.colorPalette.9}";
+};
+};
+};
+ghost: {
+"--button-text": "{colors.neutral.11}";
+"--button-bg": "transparent";
+color: "var(--button-text)";
+bg: "var(--button-bg)";
+"&[data-hovered='true']": {
+"--button-bg": "{colors.colorPalette.2}";
+};
+"&[data-selected='true']": {
+"--button-bg": "{colors.colorPalette.3}";
+"--button-text": "{colors.colorPalette.11}";
+"&[data-hovered='true']": {
+"--button-bg": "{colors.colorPalette.4}";
+};
+};
+};
+};
+tone: {
+primary?: {
+colorPalette: "primary";
+} | undefined;
+critical?: {
+colorPalette: "critical";
+} | undefined;
+neutral?: {
+colorPalette: "neutral";
+} | undefined;
+info?: {
+colorPalette: "info";
+} | undefined;
+};
+}>;
+
+/**
+ * Base recipe props interface that combines Chakra UI's recipe props
+ * with the unstyled prop option for the toggle button element.
+ */
+declare interface ToggleButtonRecipeProps extends RecipeVariantProps<typeof toggleButtonRecipe>, 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 ToggleButtonRootProps = HTMLChakraProps<"button", ToggleButtonRecipeProps>;
+
+export { }

package/dist/tooltip.d.ts

@@ -0,0 +1,132 @@
+import { FocusableOptions } from 'react-aria';
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { JSX } from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
+import { RecipeDefinition } from '@chakra-ui/react';
+import { RecipeProps } from '@chakra-ui/react';
+import { RecipeVariantProps } from '@chakra-ui/react';
+import { RecipeVariantRecord } from '@chakra-ui/react';
+import { RefAttributes } from 'react';
+import { TooltipProps as TooltipProps_2 } from 'react-aria-components';
+import { TooltipTriggerComponentProps } from 'react-aria-components';
+import { UnstyledProp } from '@chakra-ui/react';
+
+/**
+ * For use in components that use the polymorphic `as` and `asChild` props
+ * internally, but do not make them available to the consumer.
+ *
+ * Long rambling background:
+ * React-Aria's components cannot be configured to use `as` and `asChild` internally,
+ * and cannot be directly styled by chakra's styledSystem. Therefore components
+ * from `react-aria-components` should be wrapped in a chakra `withContext`
+ * root component to set the styles onto the `r-a-c` component using `asChild`.
+ * This means that we need to allow polymorphism internally, but should not
+ * allow it in the external props api since it would not work.
+ */
+declare type ExcludePolymorphicFromProps<T> = Omit<T, "as" | "asChild">;
+
+/**
+ * MakeElementFocusable
+ * ============================================================
+ * A helper component that adds props from `react-aria`s `useFocusable` hook
+ * to its child so that it can be used as a trigger element for a `Tooltip`
+ *
+ * Caveats:
+ * - Using non-interactive elements as tooltip triggers is against ARIA best-practices,
+ *   it is your responsibility to ensure that the underlying trigger element handles
+ *   focus and hover interactions correctly for keyboard-only users
+ *
+ * Features:
+ * - allows forwarding refs to the underlying DOM element
+ * - accepts all native html 'HTMLElement' attributes (including aria- & data-attributes)
+ *
+ * Further Context:
+ * - [React Aria Components Tooltip Documentation](https://react-spectrum.adobe.com/react-aria/Tooltip.html)
+ * - [React Aria Components Issue re:Tooltip with custom trigger](https://github.com/adobe/react-spectrum/issues/5733#issuecomment-1918691983)
+ * - [ARIA Tooltip Pattern](https://www.w3.org/TR/wai-aria-1.2/#tooltip)
+ */
+export declare const MakeElementFocusable: ForwardRefExoticComponent<FocusableOptions<HTMLElement> & {
+children?: ReactNode | undefined;
+} & RefAttributes<HTMLElement>>;
+
+export declare const Tooltip: {
+    Root: typeof _TooltipRoot;
+    Content: typeof _TooltipContent;
+};
+
+/**
+ * TooltipContent
+ * ============================================================
+ * A contextual popup that displays a description for an element, uses `Tooltip` component from `react-aria-components`.
+ *
+ * Features:
+ * - allows forwarding refs to the underlying DOM element
+ * - accepts all native html 'HTMLDivElement' attributes (including aria- & data-attributes)
+ * - allows overriding styles by using style-props
+ *
+ * Further Context:
+ * - [React Aria Components Tooltip Documentation](https://react-spectrum.adobe.com/react-aria/Tooltip.html)
+ * - [ARIA Tooltip Pattern](https://www.w3.org/TR/wai-aria-1.2/#tooltip)
+ */
+export declare function _TooltipContent({ children, placement, ref, ...props }: TooltipProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}): JSX.Element;
+
+export declare namespace _TooltipContent {
+    var displayName: string;
+}
+
+/**
+ * Main props interface for the Tooltip components
+ * Extends TooltipVariantProps to include root props, variant props,
+ * and react-aria props, while adding support for React children.
+ */
+export declare interface TooltipProps extends PropsWithChildren<TooltipVariantProps> {
+}
+
+/**
+ * Recipe configuration for the Tooltip component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+declare const tooltipRecipe: RecipeDefinition<RecipeVariantRecord>;
+
+/**
+ * Base recipe props interface that combines Chakra UI's recipe props
+ */
+declare interface TooltipRecipeProps extends RecipeProps<"div">, UnstyledProp {
+}
+
+/**
+ * # Tooltip
+ *
+ * A contextual popup that displays a description for an element.
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/feedback/tooltip}
+ */
+export declare function _TooltipRoot({ delay, closeDelay, ...props }: TooltipTriggerComponentProps): JSX.Element;
+
+export declare namespace _TooltipRoot {
+    var displayName: string;
+}
+
+/**
+ * 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 TooltipRootProps extends HTMLChakraProps<"div", TooltipRecipeProps> {
+}
+
+/**
+ * Combines the root props with Chakra UI's recipe variant props, and
+ * react-aria-component's TooltipProps
+ * This allows the component to accept:
+ * - structural props from Root
+ * - styling variants from the recipe
+ * - a11y/state related props from react-aria-components Tooltip
+ */
+declare type TooltipVariantProps = ExcludePolymorphicFromProps<TooltipRootProps & RecipeVariantProps<typeof tooltipRecipe> & TooltipProps_2>;
+
+export { }