@janbox/storefront-ui 1.0.12 → 1.0.14

package/dist/lib/otp-input/otp-input.jsx

@@ -0,0 +1,111 @@
+import { useRef, useEffect } from 'react';
+import { times } from 'lodash-es';
+import { Input } from '../input';
+import { useControllableState } from '../../hooks';
+import { getTypographyVar, mediaQuery } from '../../theme';
+export const OtpInput = ({ length = 6, onFullfilled, onChange, disabled, autoFocus, isLoading, defaultValue, value, error, }) => {
+    const [otp, setOtp] = useControllableState({
+        defaultValue: times(length, (num) => defaultValue?.at(num) ?? ''),
+        value: value?.split(''),
+    });
+    const inputRefs = useRef([]);
+    const getInputIndex = (target) => {
+        return Number(target.dataset.index);
+    };
+    useEffect(() => {
+        if (autoFocus) {
+            inputRefs.current.at(0)?.focus();
+        }
+    }, [autoFocus]);
+    const handleChange = (e) => {
+        if (disabled)
+            return;
+        const value = e.target.value;
+        const index = getInputIndex(e.target);
+        // Chỉ cho phép nhập số
+        if (value && !/^\d$/.test(value))
+            return;
+        const newOtp = [...otp];
+        newOtp[index] = value;
+        setOtp(newOtp);
+        // Gọi callback khi có thay đổi
+        onChange?.(newOtp.join(''));
+        // Tự động chuyển sang ô tiếp theo
+        if (value && index < length - 1) {
+            inputRefs.current.at(index + 1)?.focus();
+        }
+        // Gọi callback khi hoàn thành
+        if (newOtp.every((digit) => digit !== '') && newOtp.join('').length === length) {
+            onFullfilled?.(newOtp.join(''));
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        const index = getInputIndex(e.target);
+        // Xử lý phím Backspace
+        if (e.key === 'Backspace') {
+            if (otp[index]) {
+                // Xóa ký tự hiện tại
+                const newOtp = [...otp];
+                newOtp[index] = '';
+                setOtp(newOtp);
+                onChange?.(newOtp.join(''));
+            }
+            else if (index > 0) {
+                // Chuyển về ô trước đó và xóa
+                const newOtp = [...otp];
+                newOtp[index - 1] = '';
+                setOtp(newOtp);
+                inputRefs.current.at(index - 1)?.focus();
+                onChange?.(newOtp.join(''));
+            }
+        }
+        // Xử lý phím mũi tên
+        if (e.key === 'ArrowLeft' && index > 0) {
+            inputRefs.current.at(index - 1)?.focus();
+        }
+        if (e.key === 'ArrowRight' && index < length - 1) {
+            inputRefs.current.at(index + 1)?.focus();
+        }
+    };
+    const handlePaste = (e) => {
+        if (disabled)
+            return;
+        e.preventDefault();
+        const pastedData = e.clipboardData.getData('text/plain');
+        const pastedDigits = pastedData.replace(/\D/g, '').slice(0, length);
+        if (pastedDigits) {
+            const newOtp = [...otp];
+            pastedDigits.split('').forEach((digit, index) => {
+                if (index < length) {
+                    newOtp[index] = digit;
+                }
+            });
+            setOtp(newOtp);
+            onChange?.(newOtp.join(''));
+            // Focus vào ô cuối cùng được điền
+            const lastFilledIndex = Math.min(pastedDigits.length - 1, length - 1);
+            inputRefs.current.at(lastFilledIndex)?.focus();
+            // Kiểm tra xem đã hoàn thành chưa
+            if (newOtp.every((digit) => digit !== '') && newOtp.join('').length === length) {
+                onFullfilled?.(newOtp.join(''));
+            }
+        }
+    };
+    const onFocus = (e) => {
+        e.target.select();
+    };
+    return (<div css={{ display: 'flex', width: '100%', gap: '0.5rem', [mediaQuery('sm')]: { gap: '0.75rem' } }}>
+      {otp.map((digit, index) => (<div key={index} css={{ flex: '1 1 0%', position: 'relative' }}>
+          <Input ref={(el) => {
+                inputRefs.current[index] = el;
+            }} type="text" inputMode="numeric" pattern="\d*" maxLength={1} data-index={index} value={digit} onChange={handleChange} onFocus={onFocus} onKeyDown={handleKeyDown} onPaste={index === 0 ? handlePaste : undefined} disabled={disabled} readOnly={isLoading} css={{
+                textAlign: 'center',
+                fontWeight: 500,
+                fontSize: getTypographyVar('lg').fontSize,
+                lineHeight: getTypographyVar('lg').lineHeight,
+            }} xs={{ size: 'md' }} error={error}/>
+        </div>))}
+    </div>);
+};

package/dist/lib/otp-input/types.d.ts

@@ -17,4 +17,3 @@ type OtpInputExtendedProps = ResponsiveDesign<OtpInputResponsiveProps> & {
 };
 export type OtpInputProps = ShallowMerge<JSX.IntrinsicElements['div'], OtpInputExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/otp-input/types.js

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

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

@@ -11,4 +11,3 @@ type PageRangeItem = {
 export declare const getPageRange: (currentPage: number, totalPages: number, siblingCount?: number) => PageRangeItem[];
 export declare const getPaginationProps: (extended: PaginationProps) => PaginationProps;
 export {};
-//# sourceMappingURL=helpers.d.ts.map

package/dist/lib/pagination/helpers.js

@@ -1,57 +1,66 @@
-import { mergeComponentProps } from "../../utils/index.js";
+import { mergeComponentProps } from '../../utils';
+// Default values for the pagination component
 const DEFAULT_SIBLING_COUNT = 2;
-const getPageRange = (currentPage, totalPages, siblingCount = DEFAULT_SIBLING_COUNT) => {
-  const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
-  const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
-  const shouldShowLeftDots = leftSiblingIndex > 2;
-  const shouldShowRightDots = rightSiblingIndex < totalPages - 1;
-  const result = [];
-  result.push({ type: "page", page: 1 });
-  if (shouldShowLeftDots) {
-    result.push({ type: "ellipsis" });
-  } else if (leftSiblingIndex > 1) {
-    for (let i = 2; i < leftSiblingIndex; i++) {
-      result.push({ type: "page", page: i });
+export const getPageRange = (currentPage, totalPages, siblingCount = DEFAULT_SIBLING_COUNT) => {
+    // Calculate range based on siblingCount
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+    // Always show at least 1 + 2*siblingCount pages (if available)
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    const shouldShowRightDots = rightSiblingIndex < totalPages - 1;
+    // Output array with page numbers and dots
+    const result = [];
+    // Always include page 1
+    result.push({ type: 'page', page: 1 });
+    // Add left dots if needed
+    if (shouldShowLeftDots) {
+        result.push({ type: 'ellipsis' });
     }
-  }
-  for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
-    if (i !== 1 && i !== totalPages) {
-      result.push({ type: "page", page: i });
+    else if (leftSiblingIndex > 1) {
+        // Fill in numbers between 1 and leftSiblingIndex if no dots
+        for (let i = 2; i < leftSiblingIndex; i++) {
+            result.push({ type: 'page', page: i });
+        }
     }
-  }
-  if (shouldShowRightDots) {
-    result.push({ type: "ellipsis" });
-  } else if (rightSiblingIndex < totalPages) {
-    for (let i = rightSiblingIndex + 1; i < totalPages; i++) {
-      result.push({ type: "page", page: i });
+    // Add main page numbers
+    for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+        if (i !== 1 && i !== totalPages) {
+            result.push({ type: 'page', page: i });
+        }
     }
-  }
-  if (totalPages > 1) {
-    result.push({ type: "page", page: totalPages });
-  }
-  return result;
+    // Add right dots if needed
+    if (shouldShowRightDots) {
+        result.push({ type: 'ellipsis' });
+    }
+    else if (rightSiblingIndex < totalPages) {
+        // Fill in numbers between rightSiblingIndex and totalPages if no dots
+        for (let i = rightSiblingIndex + 1; i < totalPages; i++) {
+            result.push({ type: 'page', page: i });
+        }
+    }
+    // Always include last page if more than 1 page
+    if (totalPages > 1) {
+        result.push({ type: 'page', page: totalPages });
+    }
+    return result;
 };
 const defaultProps = {
-  xs: {
-    size: "sm"
-  },
-  showPrevPageButton: true,
-  showNextPageButton: true,
-  states: {
-    normal: {
-      color: "neutral",
-      variant: "outlined"
+    xs: {
+        size: 'sm',
+    },
+    showPrevPageButton: true,
+    showNextPageButton: true,
+    states: {
+        normal: {
+            color: 'neutral',
+            variant: 'outlined',
+        },
+        active: {
+            color: 'primary',
+            variant: 'outlined',
+        },
     },
-    active: {
-      color: "primary",
-      variant: "outlined"
-    }
-  }
-};
-const getPaginationProps = (extended) => {
-  return mergeComponentProps(defaultProps, extended);
 };
-export {
-  getPageRange,
-  getPaginationProps
+export const getPaginationProps = (extended) => {
+    return mergeComponentProps(defaultProps, extended);
 };

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

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

package/dist/lib/pagination/index.js

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

package/dist/lib/pagination/pagination.d.ts

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

package/dist/lib/pagination/pagination.jsx

@@ -0,0 +1,142 @@
+import { forwardRef, Fragment } from 'react';
+import { getPaginationProps, getPageRange } from './helpers';
+import { Icon } from '../icon';
+import { IconButton } from '../icon-button';
+import { Text } from '../text';
+import ArrowLeftIcon from '../../assets/svg/arrow-left.svg?raw';
+import ArrowForwardIcon from '../../assets/svg/arrow-forward.svg?raw';
+import ArrowRightIcon from '../../assets/svg/arrow-right.svg?raw';
+import { getTypographyVar } from '../../theme';
+import { getSizeVariantState } from '../../utils';
+export const Pagination = forwardRef((_props, ref) => {
+    const { page = 1, count = 1, onChange, disabled, showFirstPageButton, showLastPageButton, showNextPageButton, showPrevPageButton, siblingCount, states, xs, sm, md, lg, ...rest } = getPaginationProps(_props);
+    const sizeVariantState = {
+        xs: getSizeVariantState(xs?.size),
+        sm: getSizeVariantState(sm?.size),
+        md: getSizeVariantState(md?.size),
+        lg: getSizeVariantState(lg?.size),
+    };
+    // Get the current active siblingCount based on screen
+    // Generate the page numbers to display with responsive siblingCount
+    const pageRange = getPageRange(page, count, siblingCount);
+    const css = [
+        {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 4,
+        },
+    ];
+    const handlePageClick = (e) => {
+        const newPage = Number(e.currentTarget.value);
+        if (disabled || newPage === page)
+            return;
+        if (onChange)
+            onChange(newPage);
+    };
+    const handlePrevClick = (_e) => {
+        if (disabled || page <= 1)
+            return;
+        if (onChange)
+            onChange(page - 1);
+    };
+    const handleNextClick = (_e) => {
+        if (disabled || page >= count)
+            return;
+        if (onChange)
+            onChange(page + 1);
+    };
+    const handleFirstClick = (_e) => {
+        if (disabled || page <= 1)
+            return;
+        if (onChange)
+            onChange(1);
+    };
+    const handleLastClick = (_e) => {
+        if (disabled || page >= count)
+            return;
+        if (onChange)
+            onChange(count);
+    };
+    const PaginationButton = (buttonProps) => {
+        return (<IconButton disabled={disabled} variant={states?.normal?.variant} {...buttonProps} xs={{ size: xs?.size, ...buttonProps.xs }} sm={{ size: sm?.size, ...buttonProps.sm }} md={{ size: md?.size, ...buttonProps.md }} lg={{ size: lg?.size, ...buttonProps.lg }}/>);
+    };
+    const PaginationIcon = (iconProps) => {
+        return (<Icon xs={{
+                size: getSizeVariantState(xs?.size).iconSize,
+            }} sm={{
+                size: getSizeVariantState(sm?.size).iconSize,
+            }} md={{
+                size: getSizeVariantState(md?.size).iconSize,
+            }} lg={{
+                size: getSizeVariantState(lg?.size).iconSize,
+            }} {...iconProps}/>);
+    };
+    return (<div css={css} {...rest} ref={ref}>
+      {/* First page button */}
+
+      {showFirstPageButton && (<PaginationButton aria-disabled={page <= 1} color={states?.normal?.color} onClick={handleFirstClick}>
+          <PaginationIcon css={{ transform: 'rotate(180deg)' }} source={ArrowForwardIcon}/>
+        </PaginationButton>)}
+
+      {/* Previous page button */}
+      {showPrevPageButton && (<PaginationButton aria-disabled={page <= 1} color={states?.normal?.color} onClick={handlePrevClick}>
+          <PaginationIcon source={ArrowLeftIcon}/>
+        </PaginationButton>)}
+
+      {/* Page numbers */}
+      {pageRange.map((pageItem, index) => {
+            const isActive = pageItem.type === 'page' && pageItem.page === page;
+            return (<Fragment key={index}>
+            {pageItem.type === 'ellipsis' && <PaginationButton color={states?.normal?.color}>...</PaginationButton>}
+            {pageItem.type === 'page' && (<PaginationButton color={isActive ? states?.active?.color : states?.normal?.color} value={pageItem.page} variant={isActive ? states?.active?.variant : states?.normal?.variant} onClick={handlePageClick}>
+                <Text xs={{
+                        css: {
+                            paddingLeft: 2,
+                            paddingRight: 2,
+                            ...(sizeVariantState.xs.textVariant
+                                ? {
+                                    fontSize: getTypographyVar(sizeVariantState.xs.textVariant).fontSize,
+                                    lineHeight: getTypographyVar(sizeVariantState.xs.textVariant).lineHeight,
+                                }
+                                : {}),
+                        },
+                    }} sm={{
+                        css: sizeVariantState.sm.textVariant
+                            ? {
+                                fontSize: getTypographyVar(sizeVariantState.sm.textVariant).fontSize,
+                                lineHeight: getTypographyVar(sizeVariantState.sm.textVariant).lineHeight,
+                            }
+                            : {},
+                    }} md={{
+                        css: sizeVariantState.md.textVariant
+                            ? {
+                                fontSize: getTypographyVar(sizeVariantState.md.textVariant).fontSize,
+                                lineHeight: getTypographyVar(sizeVariantState.md.textVariant).lineHeight,
+                            }
+                            : {},
+                    }} lg={{
+                        css: sizeVariantState.lg.textVariant
+                            ? {
+                                fontSize: getTypographyVar(sizeVariantState.lg.textVariant).fontSize,
+                                lineHeight: getTypographyVar(sizeVariantState.lg.textVariant).lineHeight,
+                            }
+                            : {},
+                    }}>
+                  {pageItem.page}
+                </Text>
+              </PaginationButton>)}
+          </Fragment>);
+        })}
+
+      {/* Next page button */}
+      {showNextPageButton && (<PaginationButton aria-disabled={page >= count} color={states?.normal?.color} onClick={handleNextClick}>
+          <PaginationIcon source={ArrowRightIcon}/>
+        </PaginationButton>)}
+
+      {/* Last page button */}
+      {showLastPageButton && (<PaginationButton aria-disabled={page >= count} color={states?.normal?.color} onClick={handleLastClick}>
+          <PaginationIcon source={ArrowForwardIcon}/>
+        </PaginationButton>)}
+    </div>);
+});

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

@@ -22,4 +22,3 @@ type PaginationExtendedProps = ResponsiveDesign<PaginationResponsiveProps> & {
 };
 export type PaginationProps = ShallowMerge<JSX.IntrinsicElements['div'], PaginationExtendedProps>;
 export {};
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/pagination/types.js

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

package/dist/lib/phone-input/index.d.ts

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

package/dist/lib/phone-input/index.js

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

package/dist/lib/phone-input/phone-input.d.ts

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

package/dist/lib/phone-input/phone-input.jsx

@@ -0,0 +1,148 @@
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+import { isNil } from 'lodash-es';
+import { phone } from 'phone';
+import countries from '../../assets/json/countries.json';
+import { useControllableState } from '../../hooks';
+import { getColorShadesByVariant } from '../../utils';
+import { getColorVar } from '../../theme';
+import { Flag } from '../flag';
+import { FormHelperText } from '../form-helper-text';
+import { Input } from '../input';
+import { InputMask } from '../input-mask';
+import { Select } from '../select';
+const CountryRowLabel = ({ code, name, dial_code }) => {
+    return (<div css={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+      <Flag countryCode={code}/>
+      <span css={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+        {dial_code} ({name})
+      </span>
+    </div>);
+};
+const SelectedRenderer = ({ code, dial_code }) => {
+    return (<div css={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+      <Flag countryCode={code}/>
+      <span css={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{dial_code}</span>
+    </div>);
+};
+const parsePhoneInputValue = (value) => {
+    if (isNil(value)) {
+        return value;
+    }
+    if (value.countryCode) {
+        return {
+            ...value,
+            dialCode: value.dialCode ?? countries.find((country) => country.code === value.countryCode)?.dial_code,
+        };
+    }
+    const { countryIso2 } = phone([value.dialCode, value.nationalNumber].filter(Boolean).join(''));
+    return {
+        ...value,
+        countryCode: countryIso2 ?? countries.find((country) => country.dial_code === value.dialCode)?.code,
+    };
+};
+export const PhoneInput = forwardRef(({ error, defaultValue, value, onChange, containerProps, helperText, disabled, ...props }, ref) => {
+    const [selectOpen, setSelectOpen] = useState(false);
+    const [inputFocused, setInputFocused] = useState(false);
+    const inputRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const mergedRefs = useMergeRefs([ref, wrapperRef]);
+    const [wrapperWidth, setWrapperWidth] = useState(0);
+    useEffect(() => {
+        const resizeObserver = new ResizeObserver((entries) => {
+            const domRect = entries.at(0)?.target.getBoundingClientRect();
+            if (domRect) {
+                setWrapperWidth(domRect.width);
+            }
+        });
+        if (wrapperRef.current) {
+            resizeObserver.observe(wrapperRef.current);
+        }
+        return () => resizeObserver.disconnect();
+    }, []);
+    const [internalValue, setInternalValue] = useControllableState({
+        defaultValue: parsePhoneInputValue(defaultValue) ?? {
+            countryCode: countries.at(0)?.code,
+        },
+        value: parsePhoneInputValue(value),
+    });
+    const triggerChange = (next) => {
+        setInternalValue(next);
+        onChange?.(next);
+    };
+    const onDialCodeChange = (_, option) => {
+        triggerChange({
+            ...internalValue,
+            dialCode: option.dial_code,
+            countryCode: option.code,
+        });
+        inputRef.current?.select();
+    };
+    const onNationalNumberChange = (e) => {
+        e.target.value = e.target.value.replace(/[^0-9]/g, '');
+        triggerChange({
+            ...internalValue,
+            nationalNumber: e.target.value,
+        });
+    };
+    const inputDisplayValue = (() => {
+        const originalValue = internalValue.nationalNumber ?? '';
+        return inputFocused ? originalValue : originalValue.replace(/^(\d{1,3})(\d{0,3})?(\d*)$/, '$1 $2 $3');
+    })();
+    return (<div {...containerProps} css={[{ display: 'flex', flexDirection: 'column', width: '100%' }, containerProps?.css]}>
+        <InputMask {...props} css={[
+            error &&
+                !selectOpen && {
+                '&::after': { borderColor: getColorVar('red.600') },
+            },
+            inputFocused && {
+                '&::after': { borderColor: getColorVar('primary.600') },
+                boxShadow: `0 0 0 3px ${getColorVar('primary.300')}`,
+            },
+            disabled && {
+                backgroundColor: getColorShadesByVariant('neutral').disabledSurface,
+                pointerEvents: 'none',
+            },
+            props.css,
+        ]} ref={mergedRefs}>
+          <div css={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center' }}>
+            <Select containerProps={{
+            css: { width: 'fit-content', minWidth: 80 },
+        }} css={{
+            paddingRight: 0,
+        }} xs={{
+            outline: {
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0,
+            },
+        }} listProps={{
+            style: {
+                width: wrapperWidth,
+            },
+        }} value={internalValue.countryCode ?? null} onChange={onDialCodeChange} options={countries} disabled={disabled} selectedRenderer={SelectedRenderer} optionLabel={CountryRowLabel} optionValue="code" optionSearchLabel={['name', 'dial_code', 'code']} open={selectOpen} onOpenChange={setSelectOpen}/>
+            <div css={{
+            borderRight: '1px solid',
+            borderColor: getColorVar('border.default'),
+            height: '66.666667%',
+            marginLeft: 8,
+            marginRight: 8,
+        }}/>
+            <Input value={inputDisplayValue} disabled={disabled} containerProps={{
+            css: { flex: 1 },
+        }} mainProps={{
+            style: {
+                paddingLeft: 0,
+                boxShadow: 'none',
+            },
+        }} onChange={onNationalNumberChange} xs={{
+            css: {
+                borderWidth: 0,
+            },
+        }} onFocus={() => setInputFocused(true)} onBlur={() => setInputFocused(false)} ref={inputRef}/>
+          </div>
+        </InputMask>
+        <FormHelperText error={error}>{helperText}</FormHelperText>
+      </div>);
+});

package/dist/lib/phone-input/types.d.ts

@@ -21,4 +21,3 @@ export type PhoneInputProps = ShallowMerge<JSX.IntrinsicElements['div'], {
     };
     disabled?: boolean;
 } & ResponsiveDesign<PhoneInputResponsiveProps>>;
-//# sourceMappingURL=types.d.ts.map

package/dist/lib/phone-input/types.js

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

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

@@ -2,4 +2,3 @@ export * from './popover';
 export * from './popover-trigger';
 export * from './popover-content';
 export * from './popover-close';
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/popover/index.js

@@ -0,0 +1,4 @@
+export * from './popover';
+export * from './popover-trigger';
+export * from './popover-content';
+export * from './popover-close';

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

@@ -1,2 +1 @@
-export declare const usePopoverContext: () => import('../../floating').FloatingContextValue;
-//# sourceMappingURL=helpers.d.ts.map
+export declare const usePopoverContext: () => import("../../floating").FloatingContextValue;

package/dist/lib/popover/popover/helpers.js

@@ -1,7 +1,4 @@
-import { useFloatingContext } from "../../floating/floating/helpers.js";
-const usePopoverContext = () => {
-  return useFloatingContext();
-};
-export {
-  usePopoverContext
+import { useFloatingContext } from '../../floating';
+export const usePopoverContext = () => {
+    return useFloatingContext();
 };

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

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

package/dist/lib/popover/popover/index.js

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

package/dist/lib/popover/popover/popover.d.ts

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

package/dist/lib/popover/popover/popover.jsx

@@ -0,0 +1,17 @@
+import { useControllableState } from '../../../hooks';
+import { Floating } from '../../..';
+export const Popover = ({ ...props }) => {
+    const [open, setOpen] = useControllableState({
+        defaultValue: false,
+        value: props.open,
+    });
+    const onOpenChange = (open, event, reason) => {
+        setOpen(open);
+        props.onOpenChange?.(open, event, reason);
+    };
+    return (<Floating dismissProps={{
+            enabled: true,
+        }} clickProps={{
+            enabled: true,
+        }} {...props} open={open} onOpenChange={onOpenChange}/>);
+};

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

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