@itwin/itwinui-react 3.0.0-dev.1 → 3.0.0-dev.11

package/cjs/core/SideNavigation/SideNavigation.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type SideNavigationProps = {
+type SideNavigationProps = {
     /**
      * Buttons shown in the top portion of sidenav.
      * Recommended to use `SidenavButton` components.
@@ -48,6 +48,22 @@ declare type SideNavigationProps = {
      * @default false
      */
     isSubmenuOpen?: boolean;
+    /**
+     * Passes props for SideNav wrapper.
+     */
+    wrapperProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props for SideNav content.
+     */
+    contentProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props for SideNav top.
+     */
+    topProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props for SideNav bottom.
+     */
+    bottomProps?: React.ComponentProps<'div'>;
 };
 /**
  * Left side navigation menu component.

package/cjs/core/SideNavigation/SideNavigation.js

@@ -1,41 +1,16 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.SideNavigation = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
-const index_js_2 = require("../Buttons/index.js");
-const index_js_3 = require("../Tooltip/index.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
+const IconButton_js_1 = require('../Buttons/IconButton.js');
+const Tooltip_js_1 = require('../Tooltip/Tooltip.js');
 /**
  * Left side navigation menu component.
  * @example
@@ -51,26 +26,135 @@ const index_js_3 = require("../Tooltip/index.js");
  * />
  */
 exports.SideNavigation = React.forwardRef((props, forwardedRef) => {
-    const { items, secondaryItems, expanderPlacement = 'top', className, isExpanded = false, onExpanderClick, submenu, isSubmenuOpen = false, ...rest } = props;
-    const [_isExpanded, _setIsExpanded] = React.useState(isExpanded);
-    React.useEffect(() => {
-        _setIsExpanded(isExpanded);
-    }, [isExpanded]);
-    const ExpandButton = (React.createElement(index_js_2.IconButton, { className: 'iui-sidenav-button iui-expand', onClick: React.useCallback(() => {
-            _setIsExpanded((expanded) => !expanded);
-            onExpanderClick === null || onExpanderClick === void 0 ? void 0 : onExpanderClick();
-        }, [onExpanderClick]) },
-        React.createElement(index_js_1.SvgChevronRight, null)));
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-side-navigation-wrapper', className), ref: forwardedRef, ...rest },
-        React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-side-navigation', {
-                'iui-expanded': _isExpanded,
-                'iui-collapsed': !_isExpanded,
-            }) },
-            expanderPlacement === 'top' && ExpandButton,
-            React.createElement(index_js_1.Box, { className: 'iui-sidenav-content' },
-                React.createElement(index_js_1.Box, { className: 'iui-top' }, items.map((sidenavButton, index) => !_isExpanded ? (React.createElement(index_js_3.Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton))),
-                React.createElement(index_js_1.Box, { className: 'iui-bottom' }, secondaryItems === null || secondaryItems === void 0 ? void 0 : secondaryItems.map((sidenavButton, index) => !_isExpanded ? (React.createElement(index_js_3.Tooltip, { content: sidenavButton.props.children, placement: 'right', key: index }, sidenavButton)) : (sidenavButton)))),
-            expanderPlacement === 'bottom' && ExpandButton),
-        submenu && (React.createElement(index_js_1.WithCSSTransition, { in: isSubmenuOpen, dimension: 'width', timeout: 200, classNames: 'iui' }, submenu))));
+  const {
+    items,
+    secondaryItems,
+    expanderPlacement = 'top',
+    className,
+    isExpanded = false,
+    onExpanderClick,
+    submenu,
+    isSubmenuOpen = false,
+    wrapperProps,
+    contentProps,
+    topProps,
+    bottomProps,
+    ...rest
+  } = props;
+  const [_isExpanded, _setIsExpanded] = React.useState(isExpanded);
+  React.useEffect(() => {
+    _setIsExpanded(isExpanded);
+  }, [isExpanded]);
+  const ExpandButton = React.createElement(
+    IconButton_js_1.IconButton,
+    {
+      label: 'Toggle icon labels',
+      'aria-expanded': _isExpanded,
+      className: 'iui-sidenav-button iui-expand',
+      onClick: React.useCallback(() => {
+        _setIsExpanded((expanded) => !expanded);
+        onExpanderClick?.();
+      }, [onExpanderClick]),
+    },
+    React.createElement(index_js_1.SvgChevronRight, null),
+  );
+  return React.createElement(
+    index_js_1.Box,
+    {
+      ...wrapperProps,
+      className: (0, classnames_1.default)(
+        'iui-side-navigation-wrapper',
+        wrapperProps?.className,
+      ),
+      ref: forwardedRef,
+    },
+    React.createElement(
+      index_js_1.Box,
+      {
+        as: 'div',
+        className: (0, classnames_1.default)(
+          'iui-side-navigation',
+          {
+            'iui-expanded': _isExpanded,
+            'iui-collapsed': !_isExpanded,
+          },
+          className,
+        ),
+        ...rest,
+      },
+      expanderPlacement === 'top' && ExpandButton,
+      React.createElement(
+        index_js_1.Box,
+        {
+          as: 'div',
+          ...contentProps,
+          className: (0, classnames_1.default)(
+            'iui-sidenav-content',
+            contentProps?.className,
+          ),
+        },
+        React.createElement(
+          index_js_1.Box,
+          {
+            as: 'div',
+            ...topProps,
+            className: (0, classnames_1.default)(
+              'iui-top',
+              topProps?.className,
+            ),
+          },
+          items.map((sidenavButton, index) =>
+            !_isExpanded
+              ? React.createElement(
+                  Tooltip_js_1.Tooltip,
+                  {
+                    content: sidenavButton.props.children,
+                    placement: 'right',
+                    key: index,
+                  },
+                  sidenavButton,
+                )
+              : sidenavButton,
+          ),
+        ),
+        React.createElement(
+          index_js_1.Box,
+          {
+            as: 'div',
+            ...bottomProps,
+            className: (0, classnames_1.default)(
+              'iui-bottom',
+              bottomProps?.className,
+            ),
+          },
+          secondaryItems?.map((sidenavButton, index) =>
+            !_isExpanded
+              ? React.createElement(
+                  Tooltip_js_1.Tooltip,
+                  {
+                    content: sidenavButton.props.children,
+                    placement: 'right',
+                    key: index,
+                  },
+                  sidenavButton,
+                )
+              : sidenavButton,
+          ),
+        ),
+      ),
+      expanderPlacement === 'bottom' && ExpandButton,
+    ),
+    submenu &&
+      React.createElement(
+        index_js_1.WithCSSTransition,
+        {
+          in: isSubmenuOpen,
+          dimension: 'width',
+          timeout: 200,
+          classNames: 'iui',
+        },
+        submenu,
+      ),
+  );
 });
 exports.default = exports.SideNavigation;

