@cocso-ui/react 0.2.21 → 1.0.1

package/dist/esm/components/field/field.mjs

@@ -0,0 +1,46 @@
+"use client";
+import { useId, useContext, createContext } from 'react';
+import styles from './field.module.css.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const FieldContext = /*#__PURE__*/createContext({});
+const useField = () => useContext(FieldContext);
+function Field({
+  children,
+  label,
+  htmlFor,
+  required,
+  optionalLabel,
+  error,
+  description
+}) {
+  const descriptionId = useId();
+  const errorId = useId();
+  return /*#__PURE__*/jsx(FieldContext.Provider, {
+    value: {
+      descriptionId: !error && description ? descriptionId : undefined,
+      errorId: error ? errorId : undefined
+    },
+    children: /*#__PURE__*/jsxs("div", {
+      className: styles.root,
+      children: [/*#__PURE__*/jsxs("label", {
+        className: styles.label,
+        htmlFor: htmlFor,
+        children: [label, required === false && /*#__PURE__*/jsx("span", {
+          className: styles.optional,
+          children: optionalLabel ?? "(Optional)"
+        })]
+      }), children, error && /*#__PURE__*/jsx("p", {
+        className: styles.errorMessage,
+        id: errorId,
+        children: error
+      }), !error && description && /*#__PURE__*/jsx("p", {
+        className: styles.description,
+        id: descriptionId,
+        children: description
+      })]
+    })
+  });
+}
+
+export { Field, useField };

package/dist/esm/components/field/field.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"root":"field-module_root__m2CZV","label":"field-module_label__LbITU","optional":"field-module_optional__NE5TC","description":"field-module_description__qiTfj","errorMessage":"field-module_errorMessage__HWoWa"};
+
+export { styles as default };

package/dist/esm/components/input/input.d.mts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+type InputSize = "large" | "medium" | "small" | "x-small";
+interface InputProps extends Omit<ComponentProps<"input">, "size"> {
+    description?: string;
+    disabled?: boolean;
+    error?: boolean | string;
+    label?: string;
+    size?: InputSize;
+    stretch?: boolean;
+}
+/** Text input component with size and variant options. */
+declare function Input({ ref, className, style: _style, size, disabled, error, stretch, label, description, id: _id, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+
+export { Input };
+export type { InputProps, InputSize };

package/dist/esm/components/input/input.mjs

@@ -0,0 +1,67 @@
+"use client";
+import { input } from '../../ecosystem/codegen/generated/input.mjs';
+import { useId } from 'react';
+import { cn } from '../../cn.mjs';
+import styles from './input.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { Field, useField } from '../field/field.mjs';
+
+/** Text input component with size and variant options. */
+function Input({
+  ref,
+  className,
+  style: _style,
+  size = "medium",
+  disabled = false,
+  error = false,
+  stretch = false,
+  label,
+  description,
+  id: _id,
+  ...props
+}) {
+  const generatedId = useId();
+  const id = _id ?? generatedId;
+  const hasError = !!error;
+  const errorMessage = typeof error === "string" ? error : undefined;
+  const style = {
+    ..._style
+  };
+  const inputEl = /*#__PURE__*/jsx(FieldAwareInput, {
+    "aria-invalid": hasError || undefined,
+    className: cn(input({
+      size
+    }), styles.input, stretch && styles.stretch, hasError && styles.error, className),
+    "data-cocso-component": "input",
+    disabled: disabled,
+    id: id,
+    ref: ref,
+    style: style,
+    ...props
+  });
+  if (label) {
+    return /*#__PURE__*/jsx(Field, {
+      description: description,
+      error: errorMessage,
+      htmlFor: id,
+      label: label,
+      required: props.required,
+      children: inputEl
+    });
+  }
+  return inputEl;
+}
+function FieldAwareInput({
+  "aria-describedby": callerDescribedBy,
+  ...props
+}) {
+  const field = useField();
+  const fieldDescribedBy = field.errorId ?? field.descriptionId;
+  const describedBy = [fieldDescribedBy, callerDescribedBy].filter(Boolean).join(" ") || undefined;
+  return /*#__PURE__*/jsx("input", {
+    "aria-describedby": describedBy,
+    ...props
+  });
+}
+
+export { Input };

package/dist/esm/components/input/input.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"input":"input-module_input__-ipHD","stretch":"input-module_stretch__1zxJA","error":"input-module_error__8P-i-"};
+
+export { styles as default };

package/dist/esm/components/input-trigger/input-trigger.d.mts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps, ReactNode } from 'react';
+import { InputSize } from '../input/input.mjs';
+
+interface InputTriggerProps extends Omit<ComponentProps<"button">, "prefix"> {
+    error?: boolean | string;
+    /** Shown in a muted style when no `children` value is present. */
+    placeholder?: string;
+    /** Leading content (e.g. an icon) rendered before the value. */
+    prefix?: ReactNode;
+    size?: InputSize;
+    stretch?: boolean;
+    /** Trailing content (e.g. a calendar or chevron icon). */
+    suffix?: ReactNode;
+}
+/**
+ * A native `<button>` styled to look like an `Input`. Use it as the trigger for
+ * `Dropdown`, `DayPicker`, `MonthPicker`, etc. — being a real button, it never
+ * triggers Base UI's `nativeButton` warning, while still presenting an
+ * input-like surface (value/placeholder + optional affix icons).
+ */
+declare function InputTrigger({ ref, className, size, error, stretch, disabled, prefix, suffix, placeholder, children, ...props }: InputTriggerProps): react_jsx_runtime.JSX.Element;
+
+export { InputTrigger };
+export type { InputTriggerProps };

