@mezzanine-ui/react 0.16.0 → 1.0.0-beta.0

package/Select/index.d.ts

@@ -1,9 +1,16 @@
 export * from './typings';
 export { SelectControlContext } from './SelectControlContext';
-export { SelectTriggerProps, SelectTriggerInputProps, default as SelectTrigger, } from './SelectTrigger';
-export { SelectTriggerTagsProps, default as SelectTriggerTags, } from './SelectTriggerTags';
-export { SelectProps, default } from './Select';
-export { OptionProps, default as Option } from './Option';
-export { MenuItemGroupProps as OptionGroupProps, default as OptionGroup, } from '../Menu/MenuItemGroup';
-export { TreeSelectProps, default as TreeSelect } from './TreeSelect';
-export { AutoCompleteProps, default as AutoComplete } from './AutoComplete';
+export { default as SelectTrigger } from './SelectTrigger';
+export type { SelectTriggerProps, SelectTriggerInputProps, } from './SelectTrigger';
+export { default as SelectTriggerTags } from './SelectTriggerTags';
+export type { SelectTriggerTagsProps } from './SelectTriggerTags';
+export type { SelectProps } from './Select';
+export { default } from './Select';
+export { default as Option } from './Option';
+export type { OptionProps } from './Option';
+export { default as OptionGroup } from '../Menu/MenuItemGroup';
+export type { MenuItemGroupProps as OptionGroupProps } from '../Menu/MenuItemGroup';
+export type { TreeSelectProps } from './TreeSelect';
+export { default as TreeSelect } from './TreeSelect';
+export type { AutoCompleteProps } from './AutoComplete';
+export { default as AutoComplete } from './AutoComplete';

package/Select/typings.d.ts

