@particle-network/ui-react 0.4.5-beta.2 → 0.4.5-beta.20

package/dist/components/UXSlider/use-slider-thumb.js

@@ -0,0 +1,79 @@
+import { useRef } from "react";
+import { useDOMRef } from "@heroui/react-utils";
+import { dataAttr, mergeProps } from "@heroui/shared-utils";
+import { useFocusRing } from "@react-aria/focus";
+import { useNumberFormatter } from "@react-aria/i18n";
+import { useHover, usePress } from "@react-aria/interactions";
+import { useSliderThumb } from "@react-aria/slider";
+import { bgWithTextColorClasses } from "../../utils/classes.js";
+function use_slider_thumb_useSliderThumb(props) {
+    const { ref, as, state, index, name, trackRef, className, tooltipProps, isVertical, showTooltip, getTooltipValue, formatOptions, renderThumb, ...otherProps } = props;
+    const Component = as || 'div';
+    const domRef = useDOMRef(ref);
+    const inputRef = useRef(null);
+    const numberFormatter = useNumberFormatter(formatOptions);
+    const { thumbProps, inputProps, isDragging, isFocused } = useSliderThumb({
+        index,
+        trackRef,
+        inputRef,
+        name,
+        ...otherProps
+    }, state);
+    const { hoverProps, isHovered } = useHover({
+        isDisabled: state.isDisabled
+    });
+    const { focusProps, isFocusVisible } = useFocusRing();
+    const { pressProps, isPressed } = usePress({
+        isDisabled: state.isDisabled
+    });
+    const getThumbProps = (props = {})=>({
+            ref: domRef,
+            'data-slot': 'thumb',
+            'data-hover': dataAttr(isHovered),
+            'data-pressed': dataAttr(isPressed),
+            'data-dragging': dataAttr(isDragging),
+            'data-focused': dataAttr(isFocused),
+            'data-focus-visible': dataAttr(isFocusVisible),
+            'aria-label': props['aria-label'] || `Slider thumb ${void 0 !== index ? `${index + 1}` : ''}`,
+            ...mergeProps(thumbProps, pressProps, hoverProps, otherProps),
+            className,
+            ...props
+        });
+    const getTooltipProps = ()=>{
+        const stateValue = tooltipProps?.content ? tooltipProps.content : getTooltipValue ? 1 === state.values.length ? getTooltipValue(state.values[index ?? 0]) : getTooltipValue(state.values, index ?? 0) : state.values[index ?? 0];
+        const value = numberFormatter && 'number' == typeof stateValue ? numberFormatter.format(stateValue) : stateValue;
+        return {
+            ...tooltipProps,
+            placement: tooltipProps?.placement ? tooltipProps?.placement : isVertical ? 'right' : 'top',
+            content: tooltipProps?.content ? tooltipProps?.content : value,
+            updatePositionDeps: [
+                isDragging,
+                isHovered,
+                isFocused,
+                isFocusVisible,
+                value
+            ],
+            isOpen: tooltipProps?.isOpen !== void 0 ? tooltipProps?.isOpen : isHovered || isDragging || isFocused || isFocusVisible,
+            role: 'tooltip',
+            'aria-label': `Current value: ${value}`,
+            classNames: {
+                content: bgWithTextColorClasses[tooltipProps?.color]
+            }
+        };
+    };
+    const getInputProps = (props = {})=>({
+            ref: inputRef,
+            ...mergeProps(inputProps, focusProps),
+            ...props
+        });
+    return {
+        Component,
+        index,
+        showTooltip,
+        renderThumb,
+        getThumbProps,
+        getTooltipProps,
+        getInputProps
+    };
+}
+export { use_slider_thumb_useSliderThumb as useSliderThumb };

package/dist/components/UXSlider/use-slider.d.ts