package/dist/esm/components/input-trigger/input-trigger.mjs

@@ -0,0 +1,51 @@
+"use client";
+import { input } from '../../ecosystem/codegen/generated/input.mjs';
+import { cn } from '../../cn.mjs';
+import styles from './input-trigger.module.css.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/**
+ * A native `<button>` styled to look like an `Input`. Use it as the trigger for
+ * `Dropdown`, `DayPicker`, `MonthPicker`, etc. — being a real button, it never
+ * triggers Base UI's `nativeButton` warning, while still presenting an
+ * input-like surface (value/placeholder + optional affix icons).
+ */
+function InputTrigger({
+  ref,
+  className,
+  size = "medium",
+  error = false,
+  stretch = false,
+  disabled = false,
+  prefix,
+  suffix,
+  placeholder,
+  children,
+  ...props
+}) {
+  const hasError = !!error;
+  const hasValue = children != null && children !== "";
+  return /*#__PURE__*/jsxs("button", {
+    "aria-invalid": hasError || undefined,
+    className: cn(input({
+      size
+    }), styles.trigger, stretch && styles.stretch, hasError && styles.error, className),
+    "data-cocso-component": "input-trigger",
+    disabled: disabled,
+    ref: ref,
+    type: "button",
+    ...props,
+    children: [prefix && /*#__PURE__*/jsx("span", {
+      className: styles.affix,
+      children: prefix
+    }), /*#__PURE__*/jsx("span", {
+      className: cn(styles.value, !hasValue && styles.placeholder),
+      children: hasValue ? children : placeholder
+    }), suffix && /*#__PURE__*/jsx("span", {
+      className: styles.affix,
+      children: suffix
+    })]
+  });
+}
+
+export { InputTrigger };

package/dist/esm/components/input-trigger/input-trigger.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"trigger":"input-trigger-module_trigger__FepZ1","stretch":"input-trigger-module_stretch__iRyO-","error":"input-trigger-module_error__qttrx","value":"input-trigger-module_value__3RNV4","placeholder":"input-trigger-module_placeholder__-9y7a","affix":"input-trigger-module_affix__IJsDY"};
+
+export { styles as default };

