@janbox/storefront-ui 1.0.14 → 1.0.16

package/dist/lib/pagination/pagination.jsx

@@ -1,142 +0,0 @@
-import { forwardRef, Fragment } from 'react';
-import { getPaginationProps, getPageRange } from './helpers';
-import { Icon } from '../icon';
-import { IconButton } from '../icon-button';
-import { Text } from '../text';
-import ArrowLeftIcon from '../../assets/svg/arrow-left.svg?raw';
-import ArrowForwardIcon from '../../assets/svg/arrow-forward.svg?raw';
-import ArrowRightIcon from '../../assets/svg/arrow-right.svg?raw';
-import { getTypographyVar } from '../../theme';
-import { getSizeVariantState } from '../../utils';
-export const Pagination = forwardRef((_props, ref) => {
-    const { page = 1, count = 1, onChange, disabled, showFirstPageButton, showLastPageButton, showNextPageButton, showPrevPageButton, siblingCount, states, xs, sm, md, lg, ...rest } = getPaginationProps(_props);
-    const sizeVariantState = {
-        xs: getSizeVariantState(xs?.size),
-        sm: getSizeVariantState(sm?.size),
-        md: getSizeVariantState(md?.size),
-        lg: getSizeVariantState(lg?.size),
-    };
-    // Get the current active siblingCount based on screen
-    // Generate the page numbers to display with responsive siblingCount
-    const pageRange = getPageRange(page, count, siblingCount);
-    const css = [
-        {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: 4,
-        },
-    ];
-    const handlePageClick = (e) => {
-        const newPage = Number(e.currentTarget.value);
-        if (disabled || newPage === page)
-            return;
-        if (onChange)
-            onChange(newPage);
-    };
-    const handlePrevClick = (_e) => {
-        if (disabled || page <= 1)
-            return;
-        if (onChange)
-            onChange(page - 1);
-    };
-    const handleNextClick = (_e) => {
-        if (disabled || page >= count)
-            return;
-        if (onChange)
-            onChange(page + 1);
-    };
-    const handleFirstClick = (_e) => {
-        if (disabled || page <= 1)
-            return;
-        if (onChange)
-            onChange(1);
-    };
-    const handleLastClick = (_e) => {
-        if (disabled || page >= count)
-            return;
-        if (onChange)
-            onChange(count);
-    };
-    const PaginationButton = (buttonProps) => {
-        return (<IconButton disabled={disabled} variant={states?.normal?.variant} {...buttonProps} xs={{ size: xs?.size, ...buttonProps.xs }} sm={{ size: sm?.size, ...buttonProps.sm }} md={{ size: md?.size, ...buttonProps.md }} lg={{ size: lg?.size, ...buttonProps.lg }}/>);
-    };
-    const PaginationIcon = (iconProps) => {
-        return (<Icon xs={{
-                size: getSizeVariantState(xs?.size).iconSize,
-            }} sm={{
-                size: getSizeVariantState(sm?.size).iconSize,
-            }} md={{
-                size: getSizeVariantState(md?.size).iconSize,
-            }} lg={{
-                size: getSizeVariantState(lg?.size).iconSize,
-            }} {...iconProps}/>);
-    };
-    return (<div css={css} {...rest} ref={ref}>
-      {/* First page button */}
-
-      {showFirstPageButton && (<PaginationButton aria-disabled={page <= 1} color={states?.normal?.color} onClick={handleFirstClick}>
-          <PaginationIcon css={{ transform: 'rotate(180deg)' }} source={ArrowForwardIcon}/>
-        </PaginationButton>)}
-
-      {/* Previous page button */}
-      {showPrevPageButton && (<PaginationButton aria-disabled={page <= 1} color={states?.normal?.color} onClick={handlePrevClick}>
-          <PaginationIcon source={ArrowLeftIcon}/>
-        </PaginationButton>)}
-
-      {/* Page numbers */}
-      {pageRange.map((pageItem, index) => {
-            const isActive = pageItem.type === 'page' && pageItem.page === page;
-            return (<Fragment key={index}>
-            {pageItem.type === 'ellipsis' && <PaginationButton color={states?.normal?.color}>...</PaginationButton>}
-            {pageItem.type === 'page' && (<PaginationButton color={isActive ? states?.active?.color : states?.normal?.color} value={pageItem.page} variant={isActive ? states?.active?.variant : states?.normal?.variant} onClick={handlePageClick}>
-                <Text xs={{
-                        css: {
-                            paddingLeft: 2,
-                            paddingRight: 2,
-                            ...(sizeVariantState.xs.textVariant
-                                ? {
-                                    fontSize: getTypographyVar(sizeVariantState.xs.textVariant).fontSize,
-                                    lineHeight: getTypographyVar(sizeVariantState.xs.textVariant).lineHeight,
-                                }
-                                : {}),
-                        },
-                    }} sm={{
-                        css: sizeVariantState.sm.textVariant
-                            ? {
-                                fontSize: getTypographyVar(sizeVariantState.sm.textVariant).fontSize,
-                                lineHeight: getTypographyVar(sizeVariantState.sm.textVariant).lineHeight,
-                            }
-                            : {},
-                    }} md={{
-                        css: sizeVariantState.md.textVariant
-                            ? {
-                                fontSize: getTypographyVar(sizeVariantState.md.textVariant).fontSize,
-                                lineHeight: getTypographyVar(sizeVariantState.md.textVariant).lineHeight,
-                            }
-                            : {},
-                    }} lg={{
-                        css: sizeVariantState.lg.textVariant
-                            ? {
-                                fontSize: getTypographyVar(sizeVariantState.lg.textVariant).fontSize,
-                                lineHeight: getTypographyVar(sizeVariantState.lg.textVariant).lineHeight,
-                            }
-                            : {},
-                    }}>
-                  {pageItem.page}
-                </Text>
-              </PaginationButton>)}
-          </Fragment>);
-        })}
-
-      {/* Next page button */}
-      {showNextPageButton && (<PaginationButton aria-disabled={page >= count} color={states?.normal?.color} onClick={handleNextClick}>
-          <PaginationIcon source={ArrowRightIcon}/>
-        </PaginationButton>)}
-
-      {/* Last page button */}
-      {showLastPageButton && (<PaginationButton aria-disabled={page >= count} color={states?.normal?.color} onClick={handleLastClick}>
-          <PaginationIcon source={ArrowForwardIcon}/>
-        </PaginationButton>)}
-    </div>);
-});

