@commercetools/nimbus 0.0.0-canary-20250826133439 → 0.0.0-canary-20250826164027

package/dist/index.d.ts

@@ -44,10 +44,11 @@ import { DetailedHTMLProps } from 'react';
 import { Dialog as Dialog_2 } from '@chakra-ui/react/dialog';
 import { DisclosureGroupProps as DisclosureGroupProps_2 } from './accordion.types';
 import { DisclosureProps } from 'react-aria-components';
-import { Dispatch } from 'react';
+import { Editor } from 'slate';
 import { FC } from 'react';
 import { Flex } from '@chakra-ui/react/flex';
 import { FocusableOptions } from 'react-aria';
+import { FocusEventHandler } from 'react';
 import { FormFieldDescriptionSlotProps } from './form-field.slots';
 import { FormFieldErrorSlotProps } from './form-field.slots';
 import { FormFieldInputSlotProps } from './form-field.slots';
@@ -66,6 +67,7 @@ import { ImageProps as ImageProps_2 } from '@chakra-ui/react/image';
 import { JSX } from 'react/jsx-runtime';
 import { JsxStyleProps } from '@chakra-ui/react';
 import { KbdProps as KbdProps_2 } from '@chakra-ui/react/kbd';
+import { Key } from 'react-aria';
 import { List as List_2 } from '@chakra-ui/react/list';
 import { ListBoxItemProps } from 'react-aria-components';
 import { ListBoxProps } from 'react-aria-components';
@@ -110,7 +112,6 @@ import { SelectProps } from 'react-aria-components';
 import { SelectRootProps as SelectRootProps_2 } from './select.types';
 import { SeparatorProps } from 'react-aria';
 import { SeparatorProps as SeparatorProps_2 } from 'react-aria-components';
-import { SetStateAction } from 'react';
 import { SimpleGridProps as SimpleGridProps_2 } from '@chakra-ui/react/simple-grid';
 import { SlotRecipeDefinition } from '@chakra-ui/react';
 import { SlotRecipeVariantRecord } from '@chakra-ui/react';
@@ -130,6 +131,7 @@ import { TagProps } from 'react-aria-components';
 import { TdHTMLAttributes } from 'react';
 import { TextFieldProps } from 'react-aria-components';
 import { TextProps as TextProps_2 } from '@chakra-ui/react/text';
+import { TextStyleDefinition } from '../constants';
 import { ThemeProviderProps } from 'next-themes';
 import { TimeFieldStateOptions } from 'react-stately';
 import { TimeValue } from 'react-aria';
@@ -144,10 +146,8 @@ import { TooltipTriggerComponentProps } from 'react-aria-components';
 import { UnstyledProp } from '@chakra-ui/react/styled-system';
 import { UnstyledProp as UnstyledProp_2 } from '@chakra-ui/react';
 import { useButton } from 'react-aria';
-import { useCopyToClipboard } from 'react-use';
 import { useDisclosure } from 'react-aria';
 import { useDisclosureState } from 'react-stately';
-import { useHotkeys } from 'react-hotkeys-hook';
 import { VisuallyHiddenProps as VisuallyHiddenProps_2 } from 'react-aria';
 
 export declare const Accordion: {
@@ -1643,6 +1643,8 @@ declare type DefaultExcludedProps = "css" | "asChild" | "as" | "colorScheme";
 
 declare type DefaultExcludedProps_2 = "css" | "asChild" | "as";
 
+declare type DefaultExcludedProps_3 = "css" | "asChild" | "as" | "onChange";
+
 /**
  * # Dialog
  *
@@ -3050,6 +3052,65 @@ export declare type RangeValue<T> = {
     end: T;
 };
 
+/**
+ RichTextInput - A rich text input component with formatting capabilities.
+ */
+export declare const RichTextInput: {
+    (props: RichTextInputProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface RichTextInputProps extends Omit<RichTextInputRootSlotProps, DefaultExcludedProps_3 | "children"> {
+    /**
+     * The ref for the rich text input component
+     */
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * The HTML value of the rich text input
+     */
+    value?: string;
+    /**
+     * The default HTML value of the rich text input (uncontrolled)
+     */
+    defaultValue?: string;
+    /**
+     * Called when the value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Called when the input is focused
+     */
+    onFocus?: FocusEventHandler<HTMLDivElement>;
+    /**
+     * Called when the input is blurred
+     */
+    onBlur?: FocusEventHandler<HTMLDivElement>;
+    /**
+     * Placeholder text to show when the editor is empty
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the input is read-only
+     */
+    isReadOnly?: boolean;
+    /**
+     * Whether the input is in an invalid state
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether to focus the input when it mounts
+     */
+    autoFocus?: boolean;
+}
+
+declare const richTextInputRecipe: SlotRecipeDefinition<"toolbar" | "root" | "editable", {}>;
+
+declare type RichTextInputRootSlotProps = HTMLChakraProps_2<"div", RecipeVariantProps_2<typeof richTextInputRecipe> & UnstyledProp_2>;
+
 export declare type RouterOptions = NimbusRouterOptionsBase extends {
     routerOptions: any;
 } ? NimbusRouterOptionsBase["routerOptions"] : any;
@@ -3774,22 +3835,25 @@ declare const toolbarRecipe: 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: "auto";
+                height: "var(--divider-size)";
                 mx: "var(--toolbar-spacing)";
             };
         };
         vertical: {
             "--toolbar-direction": "column";
             "& .nimbus-divider": {
+                width: "var(--divider-size)";
                 my: "var(--toolbar-spacing)";
             };
         };
@@ -3901,68 +3965,51 @@ export declare interface TypedNimbusRouterConfig {
     useHref?: (href: string) => string;
 }
 
-/**
- * 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: Dispatch<SetStateAction<string>>;
-    toggleColorMode: () => void;
+export declare const useFormattingState: ({ withPreservedSelection, }: UseFormattingStateProps) => {
+    selectedKeys: Set<string>;
+    selectedScriptKeys: Set<string>;
+    allSelectedKeys: Set<string>;
+    handleAllSelectionChange: (keys: "all" | Set<Key>) => void;
 };
 
-/**
- * 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;
+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 access to the current color scheme value.
- *
- * @experimental This hook is experimental and may change in future versions.
+ * 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.
  *
- * 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.
+ * TODO: This works for toggle buttons, but not for menus.
  *
- * 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')
+ * @param editor - The Slate editor instance
+ * @returns A function that wraps actions to preserve selection and focus
  */
-export declare function useColorScheme(): string;
+export declare const usePreservedSelection: (editor: Editor) => (action: () => void) => () => void;
 
-export { useCopyToClipboard }
+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 { useHotkeys }
+export declare interface UseToolbarStateProps {
+    withPreservedSelection: (fn: () => void) => () => void;
+}
 
 /**
  * # VisuallyHidden
@@ -3983,3 +4030,12 @@ export declare interface VisuallyHiddenProps extends Omit<VisuallyHiddenProps_2,
 }
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}