package/dist/esm/components/link/link.d.mts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ExternalLinkIcon } from '@cocso-ui/react-icons';
+import { ComponentProps } from 'react';
+import { RenderProp } from '../../primitives/use-render.mjs';
+import { LineHeight, FontWeight } from '../../token/typography.mjs';
+import { TypographyProps } from '../typography/typography.mjs';
+
+type LinkSize = "large" | "medium" | "small" | "x-small";
+type LinkVariant = "inline" | "current" | "plain";
+interface LinkProps extends ComponentProps<"a"> {
+    indicator?: boolean;
+    lineHeight?: LineHeight;
+    render?: RenderProp;
+    size?: TypographyProps["size"];
+    type?: TypographyProps["type"];
+    variant?: LinkVariant;
+    weight?: FontWeight;
+}
+declare function LinkComponent({ ref, render: renderProp, className, style: _style, size, type, weight, lineHeight, variant, indicator, ...props }: LinkProps): react_jsx_runtime.JSX.Element;
+declare function ExternalIcon({ className, ...props }: ComponentProps<typeof ExternalLinkIcon>): react_jsx_runtime.JSX.Element;
+/** Styled anchor/link component with inline, current, and plain variants. */
+declare const Link: typeof LinkComponent & {
+    displayName: "Link";
+    ExternalIcon: typeof ExternalIcon;
+};
+
+export { Link };
+export type { LinkProps, LinkSize, LinkVariant };

package/dist/esm/components/link/link.mjs

@@ -0,0 +1,61 @@
+import { link } from '../../ecosystem/codegen/generated/link.mjs';
+import { ExternalLinkIcon } from '@cocso-ui/react-icons';
+import { cn } from '../../cn.mjs';
+import styles from './link.module.css.mjs';
+import { jsx } from 'react/jsx-runtime';
+import { Typography } from '../typography/typography.mjs';
+
+function LinkComponent({
+  ref,
+  render: renderProp,
+  className,
+  style: _style,
+  size,
+  type = "body",
+  weight,
+  lineHeight,
+  variant = "inline",
+  indicator,
+  ...props
+}) {
+  const showIndicator = indicator ?? variant !== "plain";
+  const style = {
+    ..._style
+  };
+  const mergedClassName = cn(link({
+    variant
+  }), styles.link, variant === "current" && styles.current, showIndicator && styles.indicator, className);
+  const typographyProps = {
+    className: mergedClassName,
+    lineHeight,
+    ref,
+    render: renderProp ?? (renderProps => /*#__PURE__*/jsx("a", {
+      ...renderProps
+    })),
+    size,
+    style,
+    type,
+    weight,
+    ...props
+  };
+  return /*#__PURE__*/jsx(Typography, {
+    ...typographyProps
+  });
+}
+function ExternalIcon({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(ExternalLinkIcon, {
+    className: cn(styles.externalIcon, className),
+    ...props
+  });
+}
+
+/** Styled anchor/link component with inline, current, and plain variants. */
+const Link = Object.assign(LinkComponent, {
+  displayName: "Link",
+  ExternalIcon
+});
+
+export { Link };

package/dist/esm/components/link/link.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"link":"link-module_link__RLpbr","current":"link-module_current__RgEV9","indicator":"link-module_indicator__73GYU","externalIcon":"link-module_externalIcon__3okjy"};
+
+export { styles as default };

package/dist/esm/components/month-picker/month-picker.d.mts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Locale } from 'date-fns';
+import { ComponentProps, ReactElement } from 'react';
+
+interface MonthPickerProps extends Omit<ComponentProps<"div">, "children"> {
+    dateFormat?: string;
+    disabled?: boolean;
+    locale?: Locale;
+    maxDate?: Date;
+    minDate?: Date;
+    onValueChange?: (value: Date | null) => void;
+    trigger?: ReactElement;
+    value?: Date;
+}
+declare function MonthPicker({ ref, className, value, onValueChange, trigger, locale, dateFormat, minDate, maxDate, disabled, ...props }: MonthPickerProps): react_jsx_runtime.JSX.Element;
+
+export { MonthPicker };
+export type { MonthPickerProps };

package/dist/esm/components/month-picker/month-picker.mjs