@@ -1,3 +1,8 @@
+import { ReactElement, Ref } from 'react';
+import Icon, { IconProps } from '../Icon';
+import { SelectTriggerType } from '@mezzanine-ui/core/select';
+import { TextFieldProps } from '../TextField';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 export interface SelectValue<T = string> {
     id: T;
     name: string;
@@ -10,3 +15,97 @@ export interface SelectControl<T = string> {
     value: SelectValue<T>[] | SelectValue<T> | null;
     onChange: (v: SelectValue<T> | null) => SelectValue<T>[] | SelectValue<T> | null;
 }
+export type SelectTriggerInputProps = Omit<NativeElementPropsWithoutKeyAndRef<'input'>, 'autoComplete' | 'children' | 'defaultValue' | 'disabled' | 'required' | 'type' | 'value' | `aria-${'autocomplete' | 'disabled' | 'haspopup' | 'multiline' | 'required'}`>;
+export interface SelectTriggerBaseProps extends Omit<TextFieldProps, 'active' | 'children' | 'defaultChecked' | 'suffix' | 'typing' | 'disabled' | 'readonly'> {
+    /**
+     * Controls the chevron icon layout.
+     */
+    active?: boolean;
+    /**
+     * Whether the input is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * force hide suffixAction icons
+     */
+    forceHideSuffixActionIcon?: boolean;
+    /**
+     * The ref for SelectTrigger root.
+     */
+    innerRef?: Ref<HTMLDivElement>;
+    /**
+     * Other props you may provide to input element.
+     */
+    inputProps?: SelectTriggerInputProps;
+    /**
+     * The ref object for input element.
+     */
+    inputRef?: Ref<HTMLInputElement>;
+    /**
+     * The click handler for the cross icon on tags
+     */
+    onTagClose?: (target: SelectValue) => void;
+    /** Placeholder text when not selected */
+    placeholder?: string;
+    /**
+     * Whether the input is readonly.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Whether the input is required.
+     * @default false
+     */
+    required?: boolean;
+    searchText?: string;
+    showTextInputAfterTags?: boolean;
+    /** Suffix icon click event handler */
+    suffixAction?: VoidFunction;
+    /** Customize suffix icon */
+    suffixActionIcon?: ReactElement<IconProps, typeof Icon>;
+    /** Type default/error of the SelectTrigger */
+    type?: SelectTriggerType;
+}
+export type SelectTriggerSingleProps = SelectTriggerBaseProps & {
+    /**
+     * Controls the layout of trigger.
+     * @default single
+     */
+    mode?: 'single';
+    /**
+     * Only available on multiple selector
+     */
+    overflowStrategy?: never;
+    /**
+     * The value of selection.
+     * @default undefined
+     */
+    value?: SelectValue;
+    /**
+     * Provide if you have a customize value rendering logic.
+     * By default will have a comma between values.
+     */
+    renderValue?: (value?: SelectValue | null) => string;
+};
+export type SelectTriggerMultipleProps = SelectTriggerBaseProps & {
+    /**
+     * Controls the layout of trigger.
+     * @default single
+     */
+    mode: 'multiple';
+    /**
+     * Tag overflow strategy:
+     * - counter: collapse extra tags into a counter tag showing the remaining count.
+     * - wrap: wrap to new lines to display all tags.
+     * @default counter
+     */
+    overflowStrategy?: 'counter' | 'wrap';
+    /**
+     * The value of selection.
+     * @default undefined
+     */
+    value?: SelectValue[];
+};
+export type SelectTriggerComponentProps = SelectTriggerSingleProps | SelectTriggerMultipleProps;
+export type SelectTriggerProps = Omit<SelectTriggerComponentProps, 'innerRef'>;

package/Select/useSelectTriggerTags.d.ts

@@ -1,19 +1,26 @@
-import { RefObject, type JSX } from 'react';
+import { JSX, RefObject } from 'react';
 import { TagSize } from '@mezzanine-ui/core/tag';
 import { SelectValue } from './typings';
 export interface UseSelectTriggerTagsProps {
-    controlRef: RefObject<HTMLDivElement | undefined>;
+    /**
+     * Enable ellipsis calculation.
+     */
+    enabled?: boolean;
+    /**
+     * The ref for wrapper that defines available width.
+     */
+    containerRef: RefObject<HTMLDivElement | null>;
+    /**
+     * Container ref of the visible tags list.
+     */
+    tagsRef: RefObject<HTMLDivElement | null>;
     size?: TagSize;
     value?: SelectValue[];
 }
 export interface UseSelectTriggerTagsValue {
+    overflowSelections: SelectValue[];
     renderFakeTags: () => JSX.Element | null;
     takeCount: number;
+    visibleSelections: SelectValue[];
 }
-export declare function calcTakeCount({ tagsWidths, maxWidth, ellipsisTagWidth, setTakeCount, }: {
-    tagsWidths: number[];
-    maxWidth: number;
-    ellipsisTagWidth: number;
-    setTakeCount: (count: number) => void;
-}): void;
 export declare function useSelectTriggerTags(props: UseSelectTriggerTagsProps): UseSelectTriggerTagsValue;

package/Select/useSelectTriggerTags.js

@@ -1,58 +1,97 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
-import take from 'lodash/take';
+import { useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
+import { selectClasses } from '@mezzanine-ui/core/select';
 import Tag from '../Tag/Tag.js';
 
-function calcTakeCount({ tagsWidths, maxWidth, ellipsisTagWidth, setTakeCount, }) {
-    let targetCount = 0;
-    for (let count = 0; count <= tagsWidths.length; count += 1) {
-        const prevTotal = take(tagsWidths, count).reduce((prev, curr) => prev + curr, 0);
-        const nowTotal = take(tagsWidths, count + 1).reduce((prev, curr) => prev + curr, 0);
-        targetCount = count;
-        if (prevTotal <= maxWidth && nowTotal >= maxWidth && maxWidth > 0) {
-            if (prevTotal + ellipsisTagWidth > maxWidth) {
-                targetCount -= 1;
-            }
-            break;
-        }
-    }
-    setTakeCount(targetCount);
+const fakeTagClassName = 'mzn-select-trigger__fake-tag';
+const fakeEllipsisClassName = 'mzn-select-trigger__fake-ellipsis';
+function getFullWidth(element) {
+    const rect = element.getBoundingClientRect();
+    const style = window.getComputedStyle(element);
+    const marginStart = parseFloat(style.marginInlineStart || style.marginLeft || '0') || 0;
+    const marginEnd = parseFloat(style.marginInlineEnd || style.marginRight || '0') || 0;
+    return rect.width + marginStart + marginEnd;
 }
 function useSelectTriggerTags(props) {
-    const { controlRef, value, size } = props;
-    const [tagsWidths, setTagsWidths] = useState([]);
-    const [takeCount, setTakeCount] = useState(0);
-    const mznFakeTagClassName = 'mzn-fake-tag';
-    const mznFakeEllipsisTagClassName = 'mzn-fake-ellipsis-tag';
-    useEffect(() => {
-        var _a, _b, _c;
-        const elements = (_a = controlRef.current) === null || _a === void 0 ? void 0 : _a.getElementsByClassName(mznFakeTagClassName);
-        const ellipsisTagElement = (_b = controlRef.current) === null || _b === void 0 ? void 0 : _b.getElementsByClassName(mznFakeEllipsisTagClassName)[0];
-        if ((elements === null || elements === void 0 ? void 0 : elements.length) && ellipsisTagElement) {
-            const tagsWidthsArray = Array.from(elements).map((e) => e.clientWidth);
-            const parentWidth = ((_c = controlRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) || 0;
-            const maxWidth = parentWidth * 0.7;
-            const ellipsisTagWidth = ellipsisTagElement.clientWidth;
-            setTagsWidths(tagsWidthsArray);
-            calcTakeCount({
-                tagsWidths: tagsWidthsArray,
-                maxWidth,
-                ellipsisTagWidth,
-                setTakeCount,
-            });
+    const { containerRef, tagsRef, value = [], size, enabled = false } = props;
+    const [takeCount, setTakeCount] = useState(value.length);
+    const fakeContainerRef = useRef(null);
+    const measure = useCallback(() => {
+        var _a, _b;
+        if (!enabled) {
+            setTakeCount(value.length);
+            return;
         }
-    }, [value, controlRef]);
+        const container = (_a = containerRef.current) !== null && _a !== void 0 ? _a : tagsRef.current;
+        const fakeContainer = fakeContainerRef.current;
+        if (!container || !fakeContainer) {
+            setTakeCount(value.length);
+            return;
+        }
+        const fakeTags = Array.from(fakeContainer.getElementsByClassName(fakeTagClassName));
+        const fakeEllipsis = fakeContainer.getElementsByClassName(fakeEllipsisClassName)[0];
+        if (!fakeTags.length) {
+            setTakeCount(0);
+            return;
+        }
+        const computedStyleTarget = (_b = tagsRef.current) !== null && _b !== void 0 ? _b : container;
+        const containerWidth = container.clientWidth;
+        const style = computedStyleTarget
+            ? window.getComputedStyle(computedStyleTarget)
+            : null;
+        const paddingLeft = style ? parseFloat(style.paddingLeft) || 0 : 0;
+        const paddingRight = style ? parseFloat(style.paddingRight) || 0 : 0;
+        const maxWidth = containerWidth - paddingLeft - paddingRight;
+        const ellipsisWidth = fakeEllipsis ? getFullWidth(fakeEllipsis) : 0;
+        let nextCount = fakeTags.length;
+        let consumedWidth = 0;
+        for (let i = 0; i < fakeTags.length; i += 1) {
+            const tagWidth = getFullWidth(fakeTags[i]);
+            const hasOverflow = fakeTags.length - (i + 1) > 0;
+            const reservedWidth = hasOverflow ? ellipsisWidth : 0;
+            if (consumedWidth + tagWidth + reservedWidth > maxWidth) {
+                nextCount = i;
+                break;
+            }
+            consumedWidth += tagWidth;
+            nextCount = i + 1;
+        }
+        setTakeCount(nextCount);
+    }, [containerRef, enabled, tagsRef, value.length]);
+    useLayoutEffect(() => {
+        measure();
+    }, [value, size, enabled, measure]);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const container = tagsRef.current;
+        if (!container)
+            return;
+        const observer = new ResizeObserver(() => {
+            measure();
+        });
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, [enabled, containerRef, tagsRef, value.length, measure]);
     const renderFakeTags = () => {
-        if (value && value.length === tagsWidths.length)
+        if (!enabled || !value.length)
             return null;
-        return (jsxs("div", { style: {
+        return (jsxs("div", { "aria-hidden": true, className: selectClasses.triggerTags, ref: fakeContainerRef, style: {
                 position: 'absolute',
-                visibility: 'hidden',
                 pointerEvents: 'none',
+                visibility: 'hidden',
                 opacity: 0,
-            }, children: [value === null || value === void 0 ? void 0 : value.map((selection) => (jsx(Tag, { className: mznFakeTagClassName, closable: true, disabled: true, size: size, children: selection.name }, selection.id))), jsx(Tag, { disabled: true, className: mznFakeEllipsisTagClassName, size: size, children: "+99..." })] }));
+                inset: 0,
+            }, children: [value.map((selection) => (jsx("span", { className: fakeTagClassName, children: jsx(Tag, { disabled: true, label: selection.name, onClose: () => { }, size: size, type: "dismissable" }) }, `fake-${selection.id}`))), jsx("span", { className: fakeEllipsisClassName, children: jsx(Tag, { count: 99, size: size, type: "overflow-counter" }) })] }));
+    };
+    const visibleSelections = value.slice(0, takeCount);
+    const overflowSelections = value.slice(takeCount);
+    return {
+        overflowSelections,
+        renderFakeTags,
+        takeCount,
+        visibleSelections,
     };
-    return { renderFakeTags, takeCount };
 }
 
-export { calcTakeCount, useSelectTriggerTags };
+export { useSelectTriggerTags };

package/Selection/Selection.d.ts

@@ -0,0 +1,98 @@
+import { ChangeEventHandler, MouseEvent, Ref } from 'react';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { SelectionDirection, SelectionImageObjectFit, SelectionType } from '@mezzanine-ui/core/selection';
+import type { IconDefinition } from '@mezzanine-ui/icons';
+export interface SelectionPropsBase extends Omit<NativeElementPropsWithoutKeyAndRef<'label'>, 'onChange'> {
+    /**
+     * Whether the selection is checked.
+     */
+    checked?: boolean;
+    /**
+     * Whether the selection is checked by default.
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * The type of selection.
+     * @default 'radio'
+     */
+    selector: SelectionType;
+    /**
+     * If true, selection will be disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The direction of selection.
+     * @default 'horizontal'
+     */
+    direction?: SelectionDirection;
+    /**
+     * The image of selection. Supports image URL.
+     */
+    image?: string;
+    /**
+     * The object fit of selection image.
+     * @default 'cover'
+     */
+    imageObjectFit?: SelectionImageObjectFit;
+    /**
+     * The custom icon of selection.
+     */
+    customIcon?: IconDefinition;
+    /**
+     * The name of selection.
+     *
+     * @important When using with react-hook-form or inside a RadioGroup/CheckboxGroup, this prop is recommended.
+     */
+    name?: string;
+    /**
+     * The id of the input element.
+     */
+    id?: string;
+    /**
+     * The accessible text of selection.
+     */
+    text: string;
+    /**
+     * The accessible description of selection.
+     */
+    supportingText?: string;
+    /**
+     * Whether the selection is readonly.
+     * @default false
+     */
+    readonly?: boolean;
+    /**
+     * The value of selection.
+     *
+     * @important This prop is required when selection is inside a RadioGroup/CheckboxGroup.
+     * It is also recommended when integrating with react-hook-form.
+     */
+    value?: string;
+    /**
+     * The react ref passed to input element.
+     *
+     * @important When using with react-hook-form's `register`, pass the ref through this prop:
+     * ```tsx
+     * const { register } = useForm();
+     * <Selection inputRef={register('fieldName').ref} name="fieldName" />
+     * ```
+     */
+    inputRef?: Ref<HTMLInputElement>;
+    /**
+     * Invoked by input change event.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+export interface SelectionProps extends SelectionPropsBase {
+    /**
+     * Callback when the selection is clicked.
+     */
+    onClick?: (event: MouseEvent<HTMLLabelElement>) => void;
+}
+/**
+ * The react component for `mezzanine` selection.
+ */
+declare const Selection: import("react").ForwardRefExoticComponent<SelectionProps & import("react").RefAttributes<HTMLLabelElement>>;
+export default Selection;

package/Selection/Selection.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId, useMemo } from 'react';
+import Typography from '../Typography/Typography.js';
+import { selectionClasses } from '@mezzanine-ui/core/selection';
+import { FileIcon } from '@mezzanine-ui/icons';
+import Icon from '../Icon/Icon.js';
+import cx from 'clsx';
+
+// Icon size constant for Selection component
+// Note: This value is component-specific and doesn't have a corresponding design token
+const SELECTION_ICON_SIZE = 26;
+/**
+ * The react component for `mezzanine` selection.
+ */
+const Selection = forwardRef(function Selection(props, ref) {
+    const { checked: checkedProp, className, defaultChecked = false, disabled = false, direction = 'horizontal', id, image, imageObjectFit = 'cover', inputRef: inputRefProp, name, onChange: onChangeProp, readonly = false, selector = 'radio', supportingText, text, value, customIcon, onClick, ...rest } = props;
+    const generatedId = useId();
+    const inputId = id !== null && id !== void 0 ? id : generatedId;
+    const textId = useMemo(() => `${inputId}-text`, [inputId]);
+    const supportingTextId = useMemo(() => `${inputId}-supporting-text`, [inputId]);
+    const isRadioOrCheckbox = selector === 'radio' || selector === 'checkbox';
+    const onInputChange = (event) => {
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(event);
+    };
+    const haveImage = useMemo(() => Boolean(image && typeof image === 'string' && image.trim().length > 0), [image]);
+    if (!text) {
+        console.error('Selection: `text` (title) is required.');
+        return null;
+    }
+    if (!supportingText) {
+        console.warn('Selection: `supportingText` is optional but strongly recommended for better accessibility.');
+    }
+    return (jsxs("label", { ...rest, ref: ref, htmlFor: inputId, className: cx(selectionClasses.host, selectionClasses.direction(direction), {
+            [selectionClasses.disabled]: disabled,
+            [selectionClasses.readonly]: readonly,
+        }, className), ...(disabled && { 'aria-disabled': true }), ...(onClick && { onClick }), children: [jsxs("div", { className: selectionClasses.container, children: [haveImage
+                        ? jsx("img", { src: image, alt: text, className: selectionClasses.selectionImage, style: { objectFit: imageObjectFit } })
+                        : jsx(Icon, { "aria-hidden": "true", className: selectionClasses.icon, color: "neutral-solid", icon: customIcon || FileIcon, size: SELECTION_ICON_SIZE }), jsxs("div", { className: selectionClasses.content, children: [jsx(Typography, { id: textId, color: "text-neutral-solid", variant: "body-highlight", className: selectionClasses.text, children: text }), supportingText && (jsx(Typography, { id: supportingTextId, color: "text-neutral", variant: "caption", className: selectionClasses.supportingText, children: supportingText }))] })] }), !readonly && (jsx("input", { ref: inputRefProp, type: selector, name: name, id: inputId, className: selectionClasses.input, disabled: disabled, ...(checkedProp !== undefined
+                    ? { checked: checkedProp }
+                    : { defaultChecked }), value: value, onChange: onInputChange, ...(isRadioOrCheckbox && checkedProp !== undefined
+                    ? { 'aria-checked': checkedProp }
+                    : {}), "aria-labelledby": textId, "aria-describedby": supportingText ? supportingTextId : undefined }))] }));
+});
+
+export { Selection as default };

package/Selection/index.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithoutRef, ReactElement, RefAttributes } from 'react';
+import Selection, { SelectionProps, SelectionPropsBase } from './Selection';
+export type { SelectionDirection, SelectionType, } from '@mezzanine-ui/core/selection';
+export type { SelectionProps, SelectionPropsBase };
+/**
+ * @remark
+ * Add type alias here for parsable to react docgen typescript.
+ */
+type GenericSelection = (props: PropsWithoutRef<SelectionProps> & RefAttributes<HTMLLabelElement>) => ReactElement<any>;
+export { Selection };
+declare const _default: GenericSelection;
+export default _default;

package/Selection/index.js

@@ -0,0 +1,5 @@
+import Selection from './Selection.js';
+
+
+
+export { Selection, Selection as default };

package/Skeleton/Skeleton.d.ts

@@ -1,16 +1,23 @@
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { TypographySemanticType } from '../Typography';
 export interface SkeletonProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children'> {
+    /**
+     * Whether the skeleton should be circular.
+     */
+    circle?: boolean;
     /**
      * Height of the skeleton.
+     * @default 100%
      */
     height?: number | string;
     /**
-     * Type of the skeleton.
-     * @default 'rectangle'
+     * Typography variant for strip skeleton height calculation.
+     * Only effective when circle and height are not set.
      */
-    type?: 'rectangle' | 'circle';
+    variant?: TypographySemanticType;
     /**
      * Width of the skeleton.
+     * @default 100%
      */
     width?: number | string;
 }

package/Skeleton/Skeleton.js

@@ -7,12 +7,20 @@ import cx from 'clsx';
  * The react component for `mezzanine` Skeleton.
  */
 const Skeleton = forwardRef(function Skeleton(props, ref) {
-    const { className, height: skeletonHeight, style: skeletonStyle, type, width: skeletonWidth, ...rest } = props;
-    return (jsx("div", { ...rest, ref: ref, className: cx(skeletonClasses.host, type === 'circle' && skeletonClasses.circle, className), style: {
-            width: skeletonWidth,
+    const { circle, className, height: skeletonHeight, style: skeletonStyle, variant, width: skeletonWidth, ...rest } = props;
+    // strip type
+    if (!skeletonHeight && !circle && variant) {
+        return (jsx("div", { ...rest, ref: ref, className: cx(skeletonClasses.host, skeletonClasses.type(variant), className), style: {
+                width: skeletonWidth,
+                ...skeletonStyle,
+            }, children: jsx("span", { className: skeletonClasses.bg }) }));
+    }
+    // circle / square type
+    return (jsx("div", { ...rest, ref: ref, className: cx(skeletonClasses.host, skeletonClasses.bg, circle && skeletonClasses.circle, className), style: {
             height: skeletonHeight,
+            width: skeletonWidth,
             ...skeletonStyle,
-        }, ...rest }));
+        } }));
 });
 
 export { Skeleton as default };

package/Skeleton/index.d.ts

@@ -1 +1,2 @@
-export { SkeletonProps, default } from './Skeleton';
+export type { SkeletonProps } from './Skeleton';
+export { default } from './Skeleton';

package/Slider/Slider.d.ts

@@ -2,12 +2,17 @@ import { Ref } from 'react';
 import { RangeSliderValue, SingleSliderValue } from '@mezzanine-ui/core/slider';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { UseRangeSliderProps, UseSingleSliderProps } from './useSlider';
+import { IconDefinition } from '@mezzanine-ui/icons';
 export interface SliderBaseProps extends Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'defaultChecked' | 'defaultValue' | 'onChange'> {
     /**
      * Whether the slider is disabled.
      * @default false
      */
     disabled?: boolean;
+    /**
+     * The ref for Slider root.
+     */
+    innerRef?: Ref<HTMLDivElement>;
     /**
      * The maximum permitted value
      * @default 100
@@ -24,20 +29,52 @@ export interface SliderBaseProps extends Omit<NativeElementPropsWithoutKeyAndRef
      */
     step?: number;
     /**
-     * Will render input if `withInput` is `true`.
+     * Whether to show tick marks on the slider.
+     * If a number is given, it represents the number of equally spaced segments between min and max to display tick marks (excluding min and max).
+     * If a number array is given, the values represent the actual slider values at which to show the tick marks (not percentages).
+     * @example
+     * 3 // means show tick marks at values 25, 50, and 75 (for min=0, max=100)
+     * [20, 50, 80] // means show tick marks at values 20, 50, and 80
      */
-    withInput?: boolean;
+    withTick?: number | number[];
+}
+export type SliderWithInputProps = SliderBaseProps & {
+    prefixIcon?: never;
+    suffixIcon?: never;
     /**
-     * The ref for Slider root.
+     * Whether to show input box to allow user to input value.
      */
-    innerRef?: Ref<HTMLDivElement>;
-}
-export type SingleSliderProps = SliderBaseProps & {
+    withInput: true;
+};
+export type SliderWithIconProps = SliderBaseProps & {
+    /**
+     * Set prefix icon.
+     */
+    prefixIcon: IconDefinition;
+    /**
+     * Set suffix icon.
+     */
+    suffixIcon: IconDefinition;
+    withInput?: never;
+};
+export type SliderWithoutAddonsProps = SliderBaseProps & {
+    prefixIcon?: never;
+    suffixIcon?: never;
+    withInput?: never;
+};
+export type SliderAddonProps = SliderWithInputProps | SliderWithIconProps | SliderWithoutAddonsProps;
+export type SingleSliderProps = SliderAddonProps & {
     onChange?: (value: SingleSliderValue) => void;
+    /**
+     * The value of the slider.
+     */
     value: UseSingleSliderProps['value'];
 };
-export type RangeSliderProps = SliderBaseProps & {
+export type RangeSliderProps = SliderAddonProps & {
     onChange?: (value: RangeSliderValue) => void;
+    /**
+     * The value of the slider.
+     */
     value: UseRangeSliderProps['value'];
 };
 export type SliderComponentProps = SingleSliderProps | RangeSliderProps;