@janbox/storefront-ui 1.0.13 → 1.0.14

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

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

@@ -1,3 +1,2 @@
 import { JSX } from 'react';
 export type TableProps = JSX.IntrinsicElements['table'];
-//# sourceMappingURL=types.d.ts.map

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

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

package/dist/lib/table/table-body/index.d.ts

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

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

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

package/dist/lib/table/table-body/table-body.d.ts

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

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

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

@@ -1,4 +1,3 @@
-import { PrimitiveProps } from '../../primitive';
-import { JSX } from 'react';
+import { PrimitiveProps } from "../../../lib/primitive";
+import { JSX } from "react";
 export type TableBodyProps = PrimitiveProps<JSX.IntrinsicElements["tbody"]>;
-//# sourceMappingURL=types.d.ts.map

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

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

package/dist/lib/table/table-cell/index.d.ts

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

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

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

package/dist/lib/table/table-cell/table-cell.d.ts

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

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

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

package/dist/lib/table/table-cell/types.d.ts

@@ -1,3 +1,2 @@
 import { JSX } from 'react';
 export type TableCellProps = JSX.IntrinsicElements['td'];
-//# sourceMappingURL=types.d.ts.map

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

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

package/dist/lib/table/table-footer/index.d.ts

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

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

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

package/dist/lib/table/table-footer/table-footer.d.ts

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

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

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

package/dist/lib/table/table-footer/types.d.ts

@@ -1,3 +1,2 @@
 import { JSX } from 'react';
 export type TableFooterProps = JSX.IntrinsicElements['tfoot'];
-//# sourceMappingURL=types.d.ts.map

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

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

package/dist/lib/table/table-head/index.d.ts

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

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

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

package/dist/lib/table/table-head/table-head.d.ts

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

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

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

@@ -1,4 +1,3 @@
-import { PrimitiveProps } from '../../primitive';
-import { JSX } from 'react';
+import { PrimitiveProps } from "../../../lib/primitive";
+import { JSX } from "react";
 export type TableHeadProps = PrimitiveProps<JSX.IntrinsicElements["thead"]>;
-//# sourceMappingURL=types.d.ts.map

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

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

package/dist/lib/table/table-row/index.d.ts

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

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

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

package/dist/lib/table/table-row/table-row.d.ts

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

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

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

package/dist/lib/table/table-row/types.d.ts

@@ -1,3 +1,2 @@
 import { JSX } from 'react';
 export type TableRowProps = JSX.IntrinsicElements['tr'];
-//# sourceMappingURL=types.d.ts.map

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

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

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

@@ -3,4 +3,3 @@ export * from './tab-list';
 export * from './tab';
 export * from './tab-content';
 export * from './tab-panel';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/tabs/index.js

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

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

@@ -1,3 +1,2 @@
-export declare const TabIndexContext: import('react').Context<number>;
+export declare const TabIndexContext: import("react").Context<number>;
 export declare const useTabIndexContext: () => number;
-//# sourceMappingURL=helpers.d.ts.map

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

@@ -1,9 +1,5 @@
-import { createContext, useContext } from "react";
-const TabIndexContext = createContext(-1);
-const useTabIndexContext = () => {
-  return useContext(TabIndexContext);
-};
-export {
-  TabIndexContext,
-  useTabIndexContext
+import { createContext, useContext } from 'react';
+export const TabIndexContext = createContext(-1);
+export const useTabIndexContext = () => {
+    return useContext(TabIndexContext);
 };

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

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

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

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

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

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

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

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

@@ -11,4 +11,3 @@ export interface TabExtendedProps extends ResponsiveDesign<TabResponsiveProps> {
     }>>;
 }
 export type TabProps = ShallowMerge<ButtonProps, TabExtendedProps>;
-//# sourceMappingURL=types.d.ts.map

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

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

package/dist/lib/tabs/tab-content/index.d.ts

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

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

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

package/dist/lib/tabs/tab-content/tab-content.d.ts

@@ -1,4 +1,3 @@
-export declare const TabContent: import('react').ForwardRefExoticComponent<{
-    children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=tab-content.d.ts.map
+export declare const TabContent: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

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

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

@@ -1,3 +1,2 @@
 import { PropsWithChildren } from 'react';
 export type TabContentProps = PropsWithChildren;
-//# sourceMappingURL=types.d.ts.map

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

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

package/dist/lib/tabs/tab-indicator/index.d.ts

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

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

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

package/dist/lib/tabs/tab-indicator/tab-indicator.d.ts

@@ -1,2 +1 @@
 export declare const TabIndicator: () => import("@emotion/react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=tab-indicator.d.ts.map

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

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

@@ -1,4 +1,3 @@
-import { PropsWithCSS, ResponsiveDesign } from '../../../types';
+import { PropsWithCSS, ResponsiveDesign } from "../../../types";
 export type TabIndicatorResponsiveProps = PropsWithCSS;
 export type TabIndicatorProps = ResponsiveDesign<TabIndicatorResponsiveProps>;
-//# sourceMappingURL=types.d.ts.map

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

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

package/dist/lib/tabs/tab-list/helpers.d.ts

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

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

@@ -1,8 +1,5 @@
-import { mergeComponentProps } from "../../../utils/index.js";
+import { mergeComponentProps } from '../../../utils';
 const defaultProps = {};
-const getTabListProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
-};
-export {
-  getTabListProps
+export const getTabListProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };

package/dist/lib/tabs/tab-list/index.d.ts

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

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

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

package/dist/lib/tabs/tab-list/tab-list.d.ts

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

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

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

@@ -5,4 +5,3 @@ export interface TabListExtendedProps extends ResponsiveDesign<PropsWithCSS> {
 }
 export type TabListProps = TabListHTMLProps & TabListExtendedProps;
 export {};
-//# sourceMappingURL=types.d.ts.map

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

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

package/dist/lib/tabs/tab-panel/helpers.d.ts

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

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

@@ -1,8 +1,5 @@
-import { mergeComponentProps } from "../../../utils/index.js";
+import { mergeComponentProps } from '../../../utils';
 const defaultProps = {};
-const getTabPanelProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
-};
-export {
-  getTabPanelProps
+export const getTabPanelProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };

package/dist/lib/tabs/tab-panel/index.d.ts

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

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

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

package/dist/lib/tabs/tab-panel/tab-panel.d.ts

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

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

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

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

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

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

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

@@ -8,6 +8,5 @@ export type TabsContextValue = {
     tabPanelProps?: TabsProps['tabPanelProps'];
     preventActiveTabChange: TabsProps['preventActiveTabChange'];
 };
-export declare const TabsContext: import('react').Context<TabsContextValue>;
+export declare const TabsContext: import("react").Context<TabsContextValue>;
 export declare const useTabsContext: () => TabsContextValue;
-//# sourceMappingURL=helpers.d.ts.map