@janbox/storefront-ui 1.0.12 → 1.0.14

package/dist/lib/cascader/helpers.js

@@ -1,34 +1,70 @@
-import { mergeComponentProps } from "../../utils/index.js";
+import { mergeComponentProps } from '../../utils';
 const defaultProps = {
-  xs: {
-    size: "md"
-  }
+    xs: {
+        size: 'md',
+    },
 };
-const getCascaderProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
+export const getCascaderProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };
-const findOptionPath = (options, values) => {
-  const result = [];
-  let currentOptions = options;
-  for (const value of values) {
-    const found = currentOptions.find((opt) => opt.value === value);
-    if (!found) break;
-    result.push(found);
-    currentOptions = found.children ?? [];
-  }
-  return result;
+/**
+ * Find option path by value array
+ * Returns array of options from root to target
+ */
+export const findOptionPath = (options, values) => {
+    const result = [];
+    let currentOptions = options;
+    for (const value of values) {
+        const found = currentOptions.find((opt) => opt.value === value);
+        if (!found)
+            break;
+        result.push(found);
+        currentOptions = found.children ?? [];
+    }
+    return result;
 };
-const hasChildren = (option) => {
-  return Array.isArray(option.children) && option.children.length > 0;
+/**
+ * Check if option has children already loaded
+ */
+export const hasChildren = (option) => {
+    return Array.isArray(option.children) && option.children.length > 0;
 };
-const isExpandable = (option) => {
-  if (option.isLeaf === true) return false;
-  if (hasChildren(option)) return true;
-  return option.isLeaf === false;
+/**
+ * Check if option can be expanded (has children or is not a leaf and can lazy load)
+ */
+export const isExpandable = (option) => {
+    if (option.isLeaf === true)
+        return false;
+    if (hasChildren(option))
+        return true;
+    // If isLeaf is explicitly false, it's expandable (children can be lazy loaded)
+    return option.isLeaf === false;
 };
-export {
-  findOptionPath,
-  getCascaderProps,
-  hasChildren,
-  isExpandable
+/**
+ * Filter options by search text
+ */
+export const filterOptions = (options, searchText) => {
+    if (!searchText.trim())
+        return options;
+    const lowerSearch = searchText.toLowerCase();
+    const filterRecursive = (opts) => {
+        return opts.reduce((acc, option) => {
+            const labelStr = String(option.label).toLowerCase();
+            const matchesLabel = labelStr.includes(lowerSearch);
+            if (option.children?.length) {
+                const filteredChildren = filterRecursive(option.children);
+                if (filteredChildren.length > 0 || matchesLabel) {
+                    acc.push({
+                        ...option,
+                        children: filteredChildren.length > 0 ? filteredChildren : option.children,
+                    });
+                }
+            }
+            else if (matchesLabel) {
+                acc.push(option);
+            }
+            return acc;
+        }, []);
+    };
+    return filterRecursive(options);
 };

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

@@ -1,3 +1,2 @@
-export * from './cascader';
-export * from './types';
-//# sourceMappingURL=index.d.ts.map
+export * from "./cascader";
+export * from "./types";

package/dist/lib/cascader/index.js

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

package/dist/lib/cascader/types.d.ts

@@ -61,4 +61,3 @@ interface CascaderExtendedProps extends ResponsiveDesign<CascaderResponsiveProps
 }
 export type CascaderProps = ShallowMerge<InputMaskProps<JSX.IntrinsicElements['button']>, CascaderExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/cascader/types.js

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

package/dist/lib/checkbox/checkbox.d.ts

@@ -1,3 +1,2 @@
 import { CheckboxProps } from './types';
 export declare const Checkbox: ({ children, indeterminate, color, className, ref, containerProps, ...props }: CheckboxProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=checkbox.d.ts.map

package/dist/lib/checkbox/checkbox.jsx

@@ -0,0 +1,33 @@
+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>);
+};

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

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

@@ -1,3 +1,2 @@
 export { Checkbox } from './checkbox';
 export type { CheckboxProps } from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/checkbox/index.js

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

package/dist/lib/checkbox/types.d.ts

@@ -13,4 +13,3 @@ export type CheckboxProps = ShallowMerge<JSX.IntrinsicElements['input'], {
         css?: Interpolation;
     };
 }>;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/checkbox/types.js

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

package/dist/lib/chip/chip.d.ts

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

package/dist/lib/chip/chip.jsx

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

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

package/dist/lib/chip/helpers.js

@@ -1,14 +1,11 @@
-import { mergeComponentProps } from "../../utils/index.js";
+import { mergeComponentProps } from '../../utils';
 const defaultProps = {
-  xs: {
-    css: {},
-    size: "md"
-  },
-  color: "primary"
+    xs: {
+        css: {},
+        size: 'md',
+    },
+    color: 'primary',
 };
-const getChipProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
-};
-export {
-  getChipProps
+export const getChipProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };

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

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

package/dist/lib/chip/index.js

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

package/dist/lib/chip/types.d.ts

@@ -8,4 +8,3 @@ type ChipExtendedProps = ResponsiveDesign<ChipResponsiveProps> & {
 };
 export type ChipProps = ShallowMerge<JSX.IntrinsicElements['div'], ChipExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/chip/types.js

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

package/dist/lib/collapse/collapse.d.ts

@@ -1,3 +1,2 @@
 import { CollapseProps } from './types';
 export declare const Collapse: ({ children, open, collapsedSize, orientation, ...props }: CollapseProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=collapse.d.ts.map

package/dist/lib/collapse/collapse.jsx

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

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

package/dist/lib/collapse/index.js

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

package/dist/lib/collapse/types.d.ts

@@ -5,4 +5,3 @@ export type CollapseProps = ShallowMerge<HTMLMotionProps<'div'>, {
     collapsedSize?: number;
     orientation?: 'horizontal' | 'vertical';
 }>;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/collapse/types.js

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

package/dist/lib/container/container.d.ts

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

package/dist/lib/container/container.jsx

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

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

package/dist/lib/container/helpers.js

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

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

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

package/dist/lib/container/index.js

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

package/dist/lib/container/types.d.ts

@@ -7,4 +7,3 @@ export interface ContainerResponsiveProps extends PropsWithCSS {
 type ContainerExtendedProps = ResponsiveDesign<ContainerResponsiveProps> & {};
 export type ContainerProps = ShallowMerge<JSX.IntrinsicElements['div'], ContainerExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/container/types.js

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

package/dist/lib/count-up/count-up.d.ts

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

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

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

@@ -1,3 +1,2 @@
 export * from './count-up';
 export * from './types';
-//# sourceMappingURL=index.d.ts.map

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

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

package/dist/lib/count-up/types.d.ts

@@ -7,4 +7,3 @@ export type CountUpProps = ShallowMerge<HTMLMotionProps<'span'>, {
     duration?: number;
     formatNumberOptions?: FormatNumberOptions;
 }>;
-//# sourceMappingURL=types.d.ts.map

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

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

package/dist/lib/countdown-timer/countdown-timer.d.ts

@@ -1,3 +1,2 @@
 import { CountdownTimerProps } from './types';
 export declare const CountdownTimer: ({ children, ...props }: CountdownTimerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=countdown-timer.d.ts.map

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

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