@@ -0,0 +1,106 @@
+"use client";
+import { ArrowIOSBackwardIcon, ArrowIOSForwardIcon } from '@cocso-ui/react-icons';
+import { format } from 'date-fns';
+import { ko } from 'date-fns/locale';
+import { useState } from 'react';
+import DatePicker from 'react-datepicker';
+import { cn } from '../../cn.mjs';
+import styles from './month-picker.module.css.mjs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Dropdown } from '../dropdown/dropdown.mjs';
+import { Button } from '../button/button.mjs';
+import { Typography } from '../typography/typography.mjs';
+
+function MonthPicker({
+  ref,
+  className,
+  value,
+  onValueChange,
+  trigger,
+  locale = ko,
+  dateFormat = "yyyy년 MM월",
+  minDate,
+  maxDate,
+  disabled,
+  ...props
+}) {
+  const [open, setOpen] = useState(false);
+  const handleChange = date => {
+    onValueChange?.(date);
+    setOpen(false);
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: cn(styles.root, className),
+    ref: ref,
+    ...props,
+    children: /*#__PURE__*/jsxs(Dropdown, {
+      onOpenChange: setOpen,
+      open: open,
+      children: [/*#__PURE__*/jsx(Dropdown.Trigger, {
+        render: trigger ?? /*#__PURE__*/jsx(Button, {
+          disabled: disabled,
+          size: "small",
+          variant: "outline",
+          children: value ? format(value, dateFormat, {
+            locale
+          }) : "Select month"
+        })
+      }), /*#__PURE__*/jsx(Dropdown.Content, {
+        "aria-label": "Select month",
+        className: styles.content,
+        children: /*#__PURE__*/jsx(DatePicker, {
+          dateFormat: dateFormat,
+          disabled: disabled,
+          inline: true,
+          locale: locale,
+          maxDate: maxDate,
+          minDate: minDate,
+          onChange: handleChange,
+          renderCustomHeader: ({
+            date,
+            decreaseYear,
+            increaseYear,
+            prevYearButtonDisabled,
+            nextYearButtonDisabled
+          }) => /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx(Typography, {
+              size: "small",
+              type: "body",
+              weight: "semibold",
+              children: date.toLocaleDateString(locale.code ?? "ko-KR", {
+                year: "numeric"
+              })
+            }), /*#__PURE__*/jsxs("div", {
+              className: styles.menu,
+              children: [/*#__PURE__*/jsx(Button, {
+                className: styles.arrow,
+                disabled: prevYearButtonDisabled,
+                onClick: decreaseYear,
+                size: "x-small",
+                svgOnly: true,
+                type: "button",
+                variant: "outline",
+                children: /*#__PURE__*/jsx(ArrowIOSBackwardIcon, {})
+              }), /*#__PURE__*/jsx(Button, {
+                className: styles.arrow,
+                disabled: nextYearButtonDisabled,
+                onClick: increaseYear,
+                size: "x-small",
+                svgOnly: true,
+                type: "button",
+                variant: "outline",
+                children: /*#__PURE__*/jsx(ArrowIOSForwardIcon, {})
+              })]
+            })]
+          }),
+          selected: value,
+          showFourColumnMonthYearPicker: true,
+          showMonthYearPicker: true,
+          showPopperArrow: false
+        })
+      })]
+    })
+  });
+}
+
+export { MonthPicker };

package/dist/esm/components/month-picker/month-picker.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"root":"month-picker-module_root__iHMl-","content":"month-picker-module_content__vb64G","menu":"month-picker-module_menu__V8bwo","arrow":"month-picker-module_arrow__eD5-G"};
+
+export { styles as default };

package/dist/esm/components/one-time-password-field/one-time-password-field.d.mts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { OTPInput } from 'input-otp';
+import { ComponentProps } from 'react';
+
+interface OneTimePasswordFieldProps extends Omit<ComponentProps<typeof OTPInput>, "onChange" | "render" | "children"> {
+    className?: string;
+    onValueChange?: (value: string) => void;
+    slotClassName?: string;
+}
+declare function OneTimePasswordField({ className, slotClassName, onValueChange, ref, ...props }: OneTimePasswordFieldProps): react_jsx_runtime.JSX.Element;
+
+export { OneTimePasswordField };
+export type { OneTimePasswordFieldProps };

