@commercetools/nimbus 0.0.9-rc8 → 0.0.10

package/dist/components/select.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("../chunks/select-7cuL-dmI.js");exports.Select=e.Select;exports._SelectOption=e.SelectOption;exports._SelectOptionGroup=e.SelectOptionGroup;exports._SelectOptions=e.SelectOptions;exports._SelectRoot=e.SelectRoot;
+"use strict";const e=require("../chunks/select-CwzhqF_g.cjs.js");exports.Select=e.Select;exports._SelectOption=e.SelectOption;exports._SelectOptionGroup=e.SelectOptionGroup;exports._SelectOptions=e.SelectOptions;exports._SelectRoot=e.SelectRoot;
 //# sourceMappingURL=select.cjs.map

package/dist/components/select.es.js

@@ -1,4 +1,4 @@
-import { S as o, c as a, d as c, b as s, a as S } from "../chunks/select-DH4OUn_y.js";
+import { S as o, c as a, d as c, b as s, a as S } from "../chunks/select-CU2u2b6U.es.js";
 export {
   o as Select,
   a as _SelectOption,

package/dist/components/simple-grid.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("../chunks/simple-grid-CHgTayx6.js");exports.SimpleGrid=e.SimpleGrid;
+"use strict";const e=require("../chunks/simple-grid-CHgTayx6.cjs.js");exports.SimpleGrid=e.SimpleGrid;
 //# sourceMappingURL=simple-grid.cjs.map

package/dist/components/simple-grid.es.js

@@ -1,4 +1,4 @@
-import { S as i } from "../chunks/simple-grid-CFOP9g2P.js";
+import { S as i } from "../chunks/simple-grid-CFOP9g2P.es.js";
 export {
   i as SimpleGrid
 };

package/dist/components/stack.cjs

@@ -1,2 +1,2 @@
-"use strict";const t=require("../chunks/stack-wFUhYQQb.js");exports.Stack=t.Stack;
+"use strict";const t=require("../chunks/stack-wFUhYQQb.cjs.js");exports.Stack=t.Stack;
 //# sourceMappingURL=stack.cjs.map

package/dist/components/stack.es.js

@@ -1,4 +1,4 @@
-import { S as r } from "../chunks/stack-__ugxVHD.js";
+import { S as r } from "../chunks/stack-__ugxVHD.es.js";
 export {
   r as Stack
 };

package/dist/components/switch.cjs

@@ -1,2 +1,2 @@
-"use strict";const t=require("../chunks/switch-CnbvTSF9.js");exports.Switch=t.Switch;
+"use strict";const t=require("../chunks/switch-CUwyaYts.cjs.js");exports.Switch=t.Switch;
 //# sourceMappingURL=switch.cjs.map

package/dist/components/switch.es.js

@@ -1,4 +1,4 @@
-import { S as t } from "../chunks/switch-DdmbHa5R.js";
+import { S as t } from "../chunks/switch-DgbFw1kA.es.js";
 export {
   t as Switch
 };

package/dist/components/tag-group.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("../chunks/tag-group-B6w2MEyf.js");exports.TagGroup=e.TagGroup;
+"use strict";const e=require("../chunks/tag-group-DCgEBbmh.cjs.js");exports.TagGroup=e.TagGroup;
 //# sourceMappingURL=tag-group.cjs.map

package/dist/components/tag-group.es.js

@@ -1,4 +1,4 @@
-import { T as a } from "../chunks/tag-group-CdLfw2gL.js";
+import { T as a } from "../chunks/tag-group-Cc6S9cbR.es.js";
 export {
   a as TagGroup
 };

package/dist/components/text-input.cjs

@@ -1,2 +1,2 @@
-"use strict";const t=require("../chunks/text-input-CtJ2FHJ3.js");exports.TextInput=t.TextInput;
+"use strict";const t=require("../chunks/text-input-fAoATAAX.cjs.js");exports.TextInput=t.TextInput;
 //# sourceMappingURL=text-input.cjs.map

package/dist/components/text-input.es.js

@@ -1,4 +1,4 @@
-import { T as o } from "../chunks/text-input-SYXEV4sT.js";
+import { T as o } from "../chunks/text-input-uhPCsxsK.es.js";
 export {
   o as TextInput
 };

package/dist/components/text.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("../chunks/text-BjzNgHxv.js");exports.Text=e.Text;
+"use strict";const e=require("../chunks/text-CEFwlX3E.cjs.js");exports.Text=e.Text;
 //# sourceMappingURL=text.cjs.map

package/dist/components/text.es.js

@@ -1,4 +1,4 @@
-import { T as r } from "../chunks/text-MzQiG_1j.js";
+import { T as r } from "../chunks/text-CYoFrI2I.es.js";
 export {
   r as Text
 };

package/dist/components/time-input.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("../chunks/time-input-sjvN5iZ-.js");exports.TimeInput=e.TimeInput;
+"use strict";const e=require("../chunks/time-input-BwtzFUWN.cjs.js");exports.TimeInput=e.TimeInput;
 //# sourceMappingURL=time-input.cjs.map

package/dist/components/time-input.es.js

@@ -1,4 +1,4 @@
-import { T as o } from "../chunks/time-input-DCJYjKRY.js";
+import { T as o } from "../chunks/time-input-ClF6Qx1T.es.js";
 export {
   o as TimeInput
 };

package/dist/components/toggle-button-group.cjs

@@ -1,2 +1,2 @@
-"use strict";const o=require("../chunks/toggle-button-group-D-3UQLdL.js");exports.ToggleButtonGroup=o.ToggleButtonGroup;exports._ToggleButtonGroupButton=o.ToggleButtonGroupButton;exports._ToggleButtonGroupRoot=o.ToggleButtonGroupRoot;
+"use strict";const o=require("../chunks/toggle-button-group-BOdTMLPd.cjs.js");exports.ToggleButtonGroup=o.ToggleButtonGroup;exports._ToggleButtonGroupButton=o.ToggleButtonGroupButton;exports._ToggleButtonGroupRoot=o.ToggleButtonGroupRoot;
 //# sourceMappingURL=toggle-button-group.cjs.map

package/dist/components/toggle-button-group.es.js

@@ -1,4 +1,4 @@
-import { T as u, b as g, a as r } from "../chunks/toggle-button-group-bjkXTCxu.js";
+import { T as u, b as g, a as r } from "../chunks/toggle-button-group-BDzXfqxK.es.js";
 export {
   u as ToggleButtonGroup,
   g as _ToggleButtonGroupButton,

package/dist/components/tooltip.cjs

@@ -1,2 +1,2 @@
-"use strict";const o=require("../chunks/tooltip-C-K5iatf.js"),e=require("../chunks/make-element-focusable-ijZC9F3C.js");exports.Tooltip=o.Tooltip;exports._TooltipContent=o.TooltipContent;exports._TooltipRoot=o.TooltipRoot;exports.MakeElementFocusable=e.MakeElementFocusable;
+"use strict";const o=require("../chunks/tooltip-p-s9eZWV.cjs.js"),e=require("../chunks/make-element-focusable-zhwaMi8v.cjs.js");exports.Tooltip=o.Tooltip;exports._TooltipContent=o.TooltipContent;exports._TooltipRoot=o.TooltipRoot;exports.MakeElementFocusable=e.MakeElementFocusable;
 //# sourceMappingURL=tooltip.cjs.map

package/dist/components/tooltip.es.js

@@ -1,5 +1,5 @@
-import { b as a, a as e, T as l } from "../chunks/tooltip-DvoZxHgo.js";
-import { M as s } from "../chunks/make-element-focusable-_kgqlXGc.js";
+import { b as a, a as e, T as l } from "../chunks/tooltip-MQm4h_hA.es.js";
+import { M as s } from "../chunks/make-element-focusable-diGDWsyp.es.js";
 export {
   s as MakeElementFocusable,
   a as Tooltip,

package/dist/components/visually-hidden.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("../chunks/visually-hidden-CRnniCks.js");exports.VisuallyHidden=e.VisuallyHidden;
+"use strict";const e=require("../chunks/visually-hidden-XscDHjYa.cjs.js");exports.VisuallyHidden=e.VisuallyHidden;
 //# sourceMappingURL=visually-hidden.cjs.map

package/dist/components/visually-hidden.es.js

@@ -1,4 +1,4 @@
-import { V as e } from "../chunks/visually-hidden-7U4LGJiI.js";
+import { V as e } from "../chunks/visually-hidden-DJxzCHM4.es.js";
 export {
   e as VisuallyHidden
 };

package/dist/components.d.ts

@@ -9,6 +9,7 @@ import { AriaButtonProps } from 'react-aria';
 import { AriaCheckboxProps } from 'react-aria';
 import { AriaLinkOptions } from 'react-aria';
 import { AriaNumberFieldProps } from 'react-aria';
+import { AriaProgressBarProps } from 'react-aria';
 import { AriaToggleButtonGroupProps } from 'react-aria';
 import { AriaToggleButtonProps } from 'react-aria';
 import { AutocompleteProps } from 'react-aria-components';
@@ -31,7 +32,6 @@ import { DetailedHTMLProps } from 'react';
 import { Dialog as Dialog_2 } from '@chakra-ui/react';
 import { DisclosureGroupProps as DisclosureGroupProps_2 } from './accordion.types';
 import { DisclosureProps } from 'react-aria-components';
-import { Dispatch } from 'react';
 import { FC } from 'react';
 import { Flex } from '@chakra-ui/react';
 import { FocusableOptions } from 'react-aria';
@@ -75,7 +75,7 @@ import { SelectOptionProps as SelectOptionProps_2 } from './select.types';
 import { SelectOptionsProps as SelectOptionsProps_2 } from './select.types';
 import { SelectProps } from 'react-aria-components';
 import { SelectRootProps as SelectRootProps_2 } from './select.types';
-import { SetStateAction } from 'react';
+import { SeparatorProps } from 'react-aria';
 import { SimpleGridProps as SimpleGridProps_2 } from '@chakra-ui/react';
 import { SlotRecipeDefinition } from '@chakra-ui/react';
 import { SlotRecipeVariantRecord } from '@chakra-ui/react';
@@ -797,7 +797,7 @@ declare type CheckboxVariantProps = CheckboxRootProps & RecipeVariantProps<typeo
  */
 export declare const Code: ForwardRefExoticComponent<CodeProps & RefAttributes<HTMLElement>>;
 
-declare interface ColorModeProviderProps extends ThemeProviderProps {
+export declare interface ColorModeProviderProps extends ThemeProviderProps {
 }
 
 export declare const ComboBox: {
@@ -1253,6 +1253,84 @@ export declare type DisclosureItemProps = AccordionItemProps & {
     onExpandedChange?: (isExpanded: boolean) => void;
 };
 
+/**
+ * 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;
+};
+
 declare type ExcludedNumberInputProps = "asChild" | "onChange";
 
 /**
@@ -1279,6 +1357,12 @@ declare type ExcludedProps_3 = "as" | "asChild" | "style" | "createCalendar";
  */
 declare type ExcludedProps_4 = "validationState" | "label" | "description" | "errorMessage" | "css" | "colorScheme" | "unstyled" | "recipe" | "as" | "asChild";
 
+/**
+ * Additional properties we want to exclude from the ProgressBar component.
+ * These are chakra-ui props we don't want exposed.
+ */
+declare type ExcludedProps_5 = "css" | "unstyled" | "as" | "asChild";
+
 /**
  * List of props that should be excluded from the root props when combining with ARIA props
  */
@@ -1842,9 +1926,82 @@ declare interface MultilineTextInputRecipeProps extends RecipeVariantProps<typeo
 
 declare type MultilineTextInputRootSlotProps = HTMLChakraProps<"textarea", MultilineTextInputRecipeProps>;
 
-export declare function NimbusProvider({ children, locale, ...props }: ColorModeProviderProps & {
+export declare function NimbusProvider({ children, locale, router, ...props }: NimbusProviderProps): JSX.Element;
+
+export declare interface NimbusProviderProps extends ColorModeProviderProps {
+    /**
+     * Optional locale for internationalization.
+     * Expects a [BCP47 language tag](https://en.wikipedia.org/wiki/IETF_language_tag) (e.g., 'en-US', 'de-DE', 'fr-FR').
+     * Defaults to the user's browser locale if not provided.
+     */
     locale?: string;
-}): JSX.Element;
+    /**
+     * Optional router configuration object for client-side navigation.
+     * When provided, all nimbus components with href props will use client-side routing.
+     * - `navigate`: Function to programmatically navigate to routes.
+     * - `useHref`: Optional function to transform hrefs (useful for base paths).
+     */
+    router?: NimbusRouterConfig | TypedNimbusRouterConfig;
+}
+
+export declare interface NimbusRouterConfig {
+    /**
+     * Function to programmatically navigate to a new route.
+     * This should be the navigate function from your client-side router.
+     *
+     * @example
+     * // React Router
+     * const navigate = useNavigate();
+     * <NimbusProvider router={{ navigate }} />
+     *
+     * @example
+     * // Next.js App Router
+     * const router = useRouter();
+     * <NimbusProvider router={{ navigate: router.push }} />
+     */
+    navigate: (href: string, routerOptions?: any) => void;
+    /**
+     * Optional function to transform hrefs before they are used.
+     * Useful for prepending base paths or other URL transformations.
+     *
+     * @example
+     * // Next.js with basePath
+     * const useHref = (href: string) => process.env.BASE_PATH + href;
+     * <NimbusProvider router={{ navigate, useHref }} />
+     */
+    useHref?: (href: string) => string;
+}
+
+/**
+ * TypeScript module augmentation for Nimbus router configuration.
+ *
+ * This allows consumers to extend the router configuration types
+ * to match their specific router framework, providing better type safety.
+ *
+ * TODO: Document this in an mdx-file, available to consumers via the docs-app
+ *
+ * @example
+ * // For React Router
+ * import type { NavigateOptions } from 'react-router-dom';
+ *
+ * declare module '@commercetools/nimbus' {
+ *   interface NimbusRouterOptionsBase {
+ *     routerOptions?: NavigateOptions;
+ *   }
+ * }
+ *
+ * @example
+ * // For Next.js App Router
+ * import type { AppRouterInstance } from 'next/dist/shared/lib/app-router-context';
+ *
+ * declare module '@commercetools/nimbus' {
+ *   interface NimbusRouterOptionsBase {
+ *     routerOptions?: Parameters<AppRouterInstance['push']>[1];
+ *   }
+ * }
+ */
+export declare interface NimbusRouterOptionsBase {
+}
 
 /**
  * NumberInput
@@ -2001,6 +2158,159 @@ export declare const PasswordInput: ForwardRefExoticComponent<Omit<PasswordInput
 export declare interface PasswordInputProps extends Omit<TextInputProps, "type"> {
 }
 
+/**
+ * ProgressBar
+ * ============================================================
+ * Displays progress towards completion of a task or process
+ *
+ * Features:
+ *
+ * - Supports both determinate (with value) and indeterminate (loading) states
+ * - Two visual variants: solid (gradient) and contrast (monochromatic)
+ * - Three layouts: minimal, inline, and stacked
+ * - Configurable value formatting with internationalization support
+ * - Full accessibility support with ARIA attributes
+ * - Allows forwarding refs to the underlying DOM element
+ * - Accepts all native HTML div attributes
+ * - Supports variants, sizes, etc. configured in the recipe
+ * - Allows overriding styles by using style-props
+ */
+export declare const ProgressBar: {
+    (props: ProgressBarProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Main props interface for the ProgressBar component.
+ * Extends ProgressBarRootProps to include root props, variant props, and aria props,
+ * while adding custom props for label display and formatting.
+ */
+export declare interface ProgressBarProps extends Omit<ProgressBarRootProps, ExcludedProps_5> {
+    /**
+     * Ref forwarding to the root element
+     */
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Whether the progress bar represents an active, ongoing process.
+     * Set to `true` for dynamic progress (e.g., file uploads, downloads).
+     * Set to `false` for static progress indicators (e.g., step 3 of 5 in a wizard).
+     * @default true
+     */
+    isDynamic?: boolean;
+    /**
+     * Format options for the progress bar.
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
+     */
+    formatOptions: ProgressBarRootProps["formatOptions"];
+}
+
+/**
+ * Base recipe props interface that combines Chakra UI's recipe props
+ * with the unstyled prop option for the div element.
+ */
+declare interface ProgressBarRecipeProps extends RecipeProps<"div">, UnstyledProp {
+}
+
+/**
+ * Root props interface that extends Chakra's HTML props with our recipe props,
+ * aria props, and data attributes.
+ */
+declare interface ProgressBarRootProps extends HTMLChakraProps<"div", ProgressBarRecipeProps>, Omit<RecipeVariantProps<typeof progressBarSlotRecipe>, "isIndeterminate">, AriaProgressBarProps {
+    [key: `data-${string}`]: string;
+}
+
+/**
+ * Recipe configuration for the ProgressBar component.
+ * Defines the styling variants and base styles using Chakra UI's slot recipe system.
+ */
+declare const progressBarSlotRecipe: SlotRecipeDefinition<"fill" | "label" | "track" | "value" | "root", {
+size: {
+"2xs": {
+root: {
+"--progress-bar-radius": "{radii.300}";
+"--progress-bar-font-size": "{fontSizes.350}";
+"--progress-bar-height": "{sizes.300}";
+"--progress-bar-line-height": "{fontSizes.500}";
+};
+};
+md: {
+root: {
+"--progress-bar-radius": "{radii.600}";
+"--progress-bar-font-size": "{fontSizes.400}";
+"--progress-bar-height": "{sizes.600}";
+"--progress-bar-line-height": "{fontSizes.600}";
+};
+};
+};
+isDynamic: {
+true: {
+fill: {
+"--progress-bar-animation": "gradient-shimmer 4s ease-in-out infinite";
+"&[data-complete='true']": {
+"--progress-bar-animation": "none";
+};
+};
+};
+};
+isIndeterminate: {
+true: {
+fill: {
+"--progress-bar-animation": "progress-indeterminate 2s ease-in-out infinite";
+width: "40% !important";
+};
+};
+};
+variant: {
+solid: {
+root: {
+"--progress-bar-text-color": "{colors.neutral.12}";
+"--progress-bar-track-bg": "{colors.neutralAlpha.3}";
+};
+};
+contrast: {
+root: {
+"--progress-bar-text-color": "{colors.colorPalette.contrast}";
+"--progress-bar-track-bg": "{colors.colorPalette.contrast/15}";
+};
+fill: {
+bgImage: "linear-gradient(90deg, {colors.colorPalette.contrast/25}, {colors.colorPalette.contrast}, {colors.colorPalette.contrast/25})";
+};
+};
+};
+layout: {
+minimal: {
+label: {
+display: "none";
+};
+value: {
+display: "none";
+};
+};
+inline: {
+root: {
+flexDirection: "row";
+alignItems: "center";
+gap: "400";
+};
+track: {
+flex: number;
+};
+};
+stacked: {
+root: {
+flexDirection: "column";
+gap: "200";
+};
+text: {
+display: "flex";
+justifyContent: "space-between";
+alignItems: "center";
+width: "100%";
+};
+};
+};
+}>;
+
 declare type RadioGroupProps = Omit<RadioGroupProps_2, "children"> & {
     children?: React.ReactNode;
 };
@@ -2060,6 +2370,10 @@ gap: "400";
 };
 }>;
 
+export declare type RouterOptions = NimbusRouterOptionsBase extends {
+    routerOptions: any;
+} ? NimbusRouterOptionsBase["routerOptions"] : any;
+
 export declare const Select: {
     Root: ForwardRefExoticComponent<SelectRootProps_2 & RefAttributes<HTMLDivElement>>;
     Options: {
@@ -2644,15 +2958,10 @@ declare interface TooltipRootProps extends HTMLChakraProps<"div", TooltipRecipeP
  */
 declare type TooltipVariantProps = ExcludePolymorphicFromProps<TooltipRootProps & RecipeVariantProps<typeof tooltipRecipe> & TooltipProps_2>;
 
-export declare function useColorMode(): {
-    colorMode: string | undefined;
-    setColorMode: Dispatch<SetStateAction<string>>;
-    toggleColorMode: () => void;
-};
-
-export declare function useColorModeValue<T>(light: T, dark: T): T;
-
-export declare function useColorScheme(): string;
+export declare interface TypedNimbusRouterConfig {
+    navigate: (href: string, routerOptions?: RouterOptions) => void;
+    useHref?: (href: string) => string;
+}
 
 export declare const VisuallyHidden: {
     (props: VisuallyHiddenProps): JSX.Element;

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 { }