@commercetools/nimbus 2.0.1-rc2 → 2.0.1-rc3

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

@@ -0,0 +1,3 @@
+import { ToggleButtonGroupProps, ToggleButtonGroupButtonComponent } from './toggle-button-group.types';
+export declare const ToggleButtonGroupRoot: import('react').ForwardRefExoticComponent<Omit<ToggleButtonGroupProps, "ref"> & import('react').RefAttributes<(props: import('react-aria-components').ToggleButtonGroupProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null>>;
+export declare const ToggleButtonGroupButton: ToggleButtonGroupButtonComponent;

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

@@ -0,0 +1,32 @@
+import { HTMLChakraProps, RecipeProps } from '@chakra-ui/react/styled-system';
+import { AriaToggleButtonGroupProps, AriaToggleButtonProps } from 'react-aria';
+import { ToggleButton as RaToggleButton, ToggleButtonGroup as RaToggleButtonGroup } from 'react-aria-components';
+type ToggleButtonGroupRecipeVariantProps = {
+    /**
+     * Size variant
+     * @default "md"
+     */
+    size?: "xs" | "md";
+    /**
+     * Tone variant
+     */
+    tone?: "primary" | "critical" | "neutral";
+};
+type ToggleButtonGroupRootSlotProps = HTMLChakraProps<"div", RecipeProps<"div">>;
+type ToggleButtonGroupButtonSlotProps = HTMLChakraProps<"button", RecipeProps<"button">>;
+type ToggleButtonGroupRootCombinedProps = ToggleButtonGroupRootSlotProps & AriaToggleButtonGroupProps;
+export type ToggleButtonGroupProps = ToggleButtonGroupRecipeVariantProps & Omit<ToggleButtonGroupRootCombinedProps, "size" | "tone"> & {
+    ref?: React.Ref<typeof RaToggleButtonGroup>;
+};
+/**
+ * Type signature for the main ToggleButtonGroup component.
+ */
+export type ToggleButtonGroupRootComponent = React.FC<ToggleButtonGroupProps>;
+export type ToggleButtonGroupButtonProps = ToggleButtonGroupButtonSlotProps & AriaToggleButtonProps & {
+    ref?: React.Ref<typeof RaToggleButton>;
+};
+/**
+ * Type signature for the ToggleButtonGroup.Button sub-component.
+ */
+export type ToggleButtonGroupButtonComponent = React.FC<ToggleButtonGroupButtonProps>;
+export {};

package/dist/components/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './toolbar';
+export * from './toolbar.types';

package/dist/components/toolbar/toolbar.d.ts

@@ -0,0 +1,2 @@
+import { ToolbarComponent } from './toolbar.types.ts';
+export declare const Toolbar: ToolbarComponent;

package/dist/components/toolbar/toolbar.recipe.d.ts

@@ -0,0 +1,34 @@
+export declare const toolbarRecipe: import('@chakra-ui/react').RecipeDefinition<{
+    size: {
+        xs: {
+            "--toolbar-spacing": "{spacing.100}";
+            "--divider-size": "{sizes.600}";
+        };
+        md: {
+            "--toolbar-spacing": "{spacing.200}";
+            "--divider-size": "{sizes.800}";
+        };
+    };
+    orientation: {
+        horizontal: {
+            "--toolbar-direction": "row";
+            "& .nimbus-divider": {
+                height: "var(--divider-size)";
+                mx: "var(--toolbar-spacing)";
+            };
+        };
+        vertical: {
+            "--toolbar-direction": "column";
+            "& .nimbus-divider": {
+                width: "var(--divider-size)";
+                my: "var(--toolbar-spacing)";
+            };
+        };
+    };
+    variant: {
+        plain: {};
+        outline: {
+            boxShadow: "0 0 0 {sizes.25} {colors.neutral.6}";
+        };
+    };
+}>;

package/dist/components/toolbar/toolbar.slots.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Slot component that provides the styling context for the Group component.
+ * Uses Chakra UI's recipe context system for consistent styling across instances.
+ */
+export declare const ToolbarRoot: import('react').ForwardRefExoticComponent<Omit<import('@chakra-ui/react').HTMLChakraProps<"div", {
+    size?: import('@chakra-ui/react').RecipeProps<"toolbar">["size"];
+    orientation?: import('@chakra-ui/react').RecipeProps<"toolbar">["orientation"];
+    variant?: import('@chakra-ui/react').RecipeProps<"toolbar">["variant"];
+} & import('@chakra-ui/react').UnstyledProp>, "translate"> & {
+    translate?: "yes" | "no";
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/toolbar/toolbar.types.d.ts

@@ -0,0 +1,20 @@
+import { FC, Ref } from 'react';
+import { HTMLChakraProps, RecipeProps, UnstyledProp } from '@chakra-ui/react';
+import { ToolbarProps as RaToolbarProps } from 'react-aria-components';
+type ToolbarRecipeProps = {
+    /** Size variant of the toolbar */
+    size?: RecipeProps<"toolbar">["size"];
+    /** Layout orientation of the toolbar */
+    orientation?: RecipeProps<"toolbar">["orientation"];
+    /** Visual style variant of the toolbar */
+    variant?: RecipeProps<"toolbar">["variant"];
+} & UnstyledProp;
+export type ToolbarRootSlotProps = Omit<HTMLChakraProps<"div", ToolbarRecipeProps>, "translate"> & {
+    translate?: "yes" | "no";
+};
+type DefaultExcludedProps = "css" | "asChild" | "as";
+export type ToolbarProps = Omit<ToolbarRootSlotProps, DefaultExcludedProps | "children" | "slot"> & Omit<RaToolbarProps, "orientation" | "className" | "style"> & {
+    ref?: Ref<HTMLDivElement>;
+};
+export type ToolbarComponent = FC<ToolbarProps>;
+export {};

package/dist/components/tooltip/components/tooltip.content.d.ts

@@ -0,0 +1,21 @@
+import { TooltipProps } from '../tooltip.types';
+/**
+ * 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>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare namespace TooltipContent {
+    var displayName: string;
+}

package/dist/components/tooltip/components/tooltip.root.d.ts

@@ -0,0 +1,12 @@
+import { TooltipTriggerComponentProps } from 'react-aria-components';
+/**
+ * # 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): import("react/jsx-runtime").JSX.Element;
+export declare namespace TooltipRoot {
+    var displayName: string;
+}

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export * from './tooltip';
+export * from './tooltip.types';
+export * from './make-element-focusable';

package/dist/components/tooltip/make-element-focusable.d.ts

@@ -0,0 +1,32 @@
+import { PropsWithChildren } from 'react';
+import { FocusableOptions } from 'react-aria';
+export type MakeElementFocusableProps = PropsWithChildren<FocusableOptions<HTMLElement>> & {
+    /**
+     * React ref to be forwarded to the underlying element
+     */
+    ref?: React.Ref<HTMLElement>;
+};
+/**
+ * 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: {
+    ({ ref: forwardedRef, children, ...props }: MakeElementFocusableProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | null;
+    displayName: string;
+};

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,7 @@
+import { TooltipRoot } from './components/tooltip.root';
+import { TooltipContent } from './components/tooltip.content';
+export { TooltipRoot as _TooltipRoot, TooltipContent as _TooltipContent };
+export declare const Tooltip: {
+    Root: typeof TooltipRoot;
+    Content: typeof TooltipContent;
+};

package/dist/components/tooltip/tooltip.recipe.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Recipe configuration for the Tooltip component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+export declare const tooltipRecipe: import('@chakra-ui/react').RecipeDefinition<import('@chakra-ui/react').RecipeVariantRecord>;

package/dist/components/tooltip/tooltip.slots.d.ts

@@ -0,0 +1,7 @@
+import { TooltipRootSlotProps } from './tooltip.types';
+import { SlotComponent } from '../../utils/slot-types';
+/**
+ * Root component that provides the styling context for the Tooltip component.
+ * Uses Chakra UI's recipe context system for consistent styling across instances.
+ */
+export declare const TooltipRootSlot: SlotComponent<HTMLDivElement, TooltipRootSlotProps>;

package/dist/components/tooltip/tooltip.types.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+import { TooltipProps as RaTooltipProps } from 'react-aria-components';
+import { HTMLChakraProps, RecipeProps, UnstyledProp } from '@chakra-ui/react';
+import { ExcludePolymorphicFromProps } from '../utils/type-helpers';
+type TooltipRecipeProps = RecipeProps<"tooltip"> & UnstyledProp;
+export type TooltipRootSlotProps = HTMLChakraProps<"div", TooltipRecipeProps>;
+type TooltipVariantProps = ExcludePolymorphicFromProps<TooltipRootSlotProps & RaTooltipProps>;
+export type TooltipProps = PropsWithChildren<TooltipVariantProps>;
+export {};

package/dist/components/utils/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Shared utility types for Nimbus components
+ */
+export type { ExcludePolymorphicFromProps } from './type-helpers';

package/dist/components/utils/type-helpers.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Utility type helpers for Nimbus components
+ */
+/**
+ * Excludes polymorphic props (`as` and `asChild`) from a type.
+ *
+ * **Use case:** For components that use the polymorphic `as` and `asChild` props
+ * internally, but do not make them available to the consumer.
+ *
+ * **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.
+ *
+ * @template T - The type to exclude polymorphic props from
+ *
+ * @example
+ * ```typescript
+ * export type AccordionItemProps = ExcludePolymorphicFromProps<
+ *   RaDisclosureProps & HTMLChakraProps<"div">
+ * > & {
+ *   children: ReactNode;
+ * };
+ * ```
+ */
+export type ExcludePolymorphicFromProps<T> = Omit<T, "as" | "asChild">;

package/dist/components/visually-hidden/index.d.ts

@@ -0,0 +1 @@
+export * from './visually-hidden';

package/dist/components/visually-hidden/visually-hidden.d.ts

@@ -0,0 +1,17 @@
+import { VisuallyHiddenProps as ReactAriaVisuallyHiddenProps } from 'react-aria';
+export type VisuallyHiddenProps = Omit<ReactAriaVisuallyHiddenProps, "elementType"> & {
+    /** specifies the element type to render, use `span` for inline content
+     * and `div` for block content */
+    as?: "span" | "div";
+};
+/**
+ * # VisuallyHidden
+ *
+ * makes content accessible to screen readers but hides it visually
+ *
+ * @see {@link https://nimbus-documentation.vercel.app/components/accessibility/visually-hidden}
+ */
+export declare const VisuallyHidden: {
+    (props: VisuallyHiddenProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export * from './use-hotkeys';
+export * from './use-copy-to-clipboard';
+export * from './use-color-scheme';
+export * from './use-color-mode';
+export * from './use-color-mode-value';

package/dist/hooks/use-color-mode/index.d.ts

@@ -0,0 +1 @@
+export { useColorMode } from './use-color-mode';

package/dist/hooks/use-color-mode/use-color-mode.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Hook for managing color mode (light/dark theme) state.
+ *
+ * @experimental This hook is experimental and may change in future versions.
+ *
+ * This hook provides access to the current color mode and functions to change it.
+ * It integrates with the next-themes library to handle theme persistence and system preference detection.
+ *
+ * @returns An object containing:
+ *   - `colorMode`: The current resolved theme ('light' | 'dark' | 'system' | undefined)
+ *   - `setColorMode`: Function to set a specific color mode
+ *   - `toggleColorMode`: Function to toggle between light and dark modes
+ *
+ * @example
+ * ```tsx
+ * function ThemeToggle() {
+ *   const { colorMode, toggleColorMode } = useColorMode();
+ *
+ *   return (
+ *     <button onClick={toggleColorMode}>
+ *       Current mode: {colorMode}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export declare function useColorMode(): {
+    colorMode: string | undefined;
+    setColorMode: import('react').Dispatch<import('react').SetStateAction<string>>;
+    toggleColorMode: () => void;
+};

package/dist/hooks/use-color-mode-value/index.d.ts

@@ -0,0 +1 @@
+export { useColorModeValue } from './use-color-mode-value';

package/dist/hooks/use-color-mode-value/use-color-mode-value.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Hook that returns a value based on the current color mode.
+ *
+ * @experimental This hook is experimental and may change in future versions.
+ *
+ * @param light - The value to return when the color mode is light
+ * @param dark - The value to return when the color mode is dark
+ * @returns The appropriate value based on the current color mode
+ */
+export declare function useColorModeValue<T>(light: T, dark: T): T;

package/dist/hooks/use-color-scheme/index.d.ts

@@ -0,0 +1 @@
+export { useColorScheme } from './use-color-scheme';

package/dist/hooks/use-color-scheme/use-color-scheme.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Hook that provides access to the current color scheme value.
+ *
+ * @experimental This hook is experimental and may change in future versions.
+ *
+ * This hook monitors the color-scheme CSS property on the document's HTML element
+ * and returns the current value. It automatically updates when the color scheme changes,
+ * either through direct style changes or theme updates stored in localStorage.
+ *
+ * The hook observes mutations to the HTML element's style attribute to detect
+ * color scheme changes and re-renders the component when changes occur.
+ *
+ * @returns The current color scheme value as a string ('light', 'dark')
+ */
+export declare function useColorScheme(): string;

package/dist/hooks/use-copy-to-clipboard/index.d.ts

@@ -0,0 +1 @@
+export { useCopyToClipboard } from './use-copy-to-clipboard.ts';

package/dist/hooks/use-copy-to-clipboard/use-copy-to-clipboard.d.ts

@@ -0,0 +1 @@
+export { useCopyToClipboard } from 'react-use';

package/dist/hooks/use-hotkeys/index.d.ts

@@ -0,0 +1 @@
+export { useHotkeys } from './use-hotkeys.ts';

package/dist/hooks/use-hotkeys/use-hotkeys.d.ts

@@ -0,0 +1 @@
+export { useHotkeys } from 'react-hotkeys-hook';