package/dist/esm/components/one-time-password-field/one-time-password-field.mjs

@@ -0,0 +1,42 @@
+import { OTPInput } from 'input-otp';
+import { cn } from '../../cn.mjs';
+import styles from './one-time-password-field.module.css.mjs';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+const Slot = ({
+  char,
+  className,
+  hasFakeCaret,
+  isActive,
+  placeholderChar
+}) => /*#__PURE__*/jsxs("div", {
+  className: cn(styles.slot, isActive && styles.slotActive, className),
+  "data-active": isActive || undefined,
+  children: [char ?? placeholderChar, hasFakeCaret && /*#__PURE__*/jsx("div", {
+    className: styles.caret
+  })]
+});
+function OneTimePasswordField({
+  className,
+  slotClassName,
+  onValueChange,
+  ref,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(OTPInput, {
+    containerClassName: cn(styles.otp, className),
+    onChange: onValueChange,
+    ref: ref,
+    render: ({
+      slots
+    }) => /*#__PURE__*/jsx(Fragment, {
+      children: [...slots.entries()].map(([i, slot]) => /*#__PURE__*/jsx(Slot, {
+        ...slot,
+        className: slotClassName
+      }, `otp-slot-${i}`))
+    }),
+    ...props
+  });
+}
+
+export { OneTimePasswordField };

package/dist/esm/components/one-time-password-field/one-time-password-field.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"otp":"one-time-password-field-module_otp__6eiAN","slot":"one-time-password-field-module_slot__tFGbq","slotActive":"one-time-password-field-module_slotActive__iT0ud","caret":"one-time-password-field-module_caret__X9T-B"};
+
+export { styles as default };

package/dist/esm/components/pagination/pagination.d.mts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+
+interface PaginationLabels {
+    navigation?: string;
+    next?: string;
+    page?: (n: number) => string;
+    previous?: string;
+}
+type PaginationLocale = "en" | "ko";
+interface PaginationProps extends Omit<ComponentProps<"nav">, "onChange"> {
+    labels?: PaginationLabels;
+    locale?: PaginationLocale;
+    maxVisible?: number;
+    onChange: (pageNumber: number) => void;
+    page: number;
+    totalPages: number;
+}
+/** Page navigation component with previous/next controls and truncated page range. */
+declare function Pagination({ ref, className, page, totalPages, maxVisible, onChange, labels, locale, ...props }: PaginationProps): react_jsx_runtime.JSX.Element;
+
+export { Pagination };
+export type { PaginationLabels, PaginationLocale, PaginationProps };

package/dist/esm/{pagination/Pagination.mjs → components/pagination/pagination.mjs}

@@ -1,54 +1,85 @@
 import { ArrowIOSBackwardIcon, MoreHorizIcon, ArrowIOSForwardIcon } from '@cocso-ui/react-icons';
