@commercetools/nimbus 0.0.12-rc1 → 0.0.12-rc3

package/dist/split-button.d.ts

@@ -0,0 +1,76 @@
+import { AriaButtonProps } from 'react-aria';
+import { HTMLChakraProps } from '@chakra-ui/react/styled-system';
+import { JSX } from 'react/jsx-runtime';
+import { MenuProps } from 'react-aria-components';
+import { MenuTriggerProps } from 'react-aria-components';
+import { ReactNode } from 'react';
+import { RecipeProps } from '@chakra-ui/react/styled-system';
+import { UnstyledProp } from '@chakra-ui/react/styled-system';
+
+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;
+};
+
+/**
+ * # SplitButton
+ *
+ * A split-button component that combines a primary action button with a dropdown menu.
+ *
+ * Shows a primary action button + dropdown trigger. The primary button automatically
+ * executes the first enabled Menu.Item action, while the dropdown trigger opens a menu
+ * with all available options.
+ *
+ * Use with Menu.Item, Menu.Section, and Menu.Separator components for content.
+ */
+export declare const SplitButton: {
+    (props: SplitButtonProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface SplitButtonProps extends Omit<MenuTriggerProps, "trigger" | "children">, Required<Pick<MenuProps<object>, "onAction">>, Pick<ButtonProps, "size" | "variant" | "tone" | "isDisabled"> {
+    /**
+     * Accessibility label for the dropdown trigger
+     */
+    "aria-label": string;
+    /**
+     * Children should contain:
+     * - Icon slot: Icon component with slot="icon" containing an icon element
+     * - Menu components: Menu.Item, Menu.Section, Menu.Separator
+     *
+     * The component automatically selects the first enabled Menu.Item as the primary action.
+     */
+    children: ReactNode;
+}
+
+export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/stack.d.ts

@@ -19,3 +19,12 @@ export declare interface StackProps extends StackProps_2 {
 }
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/switch.d.ts

@@ -75,3 +75,12 @@ label: {
 }>;
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/table.d.ts

@@ -3,3 +3,12 @@ import { Table } from '@chakra-ui/react/table';
 export { Table }
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/tag-group.d.ts

@@ -97,3 +97,12 @@ export declare type TagGroupTagProps = TagProps & Omit<TagGroupTagSlotProps, key
 declare type TagGroupTagSlotProps = HTMLChakraProps<"div", RecipeProps<"div">>;
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/text-input.d.ts

@@ -61,3 +61,12 @@ declare interface TextInputRecipeProps extends RecipeVariantProps<typeof textInp
 declare type TextInputRootSlotProps = HTMLChakraProps<"input", TextInputRecipeProps>;
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/text.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from 'react/jsx-runtime';
-import { TextProps as TextProps_2 } from '@chakra-ui/react/typography';
+import { TextProps as TextProps_2 } from '@chakra-ui/react/text';
 
 /**
  * # Text
@@ -20,3 +20,12 @@ export declare interface TextProps extends Omit<TextProps_2, "slot"> {
 }
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/time-input.d.ts

@@ -100,3 +100,12 @@ declare interface TimeInputRootProps extends HTMLChakraProps<"div", TimeInputRec
 }
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

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

@@ -112,3 +112,12 @@ declare type ToggleButtonGroupRootProps = ToggleButtonGroupRootSlotProps & AriaT
 declare type ToggleButtonGroupRootSlotProps = HTMLChakraProps<"div", RecipeProps<"div">>;
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/toggle-button.d.ts

@@ -142,3 +142,12 @@ declare interface ToggleButtonRecipeProps extends RecipeVariantProps<typeof togg
 declare type ToggleButtonRootProps = HTMLChakraProps<"button", ToggleButtonRecipeProps>;
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/toolbar.d.ts

@@ -0,0 +1,96 @@
+import { FC } from 'react';
+import { HTMLChakraProps } from '@chakra-ui/react';
+import { RecipeDefinition } from '@chakra-ui/react';
+import { RecipeProps } from '@chakra-ui/react';
+import { RecipeVariantProps } from '@chakra-ui/react';
+import { Ref } from 'react';
+import { ToolbarProps as ToolbarProps_2 } from 'react-aria-components';
+import { UnstyledProp } from '@chakra-ui/react';
+
+declare type DefaultExcludedProps = "css" | "asChild" | "as";
+
+export declare const Toolbar: ToolbarComponent;
+
+export declare type ToolbarComponent = FC<ToolbarProps>;
+
+export declare interface ToolbarProps extends Omit<ToolbarSlotProps, DefaultExcludedProps | "orientation" | "children" | "slot">, Omit<ToolbarProps_2, "orientation" | "className" | "style"> {
+    /**
+     * The orientation of the toolbar.
+     * Supports responsive values for different breakpoints.
+     * @default "horizontal"
+     */
+    orientation?: RecipeVariantProps<typeof toolbarRecipe>["orientation"];
+    /**
+     * The size of the toolbar.
+     * @default "md"
+     */
+    size?: RecipeVariantProps<typeof toolbarRecipe>["size"];
+    /**
+     * The visual variant of the toolbar.
+     * @default "plain"
+     */
+    variant?: RecipeVariantProps<typeof toolbarRecipe>["variant"];
+    ref?: Ref<HTMLDivElement>;
+}
+
+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: "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}";
+};
+};
+}>;
+
+/**
+ * Base recipe props interface that combines Chakra UI's recipe props
+ * with the unstyled prop option for the toolbar recipe.
+ */
+declare interface ToolbarRecipeProps extends RecipeProps<typeof toolbarRecipe>, 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 ToolbarSlotProps extends Omit<HTMLChakraProps<"div", ToolbarRecipeProps>, "translate"> {
+    translate?: "yes" | "no";
+}
+
+export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/tooltip.d.ts

