@janbox/storefront-ui 1.0.14 → 1.0.16

package/dist/lib/button/button.jsx

@@ -1,177 +0,0 @@
-import { Fragment, isValidElement, useRef } from 'react';
-import { useMergeRefs } from '@floating-ui/react';
-import { isNil, isString } from 'lodash-es';
-import { createPath, useNavigate } from 'react-router';
-import { getButtonProps } from './helpers';
-import { useRippleEffect } from '../../hooks';
-import { Icon } from '../icon';
-import { animateSpinStyle, truncateStyle } from '../../constants/emotion';
-import LoadingIcon from '@/assets/svg/loading-waiting.svg?raw';
-import { getColorVar, mediaQuery } from '../../theme';
-import { getColorShadesByVariant, getSizeVariantState, omitResponsiveProps, cn } from '../../utils';
-export const Button = ({ children, ref, ..._props }) => {
-    const buttonRef = useRef(null);
-    const { className } = useRippleEffect(buttonRef);
-    const mergedRef = useMergeRefs([ref, buttonRef]);
-    const { color, variant, anchor, prefix, suffix, isLoading, disabled, startIcon, endIcon, dangerouslySetInnerHTML, ...rest } = getButtonProps(_props);
-    const navigate = useNavigate();
-    const { dark, light, main, contrastText, placeholder: placeholderColor, ariaDisabledSurface, ariaDisabledText, } = getColorShadesByVariant(color);
-    const createStyle = (screen) => {
-        const { css } = rest[screen] ?? {};
-        return {
-            ...css,
-        };
-    };
-    const css = [
-        {
-            display: 'flex',
-            maxWidth: '100%',
-            width: 'fit-content',
-            position: 'relative',
-            justifyContent: 'center',
-            alignItems: 'center',
-            whiteSpace: 'nowrap',
-            '& > *:not([data-loading])': {
-                visibility: isLoading ? 'hidden' : undefined,
-            },
-            pointerEvents: isLoading ? 'none' : undefined,
-        },
-        variant === 'contained' && {
-            backgroundColor: isLoading ? placeholderColor : main,
-            color: contrastText,
-            ':hover': {
-                backgroundColor: dark,
-            },
-            ':disabled': {
-                backgroundColor: getColorVar('neutral.300'),
-                color: getColorVar('neutral.500'),
-            },
-            '&[aria-disabled=true]': {
-                backgroundColor: ariaDisabledSurface,
-                pointerEvents: 'none',
-            },
-        },
-        variant === 'outlined' && {
-            backgroundColor: getColorVar('surface.default'),
-            color: isLoading ? placeholderColor : main,
-            borderWidth: 1,
-            borderStyle: 'solid',
-            borderColor: isLoading ? placeholderColor : main,
-            ':hover': {
-                backgroundColor: light,
-            },
-            ':disabled': {
-                color: getColorVar('neutral.500'),
-                backgroundColor: getColorVar('neutral.300'),
-                borderColor: getColorVar('neutral.300'),
-            },
-            '&[aria-disabled=true]': {
-                color: ariaDisabledText,
-                pointerEvents: 'none',
-                borderColor: 'currentcolor',
-            },
-        },
-        variant === 'text' && {
-            backgroundColor: 'transparent',
-            color: isLoading ? placeholderColor : main,
-            ':hover': {
-                backgroundColor: light,
-            },
-            ':disabled': {
-                color: getColorVar('neutral.500'),
-                backgroundColor: getColorVar('neutral.300'),
-            },
-            '&[aria-disabled=true]': {
-                color: ariaDisabledText,
-            },
-        },
-        rest['aria-disabled'] && {
-            pointerEvents: 'none',
-        },
-        createStyle('xs'),
-        {
-            [mediaQuery('sm')]: createStyle('sm'),
-            [mediaQuery('md')]: createStyle('md'),
-            [mediaQuery('lg')]: createStyle('lg'),
-        },
-    ];
-    const onClick = (e) => {
-        // 1. Gọi custom onClick handler TRƯỚC
-        rest.onClick?.(e);
-        // 2. Cho phép handler ngăn chặn default behavior
-        if (e.defaultPrevented) {
-            return;
-        }
-        // 3. Nếu không có anchor, dừng lại (không cần gọi onClick nữa)
-        if (isNil(anchor?.to)) {
-            return;
-        }
-        // 4. Xử lý navigation
-        const { to, target, ...otherOptions } = anchor;
-        const href = isString(to) ? to : createPath(to);
-        if (target === '_blank') {
-            window.open(href, target);
-        }
-        else {
-            try {
-                const url = new URL(href);
-                window.location.href = url.toString();
-            }
-            catch (error) {
-                navigate(href, otherOptions);
-            }
-        }
-    };
-    return (<button css={css} disabled={disabled} {...omitResponsiveProps(rest)} onClick={onClick} className={cn(rest.className, className)} ref={mergedRef}>
-      {prefix}
-      {!!startIcon && (<Icon {...startIcon} css={{
-                flexShrink: 0,
-            }} xs={{
-                size: getSizeVariantState(rest.xs?.size).iconSize,
-                ...startIcon.xs,
-            }} sm={{
-                size: getSizeVariantState(rest.sm?.size).iconSize,
-                ...startIcon.sm,
-            }} md={{
-                size: getSizeVariantState(rest.md?.size).iconSize,
-                ...startIcon.md,
-            }} lg={{
-                size: getSizeVariantState(rest.lg?.size).iconSize,
-                ...startIcon.lg,
-            }}/>)}
-
-      <Fragment>
-        <>
-          {isValidElement(children) ? (children) : (<span dangerouslySetInnerHTML={dangerouslySetInnerHTML} css={truncateStyle}>
-              {children}
-            </span>)}
-        </>
-      </Fragment>
-
-      {!!endIcon && (<Icon {...endIcon} css={{
-                flexShrink: 0,
-            }} xs={{
-                size: getSizeVariantState(rest.xs?.size).iconSize,
-                ...endIcon.xs,
-            }} sm={{
-                size: getSizeVariantState(rest.sm?.size).iconSize,
-                ...endIcon.sm,
-            }} md={{
-                size: getSizeVariantState(rest.md?.size).iconSize,
-                ...endIcon.md,
-            }} lg={{
-                size: getSizeVariantState(rest.lg?.size).iconSize,
-                ...endIcon.lg,
-            }}/>)}
-      {suffix}
-      {isLoading && (<span data-loading css={{
-                position: 'absolute',
-                inset: 0,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-          <Icon css={animateSpinStyle} source={LoadingIcon}/>
-        </span>)}
-    </button>);
-};

package/dist/lib/button/index.js

@@ -1,3 +0,0 @@
-export * from './button';
-export * from './types';
-export * from './helpers';

package/dist/lib/button/types.js

@@ -1 +0,0 @@
-export {};

package/dist/lib/cascader/cascader-floating-content.jsx

@@ -1,341 +0,0 @@
-import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
-import { isNil, isString, trimStart } from 'lodash-es';
-import { findOptionPath, hasChildren, isExpandable } from './helpers';
-import { Input } from '../input';
-import { TextSkeleton } from '../loading/text-skeleton';
-import ArrowRightIcon from '@/assets/svg/arrow-right.svg?raw';
-import CheckIcon from '@/assets/svg/done-check.svg?raw';
-import { SvgLoader, VirtualizedList } from '../../components';
-import { truncateStyle } from '../../constants/emotion';
-import { ensureArray, getResponsiveProp, getSizeVariantState, matchSearch } from '../../utils';
-import { useControllableState, useWindowScreen } from '../../hooks';
-import { useFloatingContext } from '../floating';
-import { getColorVar, getTypographyVar } from '../../theme';
-const DEFAULT_DISPLAY_ROW_COUNT = 5;
-export const CascaderFloatingContent = ({ searchable, selectedPath, options, loadOptions, onChange, inputProps, listProps, separator, lazy, xs, sm, md, lg, }) => {
-    const { context } = useFloatingContext();
-    const searchInputRef = useRef(null);
-    const uniqueId = useId();
-    const [inputValue, setInputValue] = useControllableState({
-        defaultValue: inputProps?.defaultValue ?? '',
-        value: inputProps?.value,
-    });
-    const windowScreen = useWindowScreen();
-    // Track current navigation path (for displaying children)
-    const [expandedPath, setExpandedPath] = useState([]);
-    // Lazy loading state: merged options tree with dynamically loaded children
-    const [dynamicChildren, setDynamicChildren] = useState({});
-    const [isLoading, setIsLoading] = useState(false);
-    // On mount, resolve the expandedPath from selectedPath.
-    // For lazy mode, this progressively loads children along the path.
-    useEffect(() => {
-        if (selectedPath.length === 0)
-            return;
-        // Determine target: if the last segment is a leaf, expand to its parent level
-        const resolveExpandedPath = (fullPath, opts) => {
-            const pathOptions = findOptionPath(opts, fullPath);
-            const lastOption = pathOptions[pathOptions.length - 1];
-            if (lastOption && !isExpandable(lastOption)) {
-                return fullPath.slice(0, -1);
-            }
-            return fullPath;
-        };
-        if (!loadOptions) {
-            // Non-lazy: options are fully available, resolve synchronously
-            setExpandedPath(resolveExpandedPath(selectedPath, options));
-            return;
-        }
-        // Lazy: progressively load children along the selectedPath
-        let cancelled = false;
-        const loadAlongPath = async () => {
-            setIsLoading(true);
-            try {
-                let currentOpts = options;
-                const loadedChildren = {};
-                const pathSoFar = [];
-                // Walk each segment except the last (leaf) to load its children
-                const targetPath = resolveExpandedPath(selectedPath, options);
-                // If we can already resolve the full path without loading, just set it
-                const existingPath = findOptionPath(options, targetPath);
-                if (existingPath.length === targetPath.length) {
-                    if (!cancelled)
-                        setExpandedPath(targetPath);
-                    return;
-                }
-                for (let i = 0; i < targetPath.length; i++) {
-                    if (cancelled)
-                        return;
-                    const value = targetPath[i];
-                    const found = currentOpts.find((opt) => opt.value === value);
-                    if (!found)
-                        break;
-                    pathSoFar.push(found);
-                    if (isExpandable(found) && !hasChildren(found)) {
-                        // Need to load children for this node
-                        const children = await loadOptions(pathSoFar);
-                        if (cancelled)
-                            return;
-                        const cacheKey = targetPath.slice(0, i + 1).join('/');
-                        loadedChildren[cacheKey] = children;
-                        currentOpts = children;
-                    }
-                    else if (found.children?.length) {
-                        currentOpts = found.children;
-                    }
-                    else {
-                        break;
-                    }
-                }
-                if (!cancelled) {
-                    if (Object.keys(loadedChildren).length > 0) {
-                        setDynamicChildren((prev) => ({ ...prev, ...loadedChildren }));
-                    }
-                    setExpandedPath(targetPath);
-                }
-            }
-            finally {
-                if (!cancelled)
-                    setIsLoading(false);
-            }
-        };
-        loadAlongPath();
-        return () => {
-            cancelled = true;
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    // Merge external options with dynamically loaded children
-    const mergedOptions = useMemo(() => {
-        if (!loadOptions || Object.keys(dynamicChildren).length === 0)
-            return options;
-        const mergeRecursive = (opts, parentKey) => {
-            return opts.map((opt) => {
-                const key = parentKey ? `${parentKey}/${opt.value}` : opt.value;
-                const loaded = dynamicChildren[key];
-                const children = loaded ?? opt.children;
-                return {
-                    ...opt,
-                    children: children ? mergeRecursive(children, key) : undefined,
-                };
-            });
-        };
-        return mergeRecursive(options, '');
-    }, [options, dynamicChildren, loadOptions]);
-    // Navigate to a specific level via breadcrumb click
-    const handleBreadcrumbClick = (e) => {
-        const level = Number(e.currentTarget.dataset.index);
-        if (level < 0) {
-            setExpandedPath([]);
-        }
-        else {
-            setExpandedPath(expandedPath.slice(0, level + 1));
-        }
-    };
-    // Get expanded path options for breadcrumb display
-    const expandedOptions = useMemo(() => {
-        return findOptionPath(mergedOptions, expandedPath);
-    }, [mergedOptions, expandedPath]);
-    // Get current level options to display
-    const currentOptions = useMemo(() => {
-        if (expandedPath.length === 0) {
-            return mergedOptions;
-        }
-        let current = mergedOptions;
-        for (const value of expandedPath) {
-            const found = current.find((opt) => opt.value === value);
-            if (found?.children?.length) {
-                current = found.children;
-            }
-            else {
-                break;
-            }
-        }
-        return current;
-    }, [mergedOptions, expandedPath]);
-    const displayOptions = useMemo(() => {
-        if (!inputValue) {
-            return currentOptions;
-        }
-        return currentOptions.filter((option) => {
-            const searchLabels = ensureArray(option.searchLabel ?? []);
-            if (!searchLabels.length && isString(option.label)) {
-                searchLabels.push(option.label);
-            }
-            return matchSearch(searchLabels, inputValue);
-        });
-    }, [inputValue, currentOptions]);
-    const responsiveSize = isNil(windowScreen.name)
-        ? undefined
-        : getResponsiveProp({ xs, sm, md, lg }, 'size', windowScreen.name);
-    const { inputSize: rowMinHeight = 0, inputPaddingX } = getSizeVariantState(responsiveSize);
-    const onInputChange = (e) => {
-        e.target.value = trimStart(e.target.value);
-        setInputValue(e.target.value);
-        inputProps?.onChange?.(e);
-    };
-    // Focus search input on mount (component only mounts when floating is open)
-    useEffect(() => {
-        const timer = setTimeout(() => {
-            searchInputRef.current?.focus();
-        }, 100);
-        return () => clearTimeout(timer);
-    }, []);
-    const estimateSize = useCallback((_index) => {
-        return rowMinHeight ?? 0;
-    }, [rowMinHeight]);
-    const getItemKey = useCallback((index) => {
-        const option = displayOptions.at(index);
-        return option ? option.value : `${uniqueId}-${index}`;
-    }, [displayOptions, uniqueId]);
-    // Render breadcrumbs navigation
-    const renderBreadcrumbs = () => {
-        if (expandedPath.length === 0)
-            return null;
-        return (<div css={{
-                paddingLeft: inputPaddingX,
-                paddingRight: inputPaddingX,
-                minHeight: rowMinHeight,
-                borderTop: `1px solid ${getColorVar('neutral.200')}`,
-                display: 'flex',
-                alignItems: 'center',
-                gap: '0.25rem',
-                flexWrap: 'wrap',
-                paddingTop: '0.25rem',
-                paddingBottom: '0.25rem',
-            }}>
-        {/* Root/All button */}
-        <button data-index={-1} type="button" onClick={handleBreadcrumbClick} css={{
-                color: getColorVar('neutral.500'),
-                transition: 'color 150ms',
-                '&:hover': { color: getColorVar('primary.600') },
-            }}>
-          All
-        </button>
-
-        {/* Path items */}
-        {expandedOptions.map((opt, idx) => (<div key={`${uniqueId}-breadcrumb-${opt.value}`} css={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
-            <span css={{ color: getColorVar('neutral.400') }}>{separator}</span>
-            <button data-index={idx} type="button" onClick={handleBreadcrumbClick} css={{
-                    color: idx === expandedOptions.length - 1 ? getColorVar('primary.600') : getColorVar('neutral.600'),
-                    fontWeight: idx === expandedOptions.length - 1 ? 500 : undefined,
-                    transition: 'color 150ms',
-                    '&:hover': { color: getColorVar('primary.600') },
-                }}>
-              {opt.breadcrumbLabel ?? opt.label}
-            </button>
-          </div>))}
-      </div>);
-    };
-    const RowComponent = ({ row }) => {
-        const rowData = displayOptions.at(row.index);
-        if (isNil(rowData))
-            return <></>;
-        const isSelected = selectedPath.includes(rowData.value);
-        const handleSelect = async () => {
-            if (rowData.disabled || isLoading)
-                return;
-            const parentPath = [];
-            let current = mergedOptions;
-            for (const value of expandedPath) {
-                const found = current.find((opt) => opt.value === value);
-                if (found?.children?.length) {
-                    parentPath.push(value);
-                    current = found.children;
-                }
-                else {
-                    break;
-                }
-            }
-            const newPath = [...parentPath, rowData.value];
-            const newSelectedOptions = findOptionPath(mergedOptions, newPath);
-            if (isExpandable(rowData)) {
-                if (!hasChildren(rowData) && loadOptions) {
-                    const cacheKey = newPath.join('/');
-                    setIsLoading(true);
-                    try {
-                        const children = await loadOptions(newSelectedOptions);
-                        setDynamicChildren((prev) => ({ ...prev, [cacheKey]: children }));
-                        setExpandedPath(newPath);
-                    }
-                    finally {
-                        setIsLoading(false);
-                    }
-                }
-                else {
-                    setExpandedPath(newPath);
-                }
-            }
-            else {
-                onChange?.(newPath, newSelectedOptions);
-                context.onOpenChange?.(false);
-            }
-            setInputValue('');
-            setTimeout(() => {
-                searchInputRef.current?.focus();
-            });
-        };
-        return (<div key={`${uniqueId}-option-${rowData.value}`} aria-hidden role="button" onClick={handleSelect} css={{
-                minHeight: rowMinHeight,
-                paddingLeft: inputPaddingX,
-                paddingRight: inputPaddingX,
-                paddingTop: '0.25rem',
-                paddingBottom: '0.25rem',
-                display: 'flex',
-                alignItems: 'center',
-                gap: '0.5rem',
-                borderRadius: '0.5rem',
-                transition: 'background-color 150ms, color 150ms',
-                '&:hover': { backgroundColor: getColorVar('neutral.100') },
-                ...(isSelected && !isExpandable(rowData)
-                    ? {
-                        color: getColorVar('primary.600'),
-                        backgroundColor: getColorVar('primary.100'),
-                    }
-                    : {}),
-                ...(rowData.disabled ? { opacity: 0.5, cursor: 'not-allowed' } : {}),
-            }}>
-        {isLoading ? (<TextSkeleton />) : (<>
-            <div css={{ flex: 1, ...truncateStyle }}>{rowData.label}</div>
-            {isExpandable(rowData) ? (<SvgLoader source={ArrowRightIcon} width={20} height={20} css={{ color: getColorVar('neutral.400') }}/>) : (isSelected && (<SvgLoader source={CheckIcon} width={20} height={20} css={{ color: getColorVar('primary.600') }}/>))}
-          </>)}
-      </div>);
-    };
-    return (<div css={{
-            paddingTop: '0.5rem',
-            paddingBottom: '0.5rem',
-            border: `1px solid ${getColorVar('border.default')}`,
-            borderRadius: '0.5rem',
-            boxShadow: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
-            fontSize: getTypographyVar('sm').fontSize,
-            lineHeight: getTypographyVar('sm').lineHeight,
-            backgroundColor: getColorVar('surface.default'),
-        }}>
-      {/* 1. Top - Search input (optional) */}
-      {!searchable && (<div css={{
-                paddingLeft: '0.5rem',
-                paddingRight: '0.5rem',
-                paddingTop: '0.5rem',
-                paddingBottom: '0.5rem',
-            }}>
-          <Input xs={{ size: xs?.size }} sm={{ size: sm?.size }} md={{ size: md?.size }} lg={{ size: lg?.size }} value={inputValue} placeholder="Search..." {...inputProps} onChange={onInputChange} ref={searchInputRef}/>
-        </div>)}
-
-      {/* 2. Center - Current level options */}
-      <VirtualizedList {...listProps} css={{
-            paddingLeft: 4,
-            paddingRight: 4,
-            ...(isLoading ? { cursor: 'wait', pointerEvents: 'none' } : {}),
-        }} options={{
-            count: displayOptions.length,
-            estimateSize,
-            getItemKey,
-            overscan: lazy ? undefined : currentOptions.length,
-        }} style={{
-            maxHeight: rowMinHeight * DEFAULT_DISPLAY_ROW_COUNT,
-            ...listProps?.style,
-        }} RowComponent={RowComponent}/>
-
-      {/* 3. Bottom - Breadcrumbs navigation */}
-      {renderBreadcrumbs()}
-    </div>);
-};

package/dist/lib/cascader/cascader.jsx

@@ -1,86 +0,0 @@
-import { useRef } from 'react';
-import { isNil } from 'lodash-es';
-import { CascaderFloatingContent } from './cascader-floating-content';
-import { getCascaderProps } from './helpers';
-import { InputMask } from '../input-mask';
-import ArrowDownIcon from '@/assets/svg/arrow-down.svg?raw';
-import { getColorVar, getTypographyVar } from '../../theme';
-import { truncateStyle } from '../../constants/emotion';
-import { getSizeVariantState } from '../../utils';
-import { useControllableState } from '../../hooks';
-import { Floating, FloatingContent, FloatingTrigger } from '../floating';
-import { FormHelperText } from '../form-helper-text';
-import { SvgLoader } from '../../components';
-import { Primitive } from '../primitive';
-const DEFAULT_SEPARATOR = '/';
-export const Cascader = ({ ref, ..._props }) => {
-    const { placement = 'bottom-start', open, onOpenChange, searchable = false, value: selectedPath = [], valueRenderer, options, loadOptions, onChange, placeholder, listProps, separator = DEFAULT_SEPARATOR, helperText, error, containerProps, inputProps, fullWidth = true, lazy = true, menuWidth = 'exact-reference', ...rest } = getCascaderProps(_props);
-    const floatingRef = useRef(null);
-    const [isOpen, setIsOpen] = useControllableState({
-        defaultValue: open ?? false,
-        value: open,
-    });
-    const handleOpenChange = (nextOpen, event, reason) => {
-        setIsOpen(nextOpen);
-        onOpenChange?.(nextOpen, event, reason);
-    };
-    const sizeOptions = {
-        apply({ elements }) {
-            const { width } = elements.reference.getBoundingClientRect();
-            const sizeStyle = {};
-            switch (menuWidth) {
-                case 'exact-reference':
-                    sizeStyle.width = `${width}px`;
-                    break;
-                case 'min-reference':
-                    sizeStyle.minWidth = `${width}px`;
-                    break;
-                default:
-                    sizeStyle.width = `${menuWidth}px`;
-                    break;
-            }
-            Object.assign(elements.floating.style, sizeStyle);
-        },
-    };
-    const getTextCss = (sizeVariant) => {
-        if (isNil(sizeVariant))
-            return {};
-        const { textVariant } = getSizeVariantState(sizeVariant);
-        if (isNil(textVariant))
-            return {};
-        return getTypographyVar(textVariant);
-    };
-    return (<Primitive {...containerProps} css={{
-            display: 'flex',
-            flexDirection: 'column',
-            ...(fullWidth ? { width: '100%' } : {}),
-        }} as="div">
-      <Floating clickProps={{
-            enabled: true,
-        }} dismissProps={{
-            enabled: true,
-        }} sizeOptions={sizeOptions} placement={placement} open={isOpen} onOpenChange={handleOpenChange} ref={floatingRef}>
-        <FloatingTrigger>
-          <InputMask type="button" error={isOpen ? false : error} as="button" suffix={<SvgLoader source={ArrowDownIcon} width={20} height={20} css={{
-                transition: 'transform 150ms',
-                ...(isOpen ? { transform: 'rotate(-180deg)' } : {}),
-            }}/>} {...rest} ref={ref}>
-            <div css={[
-            {
-                flex: 1,
-                textAlign: 'left',
-                ...truncateStyle,
-            },
-            getTextCss(rest.xs?.size),
-        ]}>
-              {selectedPath.length > 0 ? (<div>{valueRenderer ?? selectedPath.join(' / ')}</div>) : (<div css={{ color: getColorVar('neutral.400') }}>{placeholder}</div>)}
-            </div>
-          </InputMask>
-        </FloatingTrigger>
-        <FloatingContent>
-          <CascaderFloatingContent searchable={searchable} selectedPath={selectedPath} options={options} loadOptions={loadOptions} onChange={onChange} inputProps={inputProps} listProps={listProps} separator={separator} lazy={lazy} xs={rest.xs} sm={rest.sm} md={rest.md} lg={rest.lg}/>
-        </FloatingContent>
-      </Floating>
-      <FormHelperText error={error}>{helperText}</FormHelperText>
-    </Primitive>);
-};

package/dist/lib/cascader/index.js

@@ -1,2 +0,0 @@
-export * from "./cascader";
-export * from "./types";

package/dist/lib/cascader/types.js

@@ -1 +0,0 @@
-export {};

package/dist/lib/checkbox/checkbox.jsx

@@ -1,33 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useMergeRefs } from '@floating-ui/react';
-import classes from './checkbox.module.scss';
-import { SvgLoader } from '../../components';
-import { cn } from '../../utils';
-import CheckIcon from '../../assets/svg/done-check.svg?raw';
-import MinusIcon from '../../assets/svg/minus.svg?raw';
-import { getColorShadesByVariant } from '../../utils';
-export const Checkbox = ({ children, indeterminate, color = 'primary', className, ref, containerProps, ...props }) => {
-    const { main, contrastText } = getColorShadesByVariant(color);
-    const inputRef = useRef(null);
-    const mergedRefs = useMergeRefs([ref, inputRef]);
-    // Set indeterminate property on the actual DOM element
-    useEffect(() => {
-        const inputEl = inputRef.current;
-        if (inputEl) {
-            inputEl.indeterminate = indeterminate ?? false;
-        }
-    }, [indeterminate]);
-    return (<label {...containerProps} className={cn(classes.checkbox__container, containerProps?.className)} css={{
-            '--checkbox-color': main,
-            '--checkbox-contrast-text': contrastText,
-        }}>
-      <span className={classes.checkbox__main}>
-        <input {...props} type="checkbox" className={cn(classes.checkbox__input, className)} ref={mergedRefs}/>
-        <span className={classes.checkbox__checkmark}>
-          <SvgLoader className={classes.checkbox__icon_checked} width={18} height={18} source={CheckIcon}/>
-          <SvgLoader className={classes.checkbox__icon_indeterminate} width={18} height={18} source={MinusIcon}/>
-        </span>
-      </span>
-      {children}
-    </label>);
-};