@@ -0,0 +1,182 @@
+import type React from 'react';
+import { type ReactNode } from 'react';
+import type { ReactRef } from '@heroui/react-utils';
+import type { DOMAttributes, HTMLHeroUIProps, PropGetter } from '@heroui/system';
+import type { SliderSlots, SliderVariantProps, SlotsToClasses } from '@heroui/theme';
+import type { TooltipProps } from '@heroui/tooltip';
+import type { AriaSliderProps } from '@react-aria/slider';
+import type { ValueBase } from '@react-types/shared';
+import type { SliderThumbProps } from './slider-thumb';
+export type SliderValue = number | number[];
+export interface SliderStepMark {
+    value: number;
+    label: string;
+}
+export type SliderRenderThumbProps = DOMAttributes<HTMLDivElement> & {
+    index?: number;
+};
+interface Props extends HTMLHeroUIProps {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: ReactRef<HTMLElement | null>;
+    /**
+     * The content to display as the label.
+     */
+    label?: ReactNode;
+    /**
+     * The input name.
+     */
+    name?: string;
+    /**
+     * The offset from which to start the fill.
+     */
+    fillOffset?: number;
+    /**
+     * The display format of the value label.
+     */
+    formatOptions?: Intl.NumberFormatOptions;
+    /**
+     * The display format of the tooltip value label.
+     * @default formatOptions
+     */
+    tooltipValueFormatOptions?: Intl.NumberFormatOptions;
+    /**
+     * Whether to show the step indicators.
+     * @default false
+     */
+    showSteps?: boolean;
+    /**
+     * Whether to show step indicators at mark positions.
+     * @default false
+     */
+    showMarksSteps?: boolean;
+    /**
+     * Whether the thumbs should have a tooltip with the value on hover the slider.
+     * @default false
+     */
+    showTooltip?: boolean;
+    /**
+     * Custom steps labels.
+     * @example [{value: 0, label: "0"}, {value: 50, label: "50"}, {value: 100, label: "100"}]
+     * @default []
+     */
+    marks?: SliderStepMark[];
+    /**
+     * Element to be rendered in the start side of the slider.
+     */
+    startContent?: React.ReactNode;
+    /**
+     * Element to be rendered in the end side of the slider.
+     */
+    endContent?: React.ReactNode;
+    /**
+     * Classname or List of classes to change the classNames of the element.
+     * if `className` is passed, it will be added to the base slot.
+     *
+     * @example
+     * ```ts
+     * <Slider classNames={{
+     *    base:"base-classes",
+     *    step: "step-classes",
+     *    labelWrapper: "label-wrapper-classes",
+     *    label: "label-classes",
+     *    value: "value-classes",
+     *    trackWrapper: "track-wrapper-classes",
+     *    track: "track-classes",
+     *    filler: "filler-classes",
+     *    thumb: "thumb-classes",
+     *    mark: "mark-classes",
+     * }} />
+     * ```
+     */
+    classNames?: SlotsToClasses<SliderSlots>;
+    /**
+     * Tooltip props.
+     * @see [Tooltip](https://heroui.com/components/tooltip) for more details.
+     * @default {
+     *  offset: 15,
+     *  delay: 0,
+     *  size: "sm",
+     *  showArrow: true,
+     *  placement: "top", // "right" for vertical slider
+     *  content: [sliderValue],
+     *  color: sliderProps?.color, // same as the slider color
+     *  isDisabled: sliderProps?.isDisabled,
+     * }
+     */
+    tooltipProps?: Partial<TooltipProps>;
+    /**
+     * A function that returns the content to display as the value label.
+     * Overrides default formatted number.
+     */
+    getValue?: (value: SliderValue) => string;
+    /**
+     * A function that returns the content to display as the tooltip label. (in analogy to getValue)
+     * @param value - The value of the slider, array or single number.
+     * @param index - The index of the thumb, if multiple thumbs are used.
+     * In addition to formatting with tooltipValueFormatOptions if number is returned.
+     */
+    getTooltipValue?: (value: SliderValue, index?: number) => string | number;
+    /**
+     * Function to render the label.
+     */
+    renderLabel?: (props: DOMAttributes<HTMLLabelElement>) => React.ReactNode;
+    /**
+     * Function to render the value label.
+     */
+    renderValue?: (props: DOMAttributes<HTMLOutputElement>) => React.ReactNode;
+    /**
+     * Function to render the thumb. It can be used to add a tooltip or custom icon.
+     */
+    renderThumb?: (props: SliderRenderThumbProps) => React.ReactNode;
+}
+export type UseSliderProps = Omit<Props, keyof ValueBase<SliderValue>> & AriaSliderProps & SliderVariantProps;
+export declare function useSlider(originalProps: UseSliderProps): {
+    Component: import("@heroui/system-rsc").As<any>;
+    state: import("@react-stately/slider").SliderState;
+    value: any;
+    domRef: React.RefObject<HTMLElement>;
+    label: React.ReactNode;
+    steps: number;
+    marks: SliderStepMark[];
+    startContent: React.ReactNode;
+    endContent: React.ReactNode;
+    showMarksSteps: boolean;
+    minValue: number;
+    step: number;
+    getStepProps: (index: number) => {
+        className: string;
+        'data-slot': string;
+        'data-in-range': boolean;
+        style: {
+            [x: string]: string;
+        };
+    };
+    getBaseProps: PropGetter;
+    getValue: ((value: SliderValue) => string) | undefined;
+    renderLabel: ((props: DOMAttributes<HTMLLabelElement>) => React.ReactNode) | undefined;
+    renderValue: ((props: DOMAttributes<HTMLOutputElement>) => React.ReactNode) | undefined;
+    getTrackWrapperProps: PropGetter;
+    getLabelWrapperProps: PropGetter;
+    getLabelProps: PropGetter;
+    getValueProps: PropGetter;
+    getTrackProps: PropGetter;
+    getFillerProps: PropGetter;
+    getThumbProps: (index: number) => SliderThumbProps;
+    getMarkProps: (mark: SliderStepMark) => {
+        className: string;
+        'data-slot': string;
+        'data-in-range': boolean;
+        style: {
+            [x: string]: string;
+        };
+        onMouseDown: (e: React.MouseEvent) => void;
+        onPointerDown: (e: React.PointerEvent) => void;
+        onClick: (e: any) => void;
+    };
+    getStartContentProps: PropGetter;
+    getEndContentProps: PropGetter;
+};
+export type UseSliderReturn = ReturnType<typeof useSlider>;
+export {};

