@janbox/storefront-ui 1.0.14 → 1.0.16

package/dist/lib/checkbox/checkbox.module.scss

@@ -1,101 +0,0 @@
-$color: var(--checkbox-color);
-$contrast-text: var(--checkbox-contrast-text);
-
-.checkbox__container {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  width: fit-content;
-  max-width: 100%;
-}
-
-.checkbox__container:has(.checkbox__input:disabled) {
-  cursor: default;
-  pointer-events: none;
-}
-
-.checkbox__main {
-  position: relative;
-  display: inline-flex;
-  border-radius: 9999px;
-  padding: 0.125rem;
-  width: 1.5rem;
-  height: 1.5rem;
-  flex-shrink: 0;
-}
-
-.checkbox__input {
-  width: 0;
-  height: 0;
-  opacity: 0;
-  display: none;
-}
-
-.checkbox__checkmark {
-  position: relative;
-  color: var(--color-neutral-600);
-  width: 100%;
-  height: 100%;
-  border-width: 1px;
-  border-style: solid;
-  border-color: currentColor;
-  border-radius: 0.25rem;
-}
-
-.checkbox__icon {
-  color: white;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  opacity: 0;
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.checkbox__icon_indeterminate {
-  @extend .checkbox__icon;
-}
-
-.checkbox__icon_checked {
-  @extend .checkbox__icon;
-}
-
-.checkbox__container:hover {
-  .checkbox__checkmark {
-    color: $color;
-    box-shadow: 0 1px 3px 0 currentColor, 0 1px 2px -1px currentColor;
-  }
-}
-
-.checkbox__input:checked + .checkbox__checkmark,
-.checkbox__input:indeterminate + .checkbox__checkmark {
-  color: $color;
-  background-color: currentColor;
-}
-
-.checkbox__input:indeterminate + .checkbox__checkmark {
-  .checkbox__icon_indeterminate {
-    opacity: 1;
-  }
-
-  .checkbox__icon_checked {
-    opacity: 0;
-  }
-}
-
-.checkbox__input:checked + .checkbox__checkmark {
-  .checkbox__icon_checked {
-    opacity: 1;
-  }
-
-  .checkbox__icon_indeterminate {
-    opacity: 0;
-  }
-}
-
-.checkbox__input:disabled + .checkbox__checkmark {
-  color: var(--color-neutral-300);
-}

package/dist/lib/checkbox/index.js

@@ -1 +0,0 @@
-export { Checkbox } from './checkbox';

package/dist/lib/checkbox/types.js

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

package/dist/lib/chip/chip.jsx

@@ -1,51 +0,0 @@
-import { getChipProps } from "./helpers";
-import { getColorShadesByVariant, getSizeVariantState } from "../../utils";
-import { getTypographyVar, mediaQuery } from "../../theme";
-export const Chip = ({ children, ..._props }) => {
-    const { xs, sm, md, lg, color = "green", ...rest } = getChipProps(_props);
-    const { light, main } = getColorShadesByVariant(color);
-    return (<div {...rest} css={[
-            {
-                width: "fit-content",
-                maxWidth: "100%",
-                display: "flex",
-                alignItems: "center",
-                backgroundColor: light,
-                borderTopWidth: 1,
-                borderRightWidth: 1,
-                borderBottomWidth: 1,
-                borderLeftWidth: 1,
-                borderTopLeftRadius: 8,
-                borderTopRightRadius: 8,
-                borderBottomLeftRadius: 8,
-                borderBottomRightRadius: 8,
-                borderColor: main,
-                color: main,
-            },
-            createStyle(xs),
-            {
-                [mediaQuery("sm")]: createStyle(sm),
-                [mediaQuery("md")]: createStyle(md),
-                [mediaQuery("lg")]: createStyle(lg),
-            },
-        ]}>
-      {children}
-    </div>);
-};
-const createStyle = ({ css, size } = {}) => {
-    const { inputSize, inputPaddingX, textVariant } = getSizeVariantState(size);
-    return [
-        {
-            paddingLeft: inputPaddingX,
-            paddingRight: inputPaddingX,
-            minHeight: inputSize,
-            fontSize: textVariant
-                ? getTypographyVar(textVariant).fontSize
-                : undefined,
-            lineHeight: textVariant
-                ? getTypographyVar(textVariant).lineHeight
-                : undefined,
-        },
-        css,
-    ];
-};

package/dist/lib/chip/index.js

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

package/dist/lib/chip/types.js

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

package/dist/lib/collapse/collapse.jsx

@@ -1,31 +0,0 @@
-import { useMemo, useState } from 'react';
-import { motion } from 'motion/react';
-export const Collapse = ({ children, open = true, collapsedSize = 0, orientation = 'vertical', ...props }) => {
-    const [initial] = useState(() => {
-        const css = {};
-        if (open) {
-            css.width = orientation === 'horizontal' ? 'auto' : undefined;
-            css.height = orientation === 'vertical' ? 'auto' : undefined;
-        }
-        else {
-            css.width = orientation === 'horizontal' ? collapsedSize : undefined;
-            css.height = orientation === 'vertical' ? collapsedSize : undefined;
-        }
-        return css;
-    });
-    const animate = useMemo(() => {
-        const css = {};
-        if (open) {
-            css.width = orientation === 'horizontal' ? 'auto' : undefined;
-            css.height = orientation === 'vertical' ? 'auto' : undefined;
-        }
-        else {
-            css.width = orientation === 'horizontal' ? collapsedSize : undefined;
-            css.height = orientation === 'vertical' ? collapsedSize : undefined;
-        }
-        return css;
-    }, [collapsedSize, open, orientation]);
-    return (<motion.div css={{ overflow: 'hidden' }} animate={animate} initial={initial} {...props} transition={{ duration: 0.15, ...props.transition }}>
-      {children}
-    </motion.div>);
-};

package/dist/lib/collapse/index.js

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

package/dist/lib/collapse/types.js

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

package/dist/lib/container/container.jsx

@@ -1,94 +0,0 @@
-import { isNil } from 'lodash-es';
-import { getContainerProps } from './helpers';
-import { breakpoint, mediaQuery } from '../../theme';
-const CONTAINER_PADDING_VAR_NAME = '--container-padding';
-const CONTAINER_PADDING_VAR = `var(${CONTAINER_PADDING_VAR_NAME})`;
-const getContainerPaddingCSS = (position) => {
-    return isNil(position)
-        ? {}
-        : {
-            paddingLeft: position === 'start' ? 0 : CONTAINER_PADDING_VAR,
-            paddingRight: position === 'end' ? 0 : CONTAINER_PADDING_VAR,
-        };
-};
-const CONTAINER_CONTENT_PADDING_VAR_NAME = '--container-content-padding';
-const CONTAINER_CONTENT_PADDING_VAR = `var(${CONTAINER_CONTENT_PADDING_VAR_NAME}, 0)`;
-const getContainerContentPaddingCSS = (position) => {
-    return isNil(position)
-        ? {}
-        : {
-            paddingLeft: position === 'start' ? 0 : CONTAINER_CONTENT_PADDING_VAR,
-            paddingRight: position === 'end' ? 0 : CONTAINER_CONTENT_PADDING_VAR,
-        };
-};
-export const Container = ({ children, ref, ..._props }) => {
-    const { xs, sm, md, lg, ...rest } = getContainerProps(_props);
-    const css = [
-        {
-            width: '100%',
-        },
-        createStyle(xs),
-        {
-            [mediaQuery('sm')]: createStyle(sm),
-            [mediaQuery('md')]: createStyle(md),
-            [mediaQuery('lg')]: createStyle(lg),
-        },
-    ];
-    return (<div css={css} {...rest} ref={ref}>
-      <div css={[
-            {
-                width: '100%',
-                [CONTAINER_PADDING_VAR_NAME]: '0px',
-                ...getContainerPaddingCSS(xs?.position),
-            },
-            {
-                [mediaQuery('sm')]: {
-                    width: '100%',
-                    [CONTAINER_PADDING_VAR_NAME]: `calc((100% - ${breakpoint.sm.minWidth}px) / 2)`,
-                    ...getContainerPaddingCSS(sm?.position),
-                },
-                [mediaQuery('md')]: {
-                    [CONTAINER_PADDING_VAR_NAME]: `calc((100% - ${breakpoint.md.minWidth}px) / 2)`,
-                    ...getContainerPaddingCSS(md?.position),
-                },
-                [mediaQuery('lg')]: {
-                    [CONTAINER_PADDING_VAR_NAME]: `calc((100% - ${breakpoint.lg.minWidth}px) / 2)`,
-                    ...getContainerPaddingCSS(lg?.position),
-                },
-            },
-        ]}>
-        <div css={[
-            {
-                width: '100%',
-                [CONTAINER_CONTENT_PADDING_VAR_NAME]: `${breakpoint.xs.padding}px`,
-                ...getContainerContentPaddingCSS(xs?.position),
-            },
-            {
-                [mediaQuery('sm')]: [
-                    {
-                        [CONTAINER_CONTENT_PADDING_VAR_NAME]: `${breakpoint.sm.padding}px`,
-                        ...getContainerContentPaddingCSS(sm?.position),
-                    },
-                ],
-                [mediaQuery('md')]: [
-                    {
-                        [CONTAINER_CONTENT_PADDING_VAR_NAME]: `${breakpoint.md.padding}px`,
-                        ...getContainerContentPaddingCSS(md?.position),
-                    },
-                ],
-                [mediaQuery('lg')]: [
-                    {
-                        [CONTAINER_CONTENT_PADDING_VAR_NAME]: `${breakpoint.lg.padding}px`,
-                        ...getContainerContentPaddingCSS(lg?.position),
-                    },
-                ],
-            },
-        ]}>
-          {children}
-        </div>
-      </div>
-    </div>);
-};
-const createStyle = ({ css } = {}) => {
-    return [css];
-};

package/dist/lib/container/index.js

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

package/dist/lib/container/types.js

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

package/dist/lib/count-up/count-up.jsx

@@ -1,29 +0,0 @@
-import { forwardRef, useEffect, useRef } from 'react';
-import { useMergeRefs } from '@floating-ui/react';
-import { animate, motion, useInView, useMotionValue, useTransform } from 'motion/react';
-import { useTranslation } from 'react-i18next';
-import { formatNumber, getDecimalDigits } from '../../utils';
-export const CountUp = forwardRef(({ from = 0, to, duration = 2, formatNumberOptions, ...props }, ref) => {
-    const rootRef = useRef(null);
-    const { i18n } = useTranslation();
-    const mergedRef = useMergeRefs([ref, rootRef]);
-    const maximumFractionDigits = Math.max(getDecimalDigits(from), getDecimalDigits(to));
-    const count = useMotionValue(from);
-    const isInView = useInView(rootRef, { once: true });
-    const rounded = useTransform(count, (latest) => formatNumber(latest, {
-        lng: i18n.language,
-        ...formatNumberOptions,
-        maximumFractionDigits,
-    }));
-    useEffect(() => {
-        if (!isInView)
-            return;
-        const controls = animate(count, to, { duration });
-        return () => {
-            controls.stop();
-        };
-    }, [count, duration, isInView, to]);
-    return (<motion.span {...props} ref={mergedRef}>
-        {rounded}
-      </motion.span>);
-});

package/dist/lib/count-up/index.js

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

package/dist/lib/count-up/types.js

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

package/dist/lib/countdown-timer/countdown-timer.jsx

@@ -1,5 +0,0 @@
-import { useCountdownTimer } from '../../hooks';
-export const CountdownTimer = ({ children, ...props }) => {
-    const timeDiff = useCountdownTimer(props);
-    return <>{children?.(timeDiff)}</>;
-};

package/dist/lib/countdown-timer/index.js

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

package/dist/lib/countdown-timer/types.js

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

package/dist/lib/date-picker/date-picker.css

@@ -1,2 +0,0 @@
-@import 'react-date-range/dist/styles.css';
-@import 'react-date-range/dist/theme/default.css';

package/dist/lib/date-picker/date-picker.jsx

@@ -1,117 +0,0 @@
-import './date-picker.css';
-import { forwardRef, useRef } from 'react';
-import dayjs from 'dayjs';
-import { isNil } from 'lodash-es';
-import { Calendar } from 'react-date-range';
-import { getDatePickerProps } from './helpers';
-import CalendarIcon from '../../assets/svg/calendar.svg?raw';
-import { getSizeVariantState } from '../../utils';
-import { Floating, FloatingContent, FloatingTrigger } from '../floating';
-import { FormHelperText } from '../form-helper-text';
-import { Icon } from '../icon';
-import { InputMask } from '../input-mask';
-import { TimePicker } from '../time-picker';
-import { useControllableState } from '../../hooks';
-import { getColorVar } from '../../theme';
-import CloseIcon from '../../assets/svg/times-close-delete.svg?raw';
-const DEFAULT_DATE_FORMAT = 'MM/DD/YYYY';
-const DEFAULT_DATETIME_FORMAT = 'MM/DD/YYYY HH:mm';
-const DatePicker = (_props, ref) => {
-    const { value, defaultValue, onChange, placeholder, icon, format, minDate, maxDate, timePicker, clearable, onClear, helperText, error, containerProps, open, onOpenChange, placement = 'bottom-end', ...rest } = getDatePickerProps(_props);
-    const floatingRef = useRef(null);
-    const valueFormat = format ?? (timePicker ? DEFAULT_DATETIME_FORMAT : DEFAULT_DATE_FORMAT);
-    const [selectedDate, setSelectedDate] = useControllableState({
-        defaultValue: defaultValue,
-        value,
-    });
-    const [isOpen, setIsOpen] = useControllableState({
-        defaultValue: open ?? false,
-        value: open,
-    });
-    const prehandleOpenChange = (nextOpen, event, reason) => {
-        setIsOpen(nextOpen);
-        onOpenChange?.(nextOpen, event, reason);
-    };
-    const handleChange = (date) => {
-        let preset = date;
-        if (timePicker) {
-            preset = dayjs(preset)
-                .set('hour', dayjs(selectedDate ?? new Date()).hour())
-                .set('minute', dayjs(selectedDate ?? new Date()).minute())
-                .toDate();
-        }
-        if (minDate && dayjs(preset).isBefore(minDate)) {
-            preset = minDate;
-        }
-        if (maxDate && dayjs(preset).isAfter(maxDate)) {
-            preset = maxDate;
-        }
-        setSelectedDate(preset);
-        onChange?.(preset);
-    };
-    const onChangeTime = (val) => {
-        const preset = dayjs(selectedDate ?? new Date())
-            .set('hour', dayjs(val).hour())
-            .set('minute', dayjs(val).minute())
-            .toDate();
-        setSelectedDate(preset);
-        onChange?.(preset);
-    };
-    const getCss = (sizeVariant) => {
-        if (isNil(sizeVariant))
-            return {};
-        return getSizeVariantState(sizeVariant);
-    };
-    const portalContentRenderer = () => (<div css={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            overflow: 'hidden',
-            borderRadius: 12,
-            backgroundColor: getColorVar('white'),
-            fontSize: '0.875rem',
-            lineHeight: '1.25rem',
-            boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
-            border: '1px solid',
-            borderColor: getColorVar('neutral.100'),
-        }}>
-      <Calendar onChange={handleChange} minDate={minDate} maxDate={maxDate} date={selectedDate ?? undefined}/>
-      {timePicker && (<div css={{ paddingLeft: 12, paddingRight: 12, paddingBottom: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
-          <span css={{ fontSize: '0.75rem', lineHeight: '1rem' }}>Time:</span>
-          <TimePicker onChange={onChangeTime} placement="top" xs={{ size: 'xs' }} value={selectedDate}/>
-        </div>)}
-    </div>);
-    const handleClear = (e) => {
-        e.stopPropagation();
-        onClear?.();
-    };
-    const getSuffix = () => {
-        if (icon) {
-            return icon;
-        }
-        if (selectedDate && clearable) {
-            return (<Icon source={CloseIcon} css={{ color: rest.disabled ? 'var(--ic-ink-4s)' : 'var(--ic-ink-5s)' }} xs={{ size: getCss(rest.xs?.size).iconSize }} onClick={handleClear}/>);
-        }
-        return (<Icon source={CalendarIcon} xs={{ size: getCss(rest.xs?.size).iconSize }} css={{ color: rest.disabled ? 'var(--ic-ink-4s)' : 'var(--ic-ink-5s)' }}/>);
-    };
-    return (<div {...containerProps} css={{ display: 'flex', flexDirection: 'column', width: '100%', ...containerProps?.css }}>
-      <Floating clickProps={{
-            enabled: true,
-        }} dismissProps={{
-            enabled: true,
-        }} placement={placement} open={isOpen} onOpenChange={prehandleOpenChange} ref={floatingRef}>
-        <FloatingTrigger>
-          <InputMask type="button" error={isOpen ? false : error} as="button" suffix={getSuffix()} {...rest} ref={ref}>
-            <div css={{ flex: 1, textAlign: 'left', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-              {!selectedDate && !!placeholder && <span css={{ color: getColorVar('neutral.400') }}>{placeholder}</span>}
-              {!!selectedDate && <span>{dayjs(selectedDate).format(valueFormat)}</span>}
-            </div>
-          </InputMask>
-        </FloatingTrigger>
-        <FloatingContent>{portalContentRenderer()}</FloatingContent>
-      </Floating>
-      <FormHelperText error={error}>{helperText}</FormHelperText>
-    </div>);
-};
-const ForwardRefDatePicker = forwardRef(DatePicker);
-export { ForwardRefDatePicker as DatePicker };

package/dist/lib/date-picker/index.js

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

package/dist/lib/date-picker/types.js

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

package/dist/lib/dialog/dialog/dialog.jsx

@@ -1,65 +0,0 @@
-import { getDialogProps, getDialogSizeInNumber } from './helpers';
-import { Floating, FloatingContent } from '../../..';
-import { getColorVar, FLOATING_Z_INDEX, mediaQuery } from '../../../theme';
-export const Dialog = (_props) => {
-    const { xs, sm, md, lg, children, ...props } = getDialogProps(_props);
-    return (<Floating dismissProps={{
-            enabled: true,
-        }} {...props}>
-      <FloatingContent floatingOverlayProps={{
-            disabled: false,
-            css: {
-                display: 'grid',
-                placeItems: 'center',
-                padding: '1rem',
-                [mediaQuery('sm')]: { padding: '1.25rem' },
-                [mediaQuery('md')]: { padding: '1.5rem' },
-            },
-            lockScroll: true,
-            style: {
-                zIndex: FLOATING_Z_INDEX,
-            },
-        }} css={{
-            maxHeight: '100%',
-            maxWidth: '100%',
-            overflow: 'hidden',
-            display: 'flex',
-            flexDirection: 'column',
-        }}>
-        <div css={{
-            backdropFilter: 'blur(2px)',
-            position: 'fixed',
-            inset: 0,
-            backgroundColor: 'rgba(0, 0, 0, 0.4)',
-            pointerEvents: 'none',
-        }}/>
-        <div css={[
-            {
-                width: getDialogSizeInNumber(xs?.size),
-                backgroundColor: getColorVar('surface.default'),
-                maxWidth: '100%',
-                overflow: 'hidden',
-                display: 'flex',
-                flexDirection: 'column',
-                borderRadius: '0.5rem',
-                paddingTop: '0.5rem',
-                paddingBottom: '0.5rem',
-                position: 'relative',
-            },
-            {
-                [mediaQuery('sm')]: {
-                    width: getDialogSizeInNumber(sm?.size),
-                },
-                [mediaQuery('md')]: {
-                    width: getDialogSizeInNumber(md?.size),
-                },
-                [mediaQuery('lg')]: {
-                    width: getDialogSizeInNumber(lg?.size),
-                },
-            },
-        ]}>
-          {children}
-        </div>
-      </FloatingContent>
-    </Floating>);
-};

package/dist/lib/dialog/dialog/index.js

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

package/dist/lib/dialog/dialog/types.js

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

package/dist/lib/dialog/dialog-body/dialog-body.jsx

@@ -1,15 +0,0 @@
-import { ScrollView } from '../../../components';
-import { mediaQuery } from '../../../theme';
-export const DialogBody = (props) => {
-    return (<ScrollView css={{
-            flex: '1 1 0%',
-            paddingTop: '0.5rem',
-            paddingBottom: '0.5rem',
-            overflow: 'auto',
-            '&:first-of-type': { paddingTop: '0.75rem' },
-            '&:last-of-type': { paddingBottom: '0.75rem' },
-            paddingLeft: '1rem',
-            paddingRight: '1rem',
-            [mediaQuery('sm')]: { paddingLeft: '1.25rem', paddingRight: '1.25rem' },
-        }} {...props}/>);
-};

package/dist/lib/dialog/dialog-body/index.js

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

package/dist/lib/dialog/dialog-body/types.js

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

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

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

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

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

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

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

package/dist/lib/dialog/dialog-footer/dialog-footer.jsx

@@ -1,14 +0,0 @@
-import { mediaQuery } from '../../../theme';
-export const DialogFooter = (props) => {
-    return (<div css={{
-            display: 'flex',
-            justifyContent: 'flex-end',
-            gap: '0.5rem',
-            paddingTop: '0.5rem',
-            paddingBottom: '0.5rem',
-            paddingLeft: '1rem',
-            paddingRight: '1rem',
-            position: 'relative',
-            [mediaQuery('sm')]: { paddingLeft: '1.25rem', paddingRight: '1.25rem' },
-        }} {...props}/>);
-};

package/dist/lib/dialog/dialog-footer/index.js

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

package/dist/lib/dialog/dialog-footer/types.js

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