@@ -130,3 +130,12 @@ declare interface TooltipRootProps extends HTMLChakraProps<"div", TooltipRecipeP
 declare type TooltipVariantProps = ExcludePolymorphicFromProps<TooltipRootProps & RecipeVariantProps<typeof tooltipRecipe> & TooltipProps_2>;
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/utils.d.ts

@@ -0,0 +1,164 @@
+import { BaseText } from 'slate';
+import { Descendant } from 'slate';
+import { Editor } from 'slate';
+import { ReactElement } from 'react';
+import { RenderElementProps } from 'slate-react';
+import { RenderLeafProps } from 'slate-react';
+
+declare const BLOCK_TAGS: {
+    readonly blockquote: "block-quote";
+    readonly p: "paragraph";
+    readonly pre: "code";
+    readonly h1: "heading-one";
+    readonly h2: "heading-two";
+    readonly h3: "heading-three";
+    readonly h4: "heading-four";
+    readonly h5: "heading-five";
+    readonly ul: "bulleted-list";
+    readonly ol: "numbered-list";
+    readonly li: "list-item";
+    readonly a: "link";
+};
+
+declare type BlockType = (typeof blockTypes)[number] | "paragraph";
+
+/**
+ * Available block types for text style detection
+ *
+ * Used by:
+ * - hooks/useToolbarState.ts: Detects currently active block type in editor
+ * - Excludes "paragraph" as it's the default/fallback type
+ */
+declare const blockTypes: readonly ["heading-one", "heading-two", "heading-three", "heading-four", "heading-five", "block-quote"];
+
+export declare const createEmptyValue: () => Descendant[];
+
+/**
+ * Creates a block type from heading level
+ */
+export declare function createHeadingBlockType(level: number): BlockType | null;
+
+export declare interface CustomElement {
+    type: ElementFormat;
+    children: Descendant[];
+    align?: string;
+    url?: string;
+    htmlAttributes?: Record<string, string>;
+}
+
+export declare interface CustomText extends BaseText {
+    bold?: boolean;
+    code?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    superscript?: boolean;
+    subscript?: boolean;
+    strikethrough?: boolean;
+}
+
+declare const Element_2: ({ attributes, children, element, }: RenderElementProps) => ReactElement;
+export { Element_2 as Element }
+
+export declare type ElementFormat = (typeof BLOCK_TAGS)[keyof typeof BLOCK_TAGS];
+
+export declare const focusEditor: (editor: Editor) => void;
+
+export declare const fromHTML: (html: string) => Descendant[];
+
+/**
+ * Gets the heading level from a heading block type (1-6)
+ */
+export declare function getHeadingLevel(blockType: string): number | null;
+
+/**
+ * Gets a text style definition by its ID
+ */
+export declare function getTextStyleById(styleId: string): TextStyleDefinition | undefined;
+
+/**
+ * Gets all available text style IDs
+ */
+export declare function getTextStyleIds(): string[];
+
+/**
+ * Gets the display label for a text style ID
+ */
+export declare function getTextStyleLabel(styleId: string): string;
+
+/**
+ * Gets the text style properties for rendering
+ */
+export declare function getTextStyleProps(styleId: string): TextStyleDefinition["props"] | null;
+
+export declare const isBlockActive: (editor: Editor, format: ElementFormat) => boolean;
+
+/**
+ * Checks if a rich text HTML value is empty or contains no meaningful content
+ */
+export declare const isEmpty: (value: string) => boolean;
+
+/**
+ * Determines if a block type is a heading
+ */
+export declare function isHeadingType(blockType: string): boolean;
+
+export declare const isMarkActive: (editor: Editor, format: string) => boolean;
+
+/**
+ * Checks if a style ID is a valid text style
+ */
+export declare function isValidTextStyle(styleId: string): boolean;
+
+export declare const Leaf: ({ attributes, children, leaf, }: RenderLeafProps) => ReactElement;
+
+export declare const resetEditor: (editor: Editor, value: string) => void;
+
+export declare const Softbreaker: {
+    placeholderCharacter: string;
+    serialize: (string: string) => string;
+    deserialize: (string: string) => string;
+};
+
+/**
+ * Text style definitions for rich text editor block formatting
+ *
+ * Used by:
+ * - components/rich-text-toolbar.tsx: Renders text style dropdown menu with these options
+ * - hooks/useToolbarState.ts: Manages current text style state and selection logic
+ * - utils/text-style-utils.ts: Helper functions for text style operations
+ * - utils/validation-utils.ts: Validates if block types are supported
+ *
+ * Purpose:
+ * - Centralizes all available text styles and their visual properties
+ * - Maps block type IDs to user-friendly labels and Chakra UI styling props
+ * - Ensures consistent styling across the editor and UI controls
+ */
+declare interface TextStyleDefinition {
+    id: string;
+    label: string;
+    props: {
+        textStyle: string;
+        fontWeight: string;
+    };
+}
+
+export declare const toggleBlock: (editor: Editor, format: ElementFormat) => void;
+
+export declare const toggleMark: (editor: Editor, format: string) => void;
+
+export declare const toHTML: (value: Descendant[]) => string;
+
+export declare const validSlateStateAdapter: (value: unknown) => Descendant[];
+
+export declare const withLinks: (editor: Editor) => Editor;
+
+export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/dist/visually-hidden.d.ts