package/cjs/core/SideNavigation/SidenavButton.d.ts

@@ -1,6 +1,6 @@
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { ButtonProps } from '../Buttons/Button/Button.js';
-declare type SidenavButtonProps = {
+import type { ButtonProps } from '../Buttons/Button.js';
+type SidenavButtonProps = {
     /**
      * Whether the sidenav button is active,
      * i.e. the current page corresponds to this button.

package/cjs/core/SideNavigation/SidenavButton.js

@@ -1,45 +1,42 @@
-"use strict";
+'use strict';
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.SidenavButton = void 0;
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../Buttons/index.js");
+const tslib_1 = require('tslib');
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const Button_js_1 = require('../Buttons/Button.js');
 /**
  * Wrapper around Button to be used as SideNavigation items.
  * Label is hidden when sidenav is collapsed.
  */
 exports.SidenavButton = React.forwardRef((props, ref) => {
-    const { className, children, isActive = false, disabled = false, isSubmenuOpen = false, ...rest } = props;
-    return (React.createElement(index_js_1.Button, { className: (0, classnames_1.default)('iui-sidenav-button', { 'iui-submenu-open': isSubmenuOpen }, className), "data-iui-active": isActive, size: 'large', disabled: disabled, ref: ref, ...rest }, children));
+  const {
+    className,
+    children,
+    isActive = false,
+    disabled = false,
+    isSubmenuOpen = false,
+    ...rest
+  } = props;
+  return React.createElement(
+    Button_js_1.Button,
+    {
+      className: (0, classnames_1.default)(
+        'iui-sidenav-button',
+        { 'iui-submenu-open': isSubmenuOpen },
+        className,
+      ),
+      'data-iui-active': isActive,
+      size: 'large',
+      disabled: disabled,
+      ref: ref,
+      ...rest,
+    },
+    children,
+  );
 });
 exports.default = exports.SidenavButton;

package/cjs/core/SideNavigation/SidenavSubmenu.js

@@ -1,39 +1,14 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.SidenavSubmenu = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
 /**
  * Subcomponent to be used in the `submenu` prop of `SideNavigation`.
  * @example
@@ -43,8 +18,22 @@ const index_js_1 = require("../utils/index.js");
  * </SidenavSubmenu>
  */
 exports.SidenavSubmenu = React.forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-side-navigation-submenu', className), ref: ref, ...rest },
-        React.createElement(index_js_1.Box, { className: 'iui-side-navigation-submenu-content' }, children)));
+  const { children, className, ...rest } = props;
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)(
+        'iui-side-navigation-submenu',
+        className,
+      ),
+      ref: ref,
+      ...rest,
+    },
+    React.createElement(
+      index_js_1.Box,
+      { className: 'iui-side-navigation-submenu-content' },
+      children,
+    ),
+  );
 });
 exports.default = exports.SidenavSubmenu;

