@janbox/storefront-ui 1.0.14 → 1.0.16

package/dist/lib/switch/switch.module.scss

@@ -1,94 +0,0 @@
-.switch__container {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  width: fit-content;
-  max-width: 100%;
-  padding-left: 0.125rem;
-  padding-right: 0.125rem;
-}
-
-.switch__container:has(.switch__input:disabled) {
-  cursor: default;
-  pointer-events: none;
-}
-
-.switch__input {
-  width: 0;
-  height: 0;
-  opacity: 0;
-  display: none;
-}
-
-.switch__main {
-  position: relative;
-  width: 2rem;
-  height: 1.5rem;
-}
-
-.switch__main::before {
-  position: absolute;
-  left: 0;
-  right: 0;
-  content: "";
-  background-color: var(--color-neutral-300);
-  height: 1rem;
-  top: 50%;
-  transform: translateY(-50%);
-  border-radius: 9999px;
-  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.switch__main::after {
-  position: absolute;
-  left: 0;
-  aspect-ratio: 1;
-  content: "";
-  background-color: white;
-  height: 1.25rem;
-  top: 50%;
-  transform: translateY(-50%);
-  border-radius: 9999px;
-  border-width: 1px;
-  border-style: solid;
-  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.switch__main:has(.switch__input:checked) {
-  &::before {
-    background-color: var(--color-primary-400);
-  }
-  &::after {
-    background-color: var(--color-primary-600);
-    border-color: var(--color-primary-600);
-    left: 100%;
-    transform: translateX(-100%) translateY(-50%);
-  }
-}
-
-.switch__container:hover {
-  .switch__main::before {
-    background-color: var(--color-neutral-300);
-  }
-  .switch__main:has(.switch__input:checked)::before {
-    background-color: var(--color-primary-500);
-  }
-
-  .switch__main::after {
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  }
-  .switch__main:has(.switch__input:checked)::after {
-    box-shadow: 0 1px 3px 0 var(--color-primary-600), 0 1px 2px -1px var(--color-primary-600);
-  }
-}
-
-.switch__main:has(.switch__input:disabled) {
-  &::before {
-    background-color: var(--color-neutral-300);
-  }
-  &::after {
-    background-color: var(--color-neutral-400);
-    border-color: var(--color-neutral-400);
-  }
-}

package/dist/lib/switch/types.js

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

package/dist/lib/table/index.js

@@ -1,8 +0,0 @@
-export * from './table';
-export * from './table-body';
-export * from './table-head';
-export * from './table-head';
-export * from './table-body';
-export * from './table-row';
-export * from './table-cell';
-export * from './table-footer';

package/dist/lib/table/table/index.js

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

package/dist/lib/table/table/table.jsx

@@ -1,12 +0,0 @@
-import { getColorVar } from '../../../theme';
-export const Table = ({ children, ...props }) => {
-    return (<table css={{
-            width: '100%',
-            borderTopLeftRadius: '0.5rem',
-            borderTopRightRadius: '0.5rem',
-            overflow: 'hidden',
-            backgroundColor: getColorVar('surface.default'),
-        }} {...props}>
-      {children}
-    </table>);
-};

package/dist/lib/table/table/types.js

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

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

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

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

@@ -1,23 +0,0 @@
-import { Primitive } from '../../primitive';
-import { getColorVar } from '../../../theme';
-export const TableBody = ({ children, ...props }) => {
-    return (<Primitive as="tbody" xs={{
-            css: {
-                '& > tr': {
-                    position: 'relative',
-                    '&::after': {
-                        content: '""',
-                        position: 'absolute',
-                        bottom: 0,
-                        left: 0,
-                        right: 0,
-                        borderBottomWidth: 1,
-                        borderBottomStyle: 'solid',
-                        borderBottomColor: getColorVar('neutral.100'),
-                    },
-                },
-            },
-        }} {...props}>
-      {children}
-    </Primitive>);
-};

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

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

package/dist/lib/table/table-cell/index.js

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

package/dist/lib/table/table-cell/table-cell.jsx

@@ -1,5 +0,0 @@
-export const TableCell = ({ children, ...props }) => {
-    return (<td css={{ padding: 8 }} {...props}>
-      {children}
-    </td>);
-};

package/dist/lib/table/table-cell/types.js

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

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

@@ -1 +0,0 @@
-export * from './table-footer';

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

@@ -1,3 +0,0 @@
-export const TableFooter = ({ children, ...props }) => {
-    return <tfoot {...props}>{children}</tfoot>;
-};

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

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

package/dist/lib/table/table-head/index.js

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

package/dist/lib/table/table-head/table-head.jsx

@@ -1,22 +0,0 @@
-import { Primitive } from "../../primitive";
-import { getColorVar } from "../../../theme";
-export const TableHead = ({ children, ...props }) => {
-    return (<Primitive as="thead" xs={{
-            css: {
-                position: "relative",
-                fontWeight: 500,
-                "&::after": {
-                    content: '""',
-                    position: "absolute",
-                    bottom: 0,
-                    left: 0,
-                    right: 0,
-                    borderTopWidth: 1,
-                    borderTopStyle: "solid",
-                    borderTopColor: getColorVar("neutral.200"),
-                },
-            },
-        }} {...props}>
-      {children}
-    </Primitive>);
-};

package/dist/lib/table/table-head/types.js

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

package/dist/lib/table/table-row/index.js

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

package/dist/lib/table/table-row/table-row.jsx

@@ -1,3 +0,0 @@
-export const TableRow = ({ children, ...props }) => {
-    return <tr {...props}>{children}</tr>;
-};

package/dist/lib/table/table-row/types.js

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

package/dist/lib/tabs/index.js

@@ -1,5 +0,0 @@
-export * from './tabs';
-export * from './tab-list';
-export * from './tab';
-export * from './tab-content';
-export * from './tab-panel';

package/dist/lib/tabs/tab/index.js

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

package/dist/lib/tabs/tab/tab.jsx

@@ -1,21 +0,0 @@
-import { Button, useTabIndexContext, useTabsContext } from '../../..';
-import { mergeComponentProps } from '../../../utils';
-export const Tab = ({ children, ref, ..._props }) => {
-    const { focusTab, activeIndex, tabProps: defaultTabProps = {}, preventActiveTabChange } = useTabsContext();
-    const { color, states, ...rest } = mergeComponentProps(defaultTabProps, _props);
-    const tabIndex = useTabIndexContext();
-    const isTabActive = tabIndex === activeIndex;
-    const onClick = (e) => {
-        e.preventDefault();
-        if (preventActiveTabChange) {
-            !isTabActive && focusTab(tabIndex);
-        }
-        else {
-            focusTab(tabIndex);
-        }
-        rest.onClick?.(e);
-    };
-    return (<Button {...rest} onClick={onClick} color={isTabActive ? states?.active?.color : color} ref={ref}>
-      {children}
-    </Button>);
-};

package/dist/lib/tabs/tab/types.js

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

package/dist/lib/tabs/tab-content/index.js

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

package/dist/lib/tabs/tab-content/tab-content.jsx

@@ -1,12 +0,0 @@
-import { forwardRef } from 'react';
-import { useTabsContext } from '../tabs';
-import { flattenChildren } from '../../../utils';
-export const TabContent = forwardRef(({ children, ...rest }, ref) => {
-    const { activeIndex } = useTabsContext();
-    const flattenedChildren = flattenChildren(children);
-    return (<div css={{
-            display: 'contents',
-        }} {...rest} ref={ref}>
-      {flattenedChildren.find((_, index) => index === activeIndex)}
-    </div>);
-});

package/dist/lib/tabs/tab-content/types.js

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

package/dist/lib/tabs/tab-indicator/index.js

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

package/dist/lib/tabs/tab-indicator/tab-indicator.jsx

@@ -1,76 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import { motion } from 'motion/react';
-import { useTabsContext } from '../tabs';
-import { mediaQuery } from '../../../theme';
-export const TabIndicator = () => {
-    const { activeIndex, tabIndicatorProps } = useTabsContext();
-    const indicatorEl = useRef(null);
-    const [indicatorRect, setIndicatorRect] = useState({
-        left: 0,
-        width: 0,
-    });
-    const [activeTabElement, setActiveTabElement] = useState();
-    useEffect(() => {
-        const tabListEl = indicatorEl.current?.parentElement;
-        setActiveTabElement(tabListEl?.children.item(activeIndex));
-        const mutationObserver = new MutationObserver((mutations) => {
-            const target = mutations.at(0)?.target;
-            if (target instanceof Element) {
-                setActiveTabElement(target.children.item(activeIndex));
-            }
-        });
-        if (tabListEl) {
-            mutationObserver.observe(tabListEl, {
-                childList: true,
-            });
-        }
-        return () => {
-            mutationObserver.disconnect();
-        };
-    }, [activeIndex]);
-    useEffect(() => {
-        const resizeObserver = new ResizeObserver((entries) => {
-            const target = entries.at(0)?.target;
-            const parentElement = target?.parentElement;
-            if (!target || !parentElement) {
-                return;
-            }
-            const targetRect = target.getBoundingClientRect();
-            const parentRect = parentElement.getBoundingClientRect();
-            setIndicatorRect({
-                left: targetRect.left - parentRect.left + parentElement.scrollLeft,
-                width: targetRect.width,
-            });
-        });
-        if (activeTabElement) {
-            resizeObserver.observe(activeTabElement);
-        }
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, [activeTabElement]);
-    const css = [
-        {
-            position: 'absolute',
-            bottom: 0,
-            left: 0,
-            backgroundColor: 'currentcolor',
-            borderRadius: 8,
-        },
-        createStyle(tabIndicatorProps?.xs),
-        {
-            [mediaQuery('sm')]: createStyle(tabIndicatorProps?.sm),
-            [mediaQuery('md')]: createStyle(tabIndicatorProps?.md),
-        },
-    ];
-    return (<motion.div initial={{
-            transform: 'translateX(0)',
-            width: 0,
-        }} animate={{
-            width: indicatorRect.width,
-            transform: `translateX(${indicatorRect.left}px)`,
-        }} ref={indicatorEl} css={css}/>);
-};
-const createStyle = ({ css } = {}) => {
-    return [css];
-};

package/dist/lib/tabs/tab-indicator/types.js

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

package/dist/lib/tabs/tab-list/index.js

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

package/dist/lib/tabs/tab-list/tab-list.jsx

@@ -1,35 +0,0 @@
-import { getTabListProps } from './helpers';
-import { TabIndexContext } from '../tab/helpers';
-import { TabIndicator } from '../tab-indicator';
-import { mediaQuery } from '../../../theme';
-import { flattenChildren } from '../../../utils';
-import { scrollbarNoneStyle } from '../../../constants/emotion';
-export const TabList = ({ ref, children, ..._props }) => {
-    const { xs, sm, md, lg, ...props } = getTabListProps(_props);
-    const css = [
-        {
-            display: 'flex',
-            width: 'fit-content',
-            maxWidth: '100%',
-            alignItems: 'center',
-            gap: 16,
-            position: 'relative',
-            overflow: 'auto',
-            '& > *': {
-                flexShrink: 0,
-            },
-        },
-        xs?.css,
-        {
-            [mediaQuery('sm')]: sm?.css,
-            [mediaQuery('md')]: md?.css,
-            [mediaQuery('lg')]: lg?.css,
-        },
-    ];
-    return (<div css={[css, scrollbarNoneStyle]} {...props} ref={ref}>
-      {flattenChildren(children).map((child, index) => (<TabIndexContext.Provider value={index} key={index}>
-          {child}
-        </TabIndexContext.Provider>))}
-      <TabIndicator />
-    </div>);
-};

package/dist/lib/tabs/tab-list/types.js

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

package/dist/lib/tabs/tab-panel/index.js

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

package/dist/lib/tabs/tab-panel/tab-panel.jsx

@@ -1,18 +0,0 @@
-import { useTabsContext } from '../tabs';
-import { mediaQuery } from '../../../theme';
-import { mergeComponentProps } from '../../../utils';
-export const TabPanel = ({ children, ref, ..._props }) => {
-    const { tabPanelProps: defaultTabPanelProps = {} } = useTabsContext();
-    const { xs, sm, md, lg, ...props } = mergeComponentProps(defaultTabPanelProps, _props);
-    const css = [
-        xs?.css,
-        {
-            [mediaQuery('sm')]: sm?.css,
-            [mediaQuery('md')]: md?.css,
-            [mediaQuery('lg')]: lg?.css,
-        },
-    ];
-    return (<div {...props} ref={ref} css={css}>
-      {children}
-    </div>);
-};

package/dist/lib/tabs/tab-panel/types.js

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

package/dist/lib/tabs/tabs/index.js

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

package/dist/lib/tabs/tabs/tabs.jsx

@@ -1,46 +0,0 @@
-import { forwardRef, useMemo, useRef } from 'react';
-import { TabsContext, getTabsProps } from './helpers';
-import { useControllableState } from '../../../hooks';
-import { mediaQuery } from '../../../theme';
-export const Tabs = forwardRef((_props, ref) => {
-    const { defaultActiveIndex, xs, sm, md, lg, activeIndex, children, onTabChange, tabProps, tabIndicatorProps, tabPanelProps, preventActiveTabChange = true, ...rest } = getTabsProps(_props);
-    const [activeTabIndex, setActiveTabIndex] = useControllableState({
-        defaultValue: defaultActiveIndex ?? 0,
-        value: activeIndex,
-    });
-    const onTabChangeRef = useRef(onTabChange);
-    onTabChangeRef.current = onTabChange;
-    const contextValue = useMemo(() => {
-        return {
-            activeIndex: activeTabIndex,
-            focusTab: (tabIndex) => {
-                setActiveTabIndex(tabIndex);
-                onTabChangeRef.current?.(tabIndex);
-            },
-            tabProps,
-            tabIndicatorProps,
-            tabPanelProps,
-            preventActiveTabChange,
-        };
-    }, [activeTabIndex, tabProps, tabIndicatorProps, tabPanelProps, preventActiveTabChange, setActiveTabIndex]);
-    const css = [
-        {
-            display: 'flex',
-            flexDirection: 'column',
-        },
-        createStyle(xs),
-        {
-            [mediaQuery('sm')]: createStyle(sm),
-            [mediaQuery('md')]: createStyle(md),
-            [mediaQuery('lg')]: createStyle(lg),
-        },
-    ];
-    return (<TabsContext.Provider value={contextValue}>
-      <div css={css} {...rest} ref={ref}>
-        {children}
-      </div>
-    </TabsContext.Provider>);
-});
-const createStyle = ({ css } = {}) => {
-    return [css];
-};

package/dist/lib/tabs/tabs/types.js

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

package/dist/lib/text/index.js

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

package/dist/lib/text/text.jsx

@@ -1,27 +0,0 @@
-import { isNil } from 'lodash-es';
-import { getTextProps } from './helpers';
-import { getTypographyVar, mediaQuery } from '../../theme';
-import { Primitive } from '../primitive';
-export const Text = ({ children, ref, ..._props }) => {
-    const { xs, sm, md, lg, element = 'p', dangerouslySetInnerHTML, ...rest } = getTextProps(_props);
-    const css = [
-        createStyle(xs),
-        {
-            [mediaQuery('sm')]: createStyle(sm),
-            [mediaQuery('md')]: createStyle(md),
-            [mediaQuery('lg')]: createStyle(lg),
-        },
-    ];
-    return (<Primitive as={element} css={css} dangerouslySetInnerHTML={isNil(children) ? dangerouslySetInnerHTML : undefined} {...rest} ref={ref}>
-      {isNil(dangerouslySetInnerHTML) ? children : null}
-    </Primitive>);
-};
-const createStyle = ({ css, sizeVariant } = {}) => {
-    return [
-        sizeVariant && {
-            fontSize: getTypographyVar(sizeVariant).fontSize,
-            lineHeight: getTypographyVar(sizeVariant).lineHeight,
-        },
-        css,
-    ];
-};

package/dist/lib/text/types.js

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

package/dist/lib/textarea/index.js

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

package/dist/lib/textarea/textarea.jsx

@@ -1,89 +0,0 @@
-import { useRef, useState } from 'react';
-import { useMergeRefs } from '@floating-ui/react';
-import { isString } from 'lodash-es';
-import { getTextareaProps } from './helpers';
-import classes from './textarea.module.scss';
-import { getSizeVariantState } from '../../utils';
-import { FormHelperText } from '../form-helper-text';
-import { cn } from '../../utils';
-import { getTypographyVar, mediaQuery } from '../../theme';
-export const Textarea = ({ ref, ..._props }) => {
-    const { xs, sm, md, lg, containerProps, className, helperText, error, onChange: onChangeProp, debounce = 0, mode = 'onChange', value, ...rest } = getTextareaProps(_props);
-    const textareaRef = useRef(null);
-    const [typingValue, setTypingValue] = useState();
-    const timeoutFn = useRef(null);
-    const beforeChangeValue = useRef('');
-    const mergedRefs = useMergeRefs([ref, textareaRef]);
-    const onChange = (e, force = false) => {
-        if (timeoutFn.current) {
-            clearTimeout(timeoutFn.current);
-        }
-        if (force) {
-            onChangeProp?.(e);
-            return;
-        }
-        if (mode === 'onBlur') {
-            // undefined value means the textarea is not controlled
-            if (isString(value)) {
-                setTypingValue(e.target.value);
-            }
-            return;
-        }
-        if (debounce > 0) {
-            // undefined value means the textarea is not controlled
-            if (isString(value)) {
-                setTypingValue(e.target.value);
-            }
-            timeoutFn.current = setTimeout(() => {
-                onChangeProp?.(e);
-            }, debounce);
-            return;
-        }
-        onChangeProp?.(e);
-    };
-    const onFocus = (e) => {
-        beforeChangeValue.current = e.target.value;
-        rest.onFocus?.(e);
-    };
-    const onBlur = (e) => {
-        if (beforeChangeValue.current !== e.target.value) {
-            if (mode === 'onBlur' || debounce > 0) {
-                onChange(e, true);
-            }
-        }
-        rest.onBlur?.(e);
-        setTimeout(() => {
-            setTypingValue(undefined);
-        }, debounce);
-    };
-    const css = [
-        {
-            paddingTop: 8,
-            paddingBottom: 8,
-        },
-        createStyle(xs),
-        {
-            [mediaQuery('sm')]: createStyle(sm),
-            [mediaQuery('md')]: createStyle(md),
-            [mediaQuery('lg')]: createStyle(lg),
-        },
-    ];
-    return (<div {...containerProps} className={cn(classes.textarea__container, containerProps?.className)}>
-      <div css={css} className={classes.textarea__main}>
-        <textarea aria-invalid={error} className={cn(classes.textarea__control, className)} {...rest} value={typingValue ?? value} ref={mergedRefs} onChange={onChange} onBlur={onBlur} onFocus={onFocus}/>
-      </div>
-      <FormHelperText error={error}>{helperText}</FormHelperText>
-    </div>);
-};
-const createStyle = ({ css, size } = {}) => {
-    const { inputPaddingX, textVariant } = getSizeVariantState(size);
-    return [
-        {
-            paddingLeft: inputPaddingX,
-            paddingRight: inputPaddingX,
-            fontSize: textVariant ? getTypographyVar(textVariant).fontSize : undefined,
-            lineHeight: textVariant ? getTypographyVar(textVariant).lineHeight : undefined,
-        },
-        css,
-    ];
-};