-import { clsx } from 'clsx';
-import { forwardRef } from 'react';
-import styles from './Pagination.module.css.mjs';
+import { cn } from '../../cn.mjs';
+import styles from './pagination.module.css.mjs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-const Pagination = /*#__PURE__*/forwardRef(({
+const LOCALE_LABELS = {
+  en: {
+    navigation: "Page navigation",
+    previous: "Previous page",
+    next: "Next page",
+    page: n => `Page ${n}`
+  },
+  ko: {
+    navigation: "페이지 탐색",
+    previous: "이전 페이지",
+    next: "다음 페이지",
+    page: n => `${n} 페이지`
+  }
+};
+/** Page navigation component with previous/next controls and truncated page range. */
+function Pagination({
+  ref,
   className,
   page,
   totalPages,
   maxVisible = 5,
   onChange,
+  labels,
+  locale = "en",
   ...props
-}, ref) => {
+}) {
   const halfVisible = Math.ceil(maxVisible / 2);
+  const defaults = LOCALE_LABELS[locale];
+  const navigationLabel = labels?.navigation ?? defaults.navigation;
+  const previousLabel = labels?.previous ?? defaults.previous;
+  const nextLabel = labels?.next ?? defaults.next;
+  const pageLabel = labels?.page ?? defaults.page;
   const renderPageButton = pageNumber => /*#__PURE__*/jsx("button", {
-    type: "button",
+    "aria-current": page === pageNumber ? "page" : undefined,
+    "aria-label": pageLabel(pageNumber),
     className: styles.item,
-    onClick: () => onChange(pageNumber),
     "data-active": page === pageNumber,
+    onClick: () => onChange(pageNumber),
+    type: "button",
     children: pageNumber
   }, pageNumber);
-  return /*#__PURE__*/jsxs("div", {
+  return /*#__PURE__*/jsxs("nav", {
+    "aria-label": navigationLabel,
+    className: cn(styles.pagination, className),
     ref: ref,
-    className: clsx(styles.pagination, className),
     ...props,
     children: [totalPages > 1 && /*#__PURE__*/jsx("button", {
+      "aria-label": previousLabel,
       className: styles.arrow,
-      type: "button",
       disabled: page === 1,
       onClick: () => page > 1 && onChange(page - 1),
+      type: "button",
       children: /*#__PURE__*/jsx(ArrowIOSBackwardIcon, {})
-    }), totalPages <= maxVisible + 2 ? Array(totalPages).fill(0).map((_, index) => renderPageButton(index + 1)) : /*#__PURE__*/jsxs(Fragment, {
+    }), totalPages <= maxVisible + 2 ? Array.from({
+      length: totalPages
+    }, (_, index) => renderPageButton(index + 1)) : /*#__PURE__*/jsxs(Fragment, {
       children: [renderPageButton(1), page > 1 + halfVisible && /*#__PURE__*/jsx("span", {
         className: styles.trunc,
         children: /*#__PURE__*/jsx(MoreHorizIcon, {})
-      }), Array(maxVisible).fill(0).map((_, index) => {
+      }), Array.from({
+        length: maxVisible
+      }, (_, index) => {
         const pageNumber = page - halfVisible + index + 1;
-        return pageNumber > 1 && pageNumber < totalPages ? renderPageButton(pageNumber) : '';
+        return pageNumber > 1 && pageNumber < totalPages ? renderPageButton(pageNumber) : null;
       }), page < totalPages - halfVisible && /*#__PURE__*/jsx("span", {
         className: styles.trunc,
         children: /*#__PURE__*/jsx(MoreHorizIcon, {})
       }), renderPageButton(totalPages)]
     }), totalPages > 1 && /*#__PURE__*/jsx("button", {
+      "aria-label": nextLabel,
       className: styles.arrow,
-      type: "button",
       disabled: page === totalPages,
       onClick: () => page < totalPages && onChange(page + 1),
+      type: "button",
       children: /*#__PURE__*/jsx(ArrowIOSForwardIcon, {})
     })]
   });
-});
+}
 
 export { Pagination };

package/dist/esm/components/pagination/pagination.module.css.mjs

@@ -0,0 +1,3 @@
+var styles = {"pagination":"pagination-module_pagination__XjBXK","arrow":"pagination-module_arrow__q388S","item":"pagination-module_item__9Vttf","trunc":"pagination-module_trunc__neqoN"};
+
+export { styles as default };

package/dist/esm/components/popover/popover.d.mts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
+
+declare function PopoverArrow({ className, ...props }: ComponentProps<typeof Popover$1.Arrow>): react_jsx_runtime.JSX.Element;
+declare function PopoverContent({ className, side, sideOffset, align, alignOffset, arrowPadding, ...props }: ComponentProps<typeof Popover$1.Popup> & Pick<ComponentProps<typeof Popover$1.Positioner>, "side" | "sideOffset" | "align" | "alignOffset" | "arrowPadding">): react_jsx_runtime.JSX.Element;
+declare const Popover: typeof Popover$1.Root & {
+    displayName: "Popover";
+    Trigger: Popover$1.Trigger;
+    Content: typeof PopoverContent;
+    Arrow: typeof PopoverArrow;
+};
+
+export { Popover };