package/cjs/core/SideNavigation/SidenavSubmenuHeader.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type SidenavSubmenuHeaderProps = {
+type SidenavSubmenuHeaderProps = {
     /**
      * Actions shown at the end of the submenu label.
      */

package/cjs/core/SideNavigation/SidenavSubmenuHeader.js

@@ -1,39 +1,14 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.SidenavSubmenuHeader = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const index_js_1 = require("../utils/index.js");
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const React = tslib_1.__importStar(require('react'));
+const index_js_1 = require('../utils/index.js');
 /**
  * Header content for `SidenavSubmenu`. Supports truncated label and actions buttons.
  * @example
@@ -49,9 +24,28 @@ const index_js_1 = require("../utils/index.js");
  * </SidenavSubmenuHeader>
  */
 exports.SidenavSubmenuHeader = React.forwardRef((props, forwardedRef) => {
-    const { children, actions, className, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-side-navigation-submenu-header', className), ref: forwardedRef, ...rest },
-        React.createElement(index_js_1.Box, { className: 'iui-side-navigation-submenu-header-label' }, children),
-        actions && (React.createElement(index_js_1.Box, { className: 'iui-side-navigation-submenu-header-actions' }, actions))));
+  const { children, actions, className, ...rest } = props;
+  return React.createElement(
+    index_js_1.Box,
+    {
+      className: (0, classnames_1.default)(
+        'iui-side-navigation-submenu-header',
+        className,
+      ),
+      ref: forwardedRef,
+      ...rest,
+    },
+    React.createElement(
+      index_js_1.Box,
+      { className: 'iui-side-navigation-submenu-header-label' },
+      children,
+    ),
+    actions &&
+      React.createElement(
+        index_js_1.Box,
+        { className: 'iui-side-navigation-submenu-header-actions' },
+        actions,
+      ),
+  );
 });
 exports.default = exports.SidenavSubmenuHeader;

package/cjs/core/SkipToContentLink/SkipToContentLink.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-declare type SkipToContentLinkProps = {
+type SkipToContentLinkProps = {
     /**
      * The id of the main content that the link directs to. Don't forget the #!
      */

package/cjs/core/SkipToContentLink/SkipToContentLink.js

@@ -1,39 +1,14 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
 exports.SkipToContentLink = void 0;
+const tslib_1 = require('tslib');
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const index_js_1 = require("../utils/index.js");
+const React = tslib_1.__importStar(require('react'));
+const classnames_1 = tslib_1.__importDefault(require('classnames'));
+const index_js_1 = require('../utils/index.js');
 /**
  * `SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to.
  * Provides a shortcut to the main content of the page without navigating through the header, etc.
@@ -43,7 +18,19 @@ const index_js_1 = require("../utils/index.js");
  * <body><SkipToContentLink href='#main-content-id'>{localizedLabel}</SkipToContentLink> ... </body>
  */
 exports.SkipToContentLink = React.forwardRef((props, ref) => {
-    const { children = 'Skip to main content', className, ...rest } = props;
-    return (React.createElement(index_js_1.Box, { as: 'a', ref: ref, className: (0, classnames_1.default)('iui-skip-to-content-link', className), ...rest }, children));
+  const { children = 'Skip to main content', className, ...rest } = props;
+  return React.createElement(
+    index_js_1.Box,
+    {
+      as: 'a',
+      ref: ref,
+      className: (0, classnames_1.default)(
+        'iui-skip-to-content-link',
+        className,
+      ),
+      ...rest,
+    },
+    children,
+  );
 });
 exports.default = exports.SkipToContentLink;

package/cjs/core/Slider/Slider.d.ts

@@ -1,16 +1,12 @@
 import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
-import type { TooltipProps } from '../Tooltip/Tooltip.js';
+import type { Tooltip } from '../Tooltip/Tooltip.js';
 /**
  * Determines which segments are shown with color.
  */
-export declare type TrackDisplayMode = 'auto' | 'none' | 'odd-segments' | 'even-segments';
-export declare type SliderProps = {
-    /**
-     * Set focus on first thumb in slider element.
-     * @default false
-     */
-    setFocus?: boolean;
+export type TrackDisplayMode = 'auto' | 'none' | 'odd-segments' | 'even-segments';
+type TooltipProps = React.ComponentProps<typeof Tooltip>;
+export type SliderProps = {
     /**
      * Minimum slider value.
      * @default 0
@@ -72,6 +68,30 @@ export declare type SliderProps = {
      * Additional props for container `<div>` that hold the slider rail, thumbs, and tracks.
      */
     railContainerProps?: React.HTMLAttributes<HTMLDivElement>;
+    /**
+     * Allows props to be passed for slider-min
+     */
+    minProps?: React.ComponentProps<'span'>;
+    /**
+     * Allows props to be passed for slider-max
+     */
+    maxProps?: React.ComponentProps<'span'>;
+    /**
+     * Allows props to be passed for slider-rail
+     */
+    railProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for slider-track
+     */
+    trackProps?: React.ComponentProps<'div'>;
+    /**
+     * Allows props to be passed for slider-tick
+     */
+    tickProps?: React.ComponentProps<'span'>;
+    /**
+     * Allows props to be passed for slider-ticks
+     */
+    ticksProps?: React.ComponentProps<'div'>;
     /**
      * Defines the allowed behavior when moving Thumbs when multiple Thumbs are
      * shown. It controls if a Thumb movement should be limited to only move in
@@ -106,7 +126,7 @@ export declare type SliderProps = {
  * @example
  * <Slider values={[10]} min={0} max={60} disabled />
  * <Slider values={[10, 20]} min={0} max={50} step={2} />
- * <Slider values={[10, 20, 30, 40]} min={0} max={60} setFocus
+ * <Slider values={[10, 20, 30, 40]} min={0} max={60}
  *   thumbMode='allow-crossing' />
  */
 export declare const Slider: PolymorphicForwardRefComponent<"div", SliderProps>;