@janbox/storefront-ui 1.0.13 → 1.0.15

package/dist/lib/tabs/tabs/helpers.js

@@ -1,36 +1,30 @@
-import { createContext, useContext } from "react";
-import "lodash-es";
-import { getColorVar } from "../../../theme/palette.js";
-import { mergeComponentProps } from "../../../utils/index.js";
+import { createContext, useContext } from 'react';
+import { getColorVar } from '../../../theme';
+import { mergeComponentProps } from '../../../utils';
 const defaultProps = {
-  tabProps: {
-    color: "neutral",
-    variant: "text",
-    states: {
-      active: {
-        color: "primary",
-        variant: "text"
-      }
-    }
-  },
-  tabIndicatorProps: {
-    xs: {
-      css: {
-        height: 2,
-        backgroundColor: getColorVar("primary.600")
-      }
-    }
-  }
+    tabProps: {
+        color: 'neutral',
+        variant: 'text',
+        states: {
+            active: {
+                color: 'primary',
+                variant: 'text',
+            },
+        },
+    },
+    tabIndicatorProps: {
+        xs: {
+            css: {
+                height: 2,
+                backgroundColor: getColorVar('primary.600'),
+            },
+        },
+    },
 };
-const getTabsProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
+export const getTabsProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };
-const TabsContext = createContext({});
-const useTabsContext = () => {
-  return useContext(TabsContext);
-};
-export {
-  TabsContext,
-  getTabsProps,
-  useTabsContext
+export const TabsContext = createContext({});
+export const useTabsContext = () => {
+    return useContext(TabsContext);
 };

package/dist/lib/tabs/tabs/index.d.ts

@@ -1,4 +1,3 @@
 export * from './tabs';
 export * from './types';
 export * from './helpers';
-//# sourceMappingURL=index.d.ts.map

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

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

package/dist/lib/tabs/tabs/tabs.d.ts

@@ -1,3 +1,2 @@
 import { TabsProps } from './types';
-export declare const Tabs: import('react').ForwardRefExoticComponent<Omit<TabsProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=tabs.d.ts.map
+export declare const Tabs: import("react").ForwardRefExoticComponent<Omit<TabsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,46 @@
+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.d.ts

@@ -1,8 +1,8 @@
-import { JSX } from 'react';
-import { TabProps } from '../tab';
-import { TabIndicatorProps } from '../tab-indicator';
-import { TabPanelProps } from '../tab-panel';
-import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from '../../../types';
+import { JSX } from "react";
+import { TabProps } from "../tab";
+import { TabIndicatorProps } from "../tab-indicator";
+import { TabPanelProps } from "../tab-panel";
+import { PropsWithCSS, ResponsiveDesign, ShallowMerge } from "../../../types";
 export type TabsResponsiveProps = PropsWithCSS;
 export interface TabsExtendedProps extends ResponsiveDesign<TabsResponsiveProps> {
     activeIndex?: number;
@@ -14,4 +14,3 @@ export interface TabsExtendedProps extends ResponsiveDesign<TabsResponsiveProps>
     preventActiveTabChange?: boolean;
 }
 export type TabsProps = ShallowMerge<JSX.IntrinsicElements["div"], TabsExtendedProps>;
-//# sourceMappingURL=types.d.ts.map

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

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

package/dist/lib/text/helpers.d.ts

@@ -3,4 +3,3 @@ import { Screen } from '../../theme';
 import { CSSObject } from '@emotion/react';
 export declare const getTextCssByVariant: (variant?: TextVariant) => Partial<Record<Screen, CSSObject>>;
 export declare const getTextProps: (extended: TextProps) => TextProps;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/text/helpers.js

@@ -1,140 +1,131 @@
-import "lodash-es";
-import "../../theme/palette.js";
-import { getTypographyVar } from "../../theme/typography.js";
-import { mergeComponentProps } from "../../utils/index.js";
-const getTextCssByVariant = (variant) => {
-  switch (variant) {
-    case "heading-1":
-      return {
-        xs: {
-          fontSize: getTypographyVar("4xl").fontSize,
-          lineHeight: getTypographyVar("4xl").lineHeight
-        },
-        sm: {
-          fontSize: getTypographyVar("5xl").fontSize,
-          lineHeight: getTypographyVar("5xl").lineHeight
-        },
-        md: {
-          fontSize: getTypographyVar("6xl").fontSize,
-          lineHeight: getTypographyVar("6xl").lineHeight
-        }
-      };
-    case "heading-2":
-      return {
-        xs: {
-          fontSize: getTypographyVar("3xl").fontSize,
-          lineHeight: getTypographyVar("3xl").lineHeight
-        },
-        sm: {
-          fontSize: getTypographyVar("4xl").fontSize,
-          lineHeight: getTypographyVar("4xl").lineHeight
-        },
-        md: {
-          fontSize: getTypographyVar("5xl").fontSize,
-          lineHeight: getTypographyVar("5xl").lineHeight
-        }
-      };
-    case "heading-3":
-      return {
-        xs: {
-          fontSize: getTypographyVar("2xl").fontSize,
-          lineHeight: getTypographyVar("2xl").lineHeight
-        },
-        sm: {
-          fontSize: getTypographyVar("3xl").fontSize,
-          lineHeight: getTypographyVar("3xl").lineHeight
-        },
-        md: {
-          fontSize: getTypographyVar("4xl").fontSize,
-          lineHeight: getTypographyVar("4xl").lineHeight
-        }
-      };
-    case "heading-4":
-      return {
-        xs: {
-          fontSize: getTypographyVar("xl").fontSize,
-          lineHeight: getTypographyVar("xl").lineHeight
-        },
-        sm: {
-          fontSize: getTypographyVar("2xl").fontSize,
-          lineHeight: getTypographyVar("2xl").lineHeight
-        },
-        md: {
-          fontSize: getTypographyVar("3xl").fontSize,
-          lineHeight: getTypographyVar("3xl").lineHeight
-        }
-      };
-    case "heading-5":
-      return {
-        xs: {
-          fontSize: getTypographyVar("lg").fontSize,
-          lineHeight: getTypographyVar("lg").lineHeight
-        },
-        sm: {
-          fontSize: getTypographyVar("xl").fontSize,
-          lineHeight: getTypographyVar("xl").lineHeight
-        },
-        md: {
-          fontSize: getTypographyVar("2xl").fontSize,
-          lineHeight: getTypographyVar("2xl").lineHeight
-        }
-      };
-    case "heading-6":
-      return {
-        xs: {
-          fontSize: getTypographyVar("base").fontSize,
-          lineHeight: getTypographyVar("base").lineHeight
-        },
-        sm: {
-          fontSize: getTypographyVar("lg").fontSize,
-          lineHeight: getTypographyVar("lg").lineHeight
-        },
-        md: {
-          fontSize: getTypographyVar("xl").fontSize,
-          lineHeight: getTypographyVar("xl").lineHeight
-        }
-      };
-    case "large":
-      return {
-        xs: {
-          fontSize: getTypographyVar("lg").fontSize,
-          lineHeight: getTypographyVar("lg").lineHeight
-        }
-      };
-    case "base":
-      return {
-        xs: {
-          fontSize: getTypographyVar("base").fontSize,
-          lineHeight: getTypographyVar("base").lineHeight
-        }
-      };
-    case "small":
-      return {
-        xs: {
-          fontSize: getTypographyVar("sm").fontSize,
-          lineHeight: getTypographyVar("sm").lineHeight
-        }
-      };
-    case "extra-small":
-      return {
-        xs: {
-          fontSize: getTypographyVar("xs").fontSize,
-          lineHeight: getTypographyVar("xs").lineHeight
-        }
-      };
-    default:
-      return {};
-  }
+import { getTypographyVar } from '../../theme';
+import { mergeComponentProps } from '../../utils';
+export const getTextCssByVariant = (variant) => {
+    switch (variant) {
+        case 'heading-1':
+            return {
+                xs: {
+                    fontSize: getTypographyVar('4xl').fontSize,
+                    lineHeight: getTypographyVar('4xl').lineHeight,
+                },
+                sm: {
+                    fontSize: getTypographyVar('5xl').fontSize,
+                    lineHeight: getTypographyVar('5xl').lineHeight,
+                },
+                md: {
+                    fontSize: getTypographyVar('6xl').fontSize,
+                    lineHeight: getTypographyVar('6xl').lineHeight,
+                },
+            };
+        case 'heading-2':
+            return {
+                xs: {
+                    fontSize: getTypographyVar('3xl').fontSize,
+                    lineHeight: getTypographyVar('3xl').lineHeight,
+                },
+                sm: {
+                    fontSize: getTypographyVar('4xl').fontSize,
+                    lineHeight: getTypographyVar('4xl').lineHeight,
+                },
+                md: {
+                    fontSize: getTypographyVar('5xl').fontSize,
+                    lineHeight: getTypographyVar('5xl').lineHeight,
+                },
+            };
+        case 'heading-3':
+            return {
+                xs: {
+                    fontSize: getTypographyVar('2xl').fontSize,
+                    lineHeight: getTypographyVar('2xl').lineHeight,
+                },
+                sm: {
+                    fontSize: getTypographyVar('3xl').fontSize,
+                    lineHeight: getTypographyVar('3xl').lineHeight,
+                },
+                md: {
+                    fontSize: getTypographyVar('4xl').fontSize,
+                    lineHeight: getTypographyVar('4xl').lineHeight,
+                },
+            };
+        case 'heading-4':
+            return {
+                xs: {
+                    fontSize: getTypographyVar('xl').fontSize,
+                    lineHeight: getTypographyVar('xl').lineHeight,
+                },
+                sm: {
+                    fontSize: getTypographyVar('2xl').fontSize,
+                    lineHeight: getTypographyVar('2xl').lineHeight,
+                },
+                md: {
+                    fontSize: getTypographyVar('3xl').fontSize,
+                    lineHeight: getTypographyVar('3xl').lineHeight,
+                },
+            };
+        case 'heading-5':
+            return {
+                xs: {
+                    fontSize: getTypographyVar('lg').fontSize,
+                    lineHeight: getTypographyVar('lg').lineHeight,
+                },
+                sm: {
+                    fontSize: getTypographyVar('xl').fontSize,
+                    lineHeight: getTypographyVar('xl').lineHeight,
+                },
+                md: {
+                    fontSize: getTypographyVar('2xl').fontSize,
+                    lineHeight: getTypographyVar('2xl').lineHeight,
+                },
+            };
+        case 'heading-6':
+            return {
+                xs: {
+                    fontSize: getTypographyVar('base').fontSize,
+                    lineHeight: getTypographyVar('base').lineHeight,
+                },
+                sm: {
+                    fontSize: getTypographyVar('lg').fontSize,
+                    lineHeight: getTypographyVar('lg').lineHeight,
+                },
+                md: {
+                    fontSize: getTypographyVar('xl').fontSize,
+                    lineHeight: getTypographyVar('xl').lineHeight,
+                },
+            };
+        case 'large':
+            return {
+                xs: {
+                    fontSize: getTypographyVar('lg').fontSize,
+                    lineHeight: getTypographyVar('lg').lineHeight,
+                },
+            };
+        case 'base':
+            return {
+                xs: {
+                    fontSize: getTypographyVar('base').fontSize,
+                    lineHeight: getTypographyVar('base').lineHeight,
+                },
+            };
+        case 'small':
+            return {
+                xs: {
+                    fontSize: getTypographyVar('sm').fontSize,
+                    lineHeight: getTypographyVar('sm').lineHeight,
+                },
+            };
+        case 'extra-small':
+            return {
+                xs: {
+                    fontSize: getTypographyVar('xs').fontSize,
+                    lineHeight: getTypographyVar('xs').lineHeight,
+                },
+            };
+        default:
+            return {};
+    }
 };
-const getTextProps = (extended) => {
-  return mergeComponentProps(
-    {
-      element: "p"
-    },
-    extended
-  );
-};
-export {
-  getTextCssByVariant,
-  getTextProps
+export const getTextProps = (extended) => {
+    return mergeComponentProps({
+        element: 'p',
+    }, extended);
 };

package/dist/lib/text/index.d.ts

@@ -1,4 +1,3 @@
 export * from './text';
 export * from './types';
 export * from './helpers';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/text/index.js

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

package/dist/lib/text/text.d.ts

@@ -1,3 +1,2 @@
 import { TextProps } from './types';
 export declare const Text: ({ children, ref, ..._props }: TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=text.d.ts.map

package/dist/lib/text/text.jsx

@@ -0,0 +1,27 @@
+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.d.ts

@@ -11,4 +11,3 @@ type TextExtendedProps = ResponsiveDesign<TextResponsiveProps> & {
 };
 export type TextProps = ShallowMerge<HTMLAttributes<HTMLElement>, TextExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/text/types.js

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

package/dist/lib/textarea/helpers.d.ts

@@ -1,3 +1,2 @@
 import { TextareaProps } from './types';
 export declare const getTextareaProps: (extended: TextareaProps) => TextareaProps;
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/textarea/helpers.js

@@ -1,12 +1,9 @@
-import { mergeComponentProps } from "../../utils/index.js";
+import { mergeComponentProps } from '../../utils';
 const defaultProps = {
-  xs: {
-    size: "md"
-  }
+    xs: {
+        size: 'md',
+    },
 };
-const getTextareaProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
-};
-export {
-  getTextareaProps
+export const getTextareaProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };

package/dist/lib/textarea/index.d.ts

@@ -1,4 +1,3 @@
 export * from './textarea';
 export * from './types';
 export * from './helpers';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/textarea/index.js

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

package/dist/lib/textarea/textarea.d.ts

@@ -1,3 +1,2 @@
 import { TextareaProps } from './types';
 export declare const Textarea: ({ ref, ..._props }: TextareaProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=textarea.d.ts.map

package/dist/lib/textarea/textarea.jsx

@@ -0,0 +1,89 @@
+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,
+    ];
+};