package/dist/lib/pagination/types.js

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

package/dist/lib/phone-input/index.js

@@ -1,2 +0,0 @@
-export * from './phone-input';
-export * from './types';

package/dist/lib/phone-input/phone-input.jsx

@@ -1,148 +0,0 @@
-import { forwardRef, useEffect, useRef, useState } from 'react';
-import { useMergeRefs } from '@floating-ui/react';
-import { isNil } from 'lodash-es';
-import { phone } from 'phone';
-import countries from '../../assets/json/countries.json';
-import { useControllableState } from '../../hooks';
-import { getColorShadesByVariant } from '../../utils';
-import { getColorVar } from '../../theme';
-import { Flag } from '../flag';
-import { FormHelperText } from '../form-helper-text';
-import { Input } from '../input';
-import { InputMask } from '../input-mask';
-import { Select } from '../select';
-const CountryRowLabel = ({ code, name, dial_code }) => {
-    return (<div css={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-      <Flag countryCode={code}/>
-      <span css={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-        {dial_code} ({name})
-      </span>
-    </div>);
-};
-const SelectedRenderer = ({ code, dial_code }) => {
-    return (<div css={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-      <Flag countryCode={code}/>
-      <span css={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{dial_code}</span>
-    </div>);
-};
-const parsePhoneInputValue = (value) => {
-    if (isNil(value)) {
-        return value;
-    }
-    if (value.countryCode) {
-        return {
-            ...value,
-            dialCode: value.dialCode ?? countries.find((country) => country.code === value.countryCode)?.dial_code,
-        };
-    }
-    const { countryIso2 } = phone([value.dialCode, value.nationalNumber].filter(Boolean).join(''));
-    return {
-        ...value,
-        countryCode: countryIso2 ?? countries.find((country) => country.dial_code === value.dialCode)?.code,
-    };
-};
-export const PhoneInput = forwardRef(({ error, defaultValue, value, onChange, containerProps, helperText, disabled, ...props }, ref) => {
-    const [selectOpen, setSelectOpen] = useState(false);
-    const [inputFocused, setInputFocused] = useState(false);
-    const inputRef = useRef(null);
-    const wrapperRef = useRef(null);
-    const mergedRefs = useMergeRefs([ref, wrapperRef]);
-    const [wrapperWidth, setWrapperWidth] = useState(0);
-    useEffect(() => {
-        const resizeObserver = new ResizeObserver((entries) => {
-            const domRect = entries.at(0)?.target.getBoundingClientRect();
-            if (domRect) {
-                setWrapperWidth(domRect.width);
-            }
-        });
-        if (wrapperRef.current) {
-            resizeObserver.observe(wrapperRef.current);
-        }
-        return () => resizeObserver.disconnect();
-    }, []);
-    const [internalValue, setInternalValue] = useControllableState({
-        defaultValue: parsePhoneInputValue(defaultValue) ?? {
-            countryCode: countries.at(0)?.code,
-        },
-        value: parsePhoneInputValue(value),
-    });
-    const triggerChange = (next) => {
-        setInternalValue(next);
-        onChange?.(next);
-    };
-    const onDialCodeChange = (_, option) => {
-        triggerChange({
-            ...internalValue,
-            dialCode: option.dial_code,
-            countryCode: option.code,
-        });
-        inputRef.current?.select();
-    };
-    const onNationalNumberChange = (e) => {
-        e.target.value = e.target.value.replace(/[^0-9]/g, '');
-        triggerChange({
-            ...internalValue,
-            nationalNumber: e.target.value,
-        });
-    };
-    const inputDisplayValue = (() => {
-        const originalValue = internalValue.nationalNumber ?? '';
-        return inputFocused ? originalValue : originalValue.replace(/^(\d{1,3})(\d{0,3})?(\d*)$/, '$1 $2 $3');
-    })();
-    return (<div {...containerProps} css={[{ display: 'flex', flexDirection: 'column', width: '100%' }, containerProps?.css]}>
-        <InputMask {...props} css={[
-            error &&
-                !selectOpen && {
-                '&::after': { borderColor: getColorVar('red.600') },
-            },
-            inputFocused && {
-                '&::after': { borderColor: getColorVar('primary.600') },
-                boxShadow: `0 0 0 3px ${getColorVar('primary.300')}`,
-            },
-            disabled && {
-                backgroundColor: getColorShadesByVariant('neutral').disabledSurface,
-                pointerEvents: 'none',
-            },
-            props.css,
-        ]} ref={mergedRefs}>
-          <div css={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center' }}>
-            <Select containerProps={{
-            css: { width: 'fit-content', minWidth: 80 },
-        }} css={{
-            paddingRight: 0,
-        }} xs={{
-            outline: {
-                top: 0,
-                right: 0,
-                bottom: 0,
-                left: 0,
-            },
-        }} listProps={{
-            style: {
-                width: wrapperWidth,
-            },
-        }} value={internalValue.countryCode ?? null} onChange={onDialCodeChange} options={countries} disabled={disabled} selectedRenderer={SelectedRenderer} optionLabel={CountryRowLabel} optionValue="code" optionSearchLabel={['name', 'dial_code', 'code']} open={selectOpen} onOpenChange={setSelectOpen}/>
-            <div css={{
-            borderRight: '1px solid',
-            borderColor: getColorVar('border.default'),
-            height: '66.666667%',
-            marginLeft: 8,
-            marginRight: 8,
-        }}/>
-            <Input value={inputDisplayValue} disabled={disabled} containerProps={{
-            css: { flex: 1 },
-        }} mainProps={{
-            style: {
-                paddingLeft: 0,
-                boxShadow: 'none',
-            },
-        }} onChange={onNationalNumberChange} xs={{
-            css: {
-                borderWidth: 0,
-            },
-        }} onFocus={() => setInputFocused(true)} onBlur={() => setInputFocused(false)} ref={inputRef}/>
-          </div>
-        </InputMask>
-        <FormHelperText error={error}>{helperText}</FormHelperText>
-      </div>);
-});

package/dist/lib/phone-input/types.js

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

package/dist/lib/popover/index.js

@@ -1,4 +0,0 @@
-export * from './popover';
-export * from './popover-trigger';
-export * from './popover-content';
-export * from './popover-close';

package/dist/lib/popover/popover/index.js

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

package/dist/lib/popover/popover/popover.jsx

@@ -1,17 +0,0 @@
-import { useControllableState } from '../../../hooks';
-import { Floating } from '../../..';
-export const Popover = ({ ...props }) => {
-    const [open, setOpen] = useControllableState({
-        defaultValue: false,
-        value: props.open,
-    });
-    const onOpenChange = (open, event, reason) => {
-        setOpen(open);
-        props.onOpenChange?.(open, event, reason);
-    };
-    return (<Floating dismissProps={{
-            enabled: true,
-        }} clickProps={{
-            enabled: true,
-        }} {...props} open={open} onOpenChange={onOpenChange}/>);
-};

package/dist/lib/popover/popover/types.js

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

package/dist/lib/popover/popover-close/index.js

@@ -1,2 +0,0 @@
-export * from './popover-close';
-export * from './types';

package/dist/lib/popover/popover-close/popover-close.jsx

@@ -1,2 +0,0 @@
-import { FloatingClose } from '../../floating';
-export const PopoverClose = FloatingClose;

package/dist/lib/popover/popover-close/types.js

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

package/dist/lib/popover/popover-content/index.js

@@ -1,2 +0,0 @@
-export * from './popover-content';
-export * from './types';

package/dist/lib/popover/popover-content/popover-content.jsx

@@ -1,13 +0,0 @@
-import { FloatingContent } from '../../../lib/floating/floating-content';
-import { getColorVar } from '../../../theme';
-export const PopoverContent = (props) => {
-    return (<FloatingContent css={{
-            backgroundColor: getColorVar('surface.default'),
-            padding: '0.75rem',
-            borderRadius: '0.75rem',
-            borderWidth: '1px',
-            borderStyle: 'solid',
-            borderColor: getColorVar('neutral.100'),
-            boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)',
-        }} {...props}/>);
-};

package/dist/lib/popover/popover-content/types.js

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

package/dist/lib/popover/popover-trigger/index.js

@@ -1,2 +0,0 @@
-export * from './popover-trigger';
-export * from './types';

package/dist/lib/popover/popover-trigger/popover-trigger.jsx

@@ -1,4 +0,0 @@
-import { FloatingTrigger } from '../../..';
-export const PopoverTrigger = (props) => {
-    return <FloatingTrigger {...props}/>;
-};

package/dist/lib/popover/popover-trigger/types.js

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

package/dist/lib/primitive/index.js

@@ -1,2 +0,0 @@
-export * from './primitive';
-export * from './types';

package/dist/lib/primitive/primitive.jsx

@@ -1,12 +0,0 @@
-import { mediaQuery } from '../../theme';
-export const Primitive = ({ as, xs, sm, md, lg, ...rest }) => {
-    const Component = as ?? 'div';
-    return (<Component css={[
-            xs?.css,
-            {
-                [mediaQuery('sm')]: sm?.css,
-                [mediaQuery('md')]: md?.css,
-                [mediaQuery('lg')]: lg?.css,
-            },
-        ]} {...rest}/>);
-};

package/dist/lib/primitive/types.js

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

package/dist/lib/progress/index.js

@@ -1,2 +0,0 @@
-export * from './types';
-export * from './progress';

package/dist/lib/progress/progress.jsx

@@ -1,28 +0,0 @@
-import { getColorVar } from '../../theme';
-export const Progress = (props) => {
-    const { value, direction = 'horizontal', activeProps = {}, children, ...rest } = props;
-    const { style: activeStyle, ...activeRest } = activeProps;
-    return (<div {...rest} css={[
-            {
-                backgroundColor: getColorVar('neutral.200'),
-                overflow: 'hidden',
-                borderRadius: '9999px',
-            },
-            direction === 'horizontal' && { width: '100%', height: '0.5rem' },
-            direction === 'vertical' && { height: '100%', width: '0.5rem' },
-        ]}>
-      <div {...activeRest} css={[
-            {
-                overflow: 'hidden',
-                overflowWrap: 'break-word',
-                borderRadius: '9999px',
-                backgroundColor: getColorVar('primary.600'),
-                transition: 'width 300ms ease-in-out',
-            },
-            direction === 'horizontal' && { height: '100%' },
-            direction === 'vertical' && { width: '100%' },
-        ]} style={{ [direction === 'horizontal' ? 'width' : 'height']: `${value}%`, ...activeStyle }}>
-        {children}
-      </div>
-    </div>);
-};

package/dist/lib/progress/types.js

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

package/dist/lib/radio-button/index.js

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

package/dist/lib/radio-button/radio-button.jsx

@@ -1,21 +0,0 @@
-import { forwardRef } from 'react';
-import { getRadioButtonProps } from './helpers';
-import classes from './radio-button.module.scss';
-import { cn } from '../../utils';
-import { getColorShadesByVariant } from '../../utils';
-export const RadioButton = forwardRef((_props, ref) => {
-    const { children, color = 'primary', className, containerProps, ...props } = getRadioButtonProps(_props);
-    const { main } = getColorShadesByVariant(color);
-    return (<label {...containerProps} css={[
-            {
-                '--radio-button-color': main,
-            },
-            containerProps?.css,
-        ]} className={cn(classes.radio_button__container, containerProps?.className)}>
-      <span className={classes.radio_button__main}>
-        <input {...props} className={cn(classes.radio_button__input, className)} type="radio" ref={ref}/>
-        <span className={classes.radio_button__checkmark}/>
-      </span>
-      {children}
-    </label>);
-});

package/dist/lib/radio-button/radio-button.module.scss

@@ -1,83 +0,0 @@
-$color: var(--radio-button-color);
-
-.radio_button__container {
-  display: flex;
-  width: fit-content;
-  max-width: 100%;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.radio_button__container:has(.radio_button__input:disabled) {
-  cursor: default;
-  pointer-events: none;
-}
-
-.radio_button__input {
-  width: 0;
-  height: 0;
-  opacity: 0;
-  display: none;
-
-  &:checked + .radio_button__checkmark::after {
-    transform: scale(1);
-  }
-}
-
-.radio_button__main {
-  position: relative;
-  display: flex;
-  border-radius: 9999px;
-  padding: 0.125rem;
-  width: 1.5rem;
-  height: 1.5rem;
-  flex-shrink: 0;
-}
-
-.radio_button__checkmark {
-  color: var(--color-neutral-600);
-  width: 100%;
-  height: 100%;
-  border-width: 1px;
-  border-style: solid;
-  border-color: currentColor;
-  border-radius: 9999px;
-  position: relative;
-
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    border-width: 2px;
-    border-style: solid;
-    background-clip: content-box;
-    width: 100%;
-    height: 100%;
-    border-radius: 9999px;
-    transform: scale(0);
-    transition-property: transform;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 300ms;
-    border-color: transparent;
-    background-color: currentColor;
-  }
-}
-
-.radio_button__container:hover {
-  .radio_button__checkmark {
-    color: $color;
-    box-shadow: 0 1px 3px 0 currentColor, 0 1px 2px -1px currentColor;
-  }
-}
-
-.radio_button__input:checked + .radio_button__checkmark {
-  color: $color;
-}
-
-.radio_button__input:disabled + .radio_button__checkmark {
-  color: var(--color-neutral-300);
-}

package/dist/lib/radio-button/types.js

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

package/dist/lib/select/index.js

@@ -1,2 +0,0 @@
-export * from './select';
-export * from './types';