package/dist/components/UXSlider/use-slider.js

@@ -0,0 +1,277 @@
+import { useCallback, useMemo, useRef } from "react";
+import { filterDOMProps, useDOMRef } from "@heroui/react-utils";
+import { mergeProps, objectToDeps, warn } from "@heroui/shared-utils";
+import { mapPropsVariants, useProviderContext } from "@heroui/system";
+import { cn } from "@heroui/theme";
+import { useLocale, useNumberFormatter } from "@react-aria/i18n";
+import { useHover } from "@react-aria/interactions";
+import { useSlider } from "@react-aria/slider";
+import { useSliderState } from "@react-stately/slider";
+import { slider } from "./slider-theme.js";
+function use_slider_useSlider(originalProps) {
+    const globalContext = useProviderContext();
+    const [props, variantProps] = mapPropsVariants(originalProps, slider.variantKeys);
+    const { ref, as, name, label, formatOptions, value: valueProp, maxValue = 100, minValue = 0, step = 1, showSteps = false, showMarksSteps = false, showTooltip = false, orientation = 'horizontal', marks = [], startContent, endContent, fillOffset, className, classNames, renderThumb, renderLabel, renderValue, onChange, onChangeEnd, getValue, getTooltipValue, tooltipValueFormatOptions = formatOptions, tooltipProps: userTooltipProps = {}, ...otherProps } = props;
+    const isFixedValue = minValue === maxValue;
+    if (isFixedValue) warn('Min and max values should not be the same. This may cause unexpected behavior.');
+    const Component = as || 'div';
+    const shouldFilterDOMProps = 'string' == typeof Component;
+    const disableAnimation = originalProps?.disableAnimation ?? globalContext?.disableAnimation ?? false;
+    const domRef = useDOMRef(ref);
+    const trackRef = useRef(null);
+    const numberFormatter = useNumberFormatter(formatOptions);
+    const { direction } = useLocale();
+    const clampValue = useCallback((valueToClamp)=>Math.min(Math.max(valueToClamp, minValue), maxValue), [
+        minValue,
+        maxValue
+    ]);
+    const validatedValue = useMemo(()=>{
+        if (isFixedValue) return minValue;
+        if (void 0 === valueProp) return;
+        if (Array.isArray(valueProp)) return valueProp.map(clampValue);
+        return clampValue(valueProp);
+    }, [
+        valueProp,
+        clampValue,
+        isFixedValue,
+        minValue
+    ]);
+    const handleValueChange = useCallback((value)=>{
+        onChangeEnd?.(value);
+        setTimeout(()=>{
+            if (document.activeElement) document.activeElement.blur();
+        }, 500);
+    }, [
+        onChangeEnd
+    ]);
+    const state = useSliderState({
+        ...otherProps,
+        value: validatedValue,
+        isDisabled: originalProps?.isDisabled ?? false,
+        orientation,
+        step,
+        minValue,
+        maxValue,
+        numberFormatter,
+        onChange,
+        onChangeEnd: handleValueChange
+    });
+    const tooltipProps = {
+        offset: 5,
+        delay: 0,
+        size: 'sm',
+        showArrow: true,
+        color: originalProps?.color ? originalProps?.color : slider.defaultVariants?.color,
+        isDisabled: originalProps.isDisabled,
+        ...userTooltipProps
+    };
+    const { groupProps, trackProps, labelProps, outputProps } = useSlider(originalProps, state, trackRef);
+    const { isHovered, hoverProps } = useHover({
+        isDisabled: originalProps.isDisabled
+    });
+    const baseStyles = cn(classNames?.base, className);
+    const isVertical = 'vertical' === orientation;
+    const hasMarks = marks?.length > 0;
+    const hasSingleThumb = void 0 === fillOffset ? 1 === state.values.length : false;
+    const slots = useMemo(()=>slider({
+            ...variantProps,
+            hasMarks,
+            disableAnimation,
+            hasSingleThumb,
+            isVertical
+        }), [
+        objectToDeps(variantProps),
+        isVertical,
+        disableAnimation,
+        hasSingleThumb,
+        hasMarks
+    ]);
+    const [startOffset, endOffset] = [
+        state.values.length > 1 ? state.getThumbPercent(0) : void 0 !== fillOffset ? state.getValuePercent(fillOffset) : 0,
+        state.getThumbPercent(state.values.length - 1)
+    ].sort();
+    const value = 1 === state.values.length ? numberFormatter.format(state.values[0]) : numberFormatter.formatRange(state.values[0], state.values[state.values.length - 1]);
+    const steps = showSteps ? Math.floor((maxValue - minValue) / step) + 1 : 0;
+    const getBaseProps = (props = {})=>({
+            ref: domRef,
+            'data-orientation': state.orientation,
+            'data-slot': 'base',
+            'data-hover': isHovered,
+            className: slots.base({
+                class: baseStyles
+            }),
+            ...mergeProps(groupProps, hoverProps, filterDOMProps(otherProps, {
+                enabled: shouldFilterDOMProps
+            }), filterDOMProps(props))
+        });
+    const getLabelWrapperProps = (props = {})=>({
+            className: slots.labelWrapper({
+                class: classNames?.labelWrapper
+            }),
+            'data-slot': 'labelWrapper',
+            ...props
+        });
+    const getLabelProps = (props = {})=>({
+            'data-slot': 'label',
+            className: slots.label({
+                class: classNames?.label
+            }),
+            children: label,
+            ...labelProps,
+            ...props
+        });
+    const getValueProps = (props = {})=>({
+            'data-slot': 'value',
+            className: slots.value({
+                class: classNames?.value
+            }),
+            children: getValue && 'function' == typeof getValue ? getValue(state.values) : value,
+            ...outputProps,
+            ...props
+        });
+    const getTrackProps = (props = {})=>{
+        const fillWidth = (endOffset - startOffset) * 100;
+        return {
+            ref: trackRef,
+            'data-slot': 'track',
+            'data-thumb-hidden': !!originalProps?.hideThumb,
+            'data-vertical': isVertical,
+            ...hasSingleThumb ? {
+                'data-fill-start': fillWidth > 0,
+                'data-fill-end': 100 === fillWidth
+            } : {
+                'data-fill-start': 0 === startOffset,
+                'data-fill-end': 100 * startOffset + fillWidth === 100
+            },
+            className: slots.track({
+                class: classNames?.track
+            }),
+            ...trackProps,
+            ...props
+        };
+    };
+    const getTrackWrapperProps = (props = {})=>({
+            'data-slot': 'track-wrapper',
+            className: slots.trackWrapper({
+                class: classNames?.trackWrapper
+            }),
+            ...props
+        });
+    const getFillerProps = (props = {})=>({
+            'data-slot': 'filler',
+            className: slots.filler({
+                class: classNames?.filler
+            }),
+            ...props,
+            style: {
+                ...props.style,
+                [isVertical ? 'bottom' : 'rtl' === direction ? 'right' : 'left']: `${100 * startOffset}%`,
+                ...isVertical ? {
+                    height: `${(endOffset - startOffset) * 100}%`
+                } : {
+                    width: `${(endOffset - startOffset) * 100}%`
+                }
+            }
+        });
+    const getThumbProps = (index)=>({
+            name,
+            index,
+            state,
+            trackRef,
+            orientation,
+            isVertical,
+            tooltipProps,
+            getTooltipValue,
+            showTooltip,
+            renderThumb,
+            formatOptions: tooltipValueFormatOptions,
+            className: slots.thumb({
+                class: classNames?.thumb
+            })
+        });
+    const getStepProps = (index)=>{
+        const percent = state.getValuePercent(index * step + minValue);
+        return {
+            className: slots.step({
+                class: classNames?.step
+            }),
+            'data-slot': 'step',
+            'data-in-range': percent <= endOffset && percent >= startOffset,
+            style: {
+                [isVertical ? 'bottom' : 'rtl' === direction ? 'right' : 'left']: `${100 * percent}%`
+            }
+        };
+    };
+    const getMarkProps = (mark)=>{
+        const percent = state.getValuePercent(mark.value);
+        return {
+            className: slots.mark({
+                class: classNames?.mark
+            }),
+            'data-slot': 'mark',
+            'data-in-range': percent <= endOffset && percent >= startOffset,
+            style: {
+                [isVertical ? 'bottom' : 'rtl' === direction ? 'right' : 'left']: `${100 * percent}%`
+            },
+            onMouseDown: (e)=>e.stopPropagation(),
+            onPointerDown: (e)=>e.stopPropagation(),
+            onClick: (e)=>{
+                e.stopPropagation();
+                if (isFixedValue) return;
+                if (1 === state.values.length) state.setThumbPercent(0, percent);
+                else {
+                    const leftThumbVal = state.values[0];
+                    const rightThumbVal = state.values[1];
+                    if (mark.value < leftThumbVal) state.setThumbPercent(0, percent);
+                    else if (mark.value > rightThumbVal) state.setThumbPercent(1, percent);
+                    else if (Math.abs(mark.value - leftThumbVal) < Math.abs(mark.value - rightThumbVal)) state.setThumbPercent(0, percent);
+                    else state.setThumbPercent(1, percent);
+                }
+            }
+        };
+    };
+    const getStartContentProps = (props = {})=>({
+            'data-slot': 'startContent',
+            className: slots.startContent({
+                class: classNames?.startContent
+            }),
+            ...props
+        });
+    const getEndContentProps = (props = {})=>({
+            'data-slot': 'endContent',
+            className: slots.endContent({
+                class: classNames?.endContent
+            }),
+            ...props
+        });
+    return {
+        Component,
+        state,
+        value,
+        domRef,
+        label,
+        steps,
+        marks,
+        startContent,
+        endContent,
+        showMarksSteps,
+        minValue,
+        step,
+        getStepProps,
+        getBaseProps,
+        getValue,
+        renderLabel,
+        renderValue,
+        getTrackWrapperProps,
+        getLabelWrapperProps,
+        getLabelProps,
+        getValueProps,
+        getTrackProps,
+        getFillerProps,
+        getThumbProps,
+        getMarkProps,
+        getStartContentProps,
+        getEndContentProps
+    };
+}
+export { use_slider_useSlider as useSlider };