@@ -20,3 +20,12 @@ export declare interface VisuallyHiddenProps extends Omit<VisuallyHiddenProps_2,
 }
 
 export { }
+
+
+declare module "slate" {
+    interface CustomTypes {
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
+        Element: CustomElement;
+        Text: CustomText;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools/nimbus",
-  "version": "0.0.12-rc1",
+  "version": "0.0.12-rc3",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "type": "module",
@@ -46,50 +46,57 @@
     }
   },
   "dependencies": {
+    "@chakra-ui/react": "^3.26.0",
     "@emotion/is-prop-valid": "^1.3.1",
-    "@react-aria/interactions": "3.25.4",
+    "@react-aria/interactions": "3.25.5",
+    "escape-html": "^1.0.3",
+    "is-hotkey": "^0.2.0",
     "next-themes": "^0.4.6",
-    "react-aria": "3.41.1",
-    "react-aria-components": "1.10.1",
+    "react-aria": "3.43.1",
+    "react-aria-components": "1.12.1",
     "react-hotkeys-hook": "^4.6.1",
-    "react-stately": "3.39.0",
-    "react-use": "^17.5.1"
+    "react-stately": "3.41.0",
+    "react-use": "^17.5.1",
+    "slate": "^0.75.0",
+    "slate-history": "^0.113.1",
+    "slate-hyperscript": "^0.77.0",
+    "slate-react": "^0.75.0"
   },
   "devDependencies": {
-    "@chakra-ui/cli": "^3.17.0",
-    "@chakra-ui/react": "^3.22.0",
-    "@internationalized/date": "^3.8.0",
-    "@pandacss/types": "^0.53.6",
+    "@chakra-ui/cli": "^3.26.0",
+    "@internationalized/date": "^3.9.0",
     "@react-aria/optimize-locales-plugin": "1.1.5",
-    "@storybook/addon-a11y": "^9.0.18",
-    "@storybook/addon-docs": "^9.0.18",
-    "@storybook/addon-vitest": "^9.0.18",
-    "@storybook/react-vite": "^9.0.18",
+    "@storybook/addon-a11y": "^9.1.3",
+    "@storybook/addon-docs": "^9.1.3",
+    "@storybook/addon-vitest": "^9.1.3",
+    "@storybook/react-vite": "^9.1.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/escape-html": "^1.0.4",
+    "@types/is-hotkey": "^0.1.10",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "^4.4.1",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
-    "@vueless/storybook-dark-mode": "^9.0.6",
+    "@vueless/storybook-dark-mode": "^9.0.7",
     "apca-w3": "^0.1.9",
     "axe-core": "^4.10.2",
     "glob": "^11.0.3",
-    "playwright": "^1.52.0",
+    "playwright": "^1.55.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "rollup-plugin-tree-shakeable": "^1.0.3",
-    "storybook": "^9.0.18",
+    "storybook": "^9.1.3",
     "vite": "^7.0.5",
     "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4",
-    "@commercetools/nimbus-icons": "^0.0.11",
-    "@commercetools/nimbus-tokens": "^0.0.11"
+    "@commercetools/nimbus-tokens": "^0.0.11",
+    "@commercetools/nimbus-icons": "^0.0.11"
   },
   "peerDependencies": {
-    "@chakra-ui/react": "^3.22.0",
+    "@chakra-ui/react": "^3.26.0",
     "react": "^19.0.0",
     "@commercetools/nimbus-icons": "^0.0.11",
     "@commercetools/nimbus-tokens": "^0.0.11"
@@ -99,6 +106,7 @@
     "build:lib": "vite build",
     "dev": "vite build --watch",
     "test": "vitest",
+    "typecheck": "tsc --noEmit",
     "build-theme-typings": "pnpm chakra typegen ./src/theme/index.ts",
     "bundles:analyze": "ANALYZE_BUNDLE=true vite build",
     "storybook": "storybook dev -p 6006",

package/dist/chunks/Button-BLHXvl6m.es.js

@@ -1,80 +0,0 @@
-import { $ as D, a as F } from "./utils-C4ruQppN.es.js";
-import { $ as E } from "./ProgressBar-DrSArMks.es.js";
-import { $ as P } from "./LiveAnnouncer-CsPyaceH.es.js";
-import { $ as V } from "./Hidden-X9vuhkMZ.es.js";
-import { a as v, $ as C } from "./mergeProps-C0OSi2w3.es.js";
-import { $ as H } from "./filterDOMProps-HzsCnE3d.es.js";
-import x, { createContext as w, useRef as B, useEffect as N } from "react";
-import { $ as S } from "./useButton-Codl22pH.es.js";
-import { $ as T } from "./useFocusRing-BOPRvfsD.es.js";
-import { $ as A } from "./useHover-EutQBS3I.es.js";
-const I = /* @__PURE__ */ new Set([
-  "form",
-  "formAction",
-  "formEncType",
-  "formMethod",
-  "formNoValidate",
-  "formTarget",
-  "name",
-  "value"
-]), K = /* @__PURE__ */ w({}), O = /* @__PURE__ */ V(function(e, n) {
-  [e, n] = D(e, n, K), e = L(e);
-  let $ = e, { isPending: d } = $, { buttonProps: i, isPressed: g } = S(e, n), { focusProps: y, isFocused: s, isFocusVisible: b } = T(e), { hoverProps: h, isHovered: c } = A({
-    ...e,
-    isDisabled: e.isDisabled || d
-  }), l = {
-    isHovered: c,
-    isPressed: ($.isPressed || g) && !d,
-    isFocused: s,
-    isFocusVisible: b,
-    isDisabled: e.isDisabled || !1,
-    isPending: d ?? !1
-  }, u = F({
-    ...e,
-    values: l,
-    defaultClassName: "react-aria-Button"
-  }), r = v(i.id), f = v(), t = i["aria-labelledby"];
-  d && (t ? t = `${t} ${f}` : i["aria-label"] && (t = `${r} ${f}`));
-  let o = B(d);
-  return N(() => {
-    let m = {
-      "aria-labelledby": t || r
-    };
-    !o.current && s && d ? P(m, "assertive") : o.current && s && !d && P(m, "assertive"), o.current = d;
-  }, [
-    d,
-    s,
-    t,
-    r
-  ]), /* @__PURE__ */ x.createElement("button", {
-    ...H(e, {
-      propNames: I
-    }),
-    ...C(i, y, h),
-    ...u,
-    type: i.type === "submit" && d ? "button" : i.type,
-    id: r,
-    ref: n,
-    "aria-labelledby": t,
-    slot: e.slot || void 0,
-    "aria-disabled": d ? "true" : i["aria-disabled"],
-    "data-disabled": e.isDisabled || void 0,
-    "data-pressed": l.isPressed || void 0,
-    "data-hovered": c || void 0,
-    "data-focused": s || void 0,
-    "data-pending": d || void 0,
-    "data-focus-visible": b || void 0
-  }, /* @__PURE__ */ x.createElement(E.Provider, {
-    value: {
-      id: f
-    }
-  }, u.children));
-});
-function L(a) {
-  return a.isPending && (a.onPress = void 0, a.onPressStart = void 0, a.onPressEnd = void 0, a.onPressChange = void 0, a.onPressUp = void 0, a.onKeyDown = void 0, a.onKeyUp = void 0, a.onClick = void 0, a.href = void 0), a;
-}
-export {
-  K as $,
-  O as a
-};
-//# sourceMappingURL=Button-BLHXvl6m.es.js.map