package/dist/components/UXTabSwitch/index.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import { type UXTabsProps } from '../UXTabs';
 interface UXTabSwitchProps {
+    className?: string;
+    classNames?: UXTabsProps['classNames'];
     size?: UXTabsProps['size'];
     color?: UXTabsProps['color'];
     onTitle?: React.ReactNode;

package/dist/components/UXTabSwitch/index.js

@@ -3,9 +3,11 @@ import "react";
 import { useI18n } from "../../hooks/useI18n.js";
 import { UXTab, UXTabs } from "../UXTabs/index.js";
 const UXTabSwitch = (props)=>{
-    const { size, color, onTitle, offTitle, isSelected = false, isDisabled = false, disableAnimation = false, onValueChange } = props;
+    const { className, classNames, size, color, onTitle, offTitle, isSelected = false, isDisabled = false, disableAnimation = false, onValueChange } = props;
     const i18n = useI18n();
     return /*#__PURE__*/ jsxs(UXTabs, {
+        className: className,
+        classNames: classNames,
         size: size,
         variant: "switch",
         color: color,

package/dist/components/UXTabs/tabs.classes.js

@@ -252,7 +252,7 @@ const tabsClasses = {
             color: 'default',
             class: {
                 cursor: [
-                    '!bg-tertiary'
+                    'bg-tertiary dark:bg-tertiary'
                 ],
                 tabContent: 'group-data-[selected=true]:text-tertiary-foreground'
             }
@@ -264,7 +264,7 @@ const tabsClasses = {
             color: 'default',
             class: {
                 cursor: [
-                    '!bg-tertiary'
+                    'bg-tertiary'
                 ],
                 tabContent: 'group-data-[selected=true]:text-tertiary-foreground'
             }
@@ -276,9 +276,9 @@ const tabsClasses = {
             color: 'default',
             class: {
                 cursor: [
-                    '!bg-tertiary'
+                    'bg-background-200'
                 ],
-                tabContent: 'group-data-[selected=true]:text-tertiary-foreground'
+                tabContent: 'group-data-[selected=true]:text-foreground'
             }
         },
         {

package/dist/components/UXThemeSwitch/theme-switch.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
-import type { UXModalProps } from '../UXModal';
+import { type ThemeId } from '@particle-network/ui-shared';
+import { type UXModalProps } from '../UXModal';
 export interface UXThemeSwitchModalProps extends Pick<UXModalProps, 'isOpen' | 'onClose' | 'onOpenChange' | 'backdrop'> {
     as?: 'modal' | 'drawer';
+    omitThemes?: ThemeId[];
 }
 export declare const UXThemeSwitchModal: React.FC<UXThemeSwitchModalProps>;
-export interface UXThemeSwitchProps extends Pick<UXThemeSwitchModalProps, 'as' | 'backdrop'> {
+export interface UXThemeSwitchProps extends Pick<UXThemeSwitchModalProps, 'as' | 'omitThemes' | 'backdrop'> {
     children?: (onOpen: () => void) => React.ReactNode;
 }
 export declare const UXThemeSwitch: React.FC<UXThemeSwitchProps>;

package/dist/components/UXThemeSwitch/theme-switch.js

@@ -1,19 +1,20 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { cn } from "@heroui/theme";
 import { useDisclosure } from "@heroui/use-disclosure";
 import { ChartColorSwitchIcon, CopyIcon } from "@particle-network/icons/web";
 import { themeData } from "@particle-network/ui-shared";
 import { useI18n } from "../../hooks/index.js";
-import { UXCopy, UXTooltip } from "../index.js";
 import { HStack, VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
 import { UXButton } from "../UXButton/index.js";
+import { UXCopy } from "../UXCopy/index.js";
 import { UXDivider } from "../UXDivider/index.js";
 import { UXDrawer } from "../UXDrawer/index.js";
 import { UXInput } from "../UXInput/index.js";
 import { UXModal } from "../UXModal/index.js";
 import { UXSpinner } from "../UXSpinner/index.js";
+import { UXTooltip } from "../UXTooltip/index.js";
 import { ThemeItem } from "./theme-item.js";
 import { useTheme } from "./use-theme.js";
 const FONT_EXAMPLES = [
@@ -30,11 +31,14 @@ const FONT_EXAMPLES = [
         url: 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'
     }
 ];
-const UXThemeSwitchModal = ({ as = 'modal', backdrop, isOpen, onClose, onOpenChange })=>{
+const UXThemeSwitchModal = ({ as = 'modal', omitThemes = [], backdrop, isOpen, onClose, onOpenChange })=>{
     const i18n = useI18n();
     const { theme: selectedTheme, setTheme, fontUrl, setFontUrl, fontName, fontLoadStatus, clearFontUrl } = useTheme();
     const [isFontExampleOpen, setIsFontExampleOpen] = useState(false);
     const Component = 'modal' === as ? UXModal : UXDrawer;
+    const themes = useMemo(()=>themeData.filter((theme)=>!omitThemes.includes(theme.id)), [
+        omitThemes
+    ]);
     return /*#__PURE__*/ jsx(Component, {
         isOpen: isOpen,
         classNames: {
@@ -44,7 +48,7 @@ const UXThemeSwitchModal = ({ as = 'modal', backdrop, isOpen, onClose, onOpenCha
         backdrop: backdrop,
         footer: /*#__PURE__*/ jsx(UXButton, {
             fullWidth: true,
-            size: "lg",
+            size: "xl",
             color: "primary",
             onPress: onClose,
             children: i18n.theme.done
@@ -55,7 +59,7 @@ const UXThemeSwitchModal = ({ as = 'modal', backdrop, isOpen, onClose, onOpenCha
             children: [
                 /*#__PURE__*/ jsx("div", {
                     className: "grid grid-cols-3 gap-y-5 pt-1",
-                    children: themeData.map((theme)=>/*#__PURE__*/ jsx(ThemeItem, {
+                    children: themes.map((theme)=>/*#__PURE__*/ jsx(ThemeItem, {
                             isSelected: selectedTheme.id === theme.id,
                             onClick: ()=>setTheme(theme),
                             ...theme
@@ -159,7 +163,7 @@ const UXThemeSwitchModal = ({ as = 'modal', backdrop, isOpen, onClose, onOpenCha
         })
     });
 };
-const UXThemeSwitch = ({ as = 'modal', backdrop, children })=>{
+const UXThemeSwitch = ({ children, ...restProps })=>{
     const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure();
     const renderChildren = ()=>{
         if (children) return children(onOpen);
@@ -174,8 +178,7 @@ const UXThemeSwitch = ({ as = 'modal', backdrop, children })=>{
         children: [
             renderChildren(),
             /*#__PURE__*/ jsx(UXThemeSwitchModal, {
-                as: as,
-                backdrop: backdrop,
+                ...restProps,
                 isOpen: isOpen,
                 onClose: onClose,
                 onOpenChange: onOpenChange