@yamada-ui/react 2.0.10-dev-20260301101758 → 2.1.0-dev-20260302125757

package/dist/cjs/components/native-accordion/use-native-accordion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-native-accordion.cjs","names":["createContext","getRootProps: PropGetter","mergeRefs","getItemProps: PropGetter<\"details\">","getButtonProps: PropGetter<\"summary\">","getPanelProps: PropGetter"],"sources":["../../../../src/components/native-accordion/use-native-accordion.ts"],"sourcesContent":["\"use client\"\n\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport { useCallback, useId } from \"react\"\nimport {\n  ariaAttr,\n  createContext,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n} from \"../../utils\"\n\ninterface NativeAccordionContext extends Pick<\n  UseNativeAccordionReturn,\n  \"name\"\n> {}\n\nconst [NativeAccordionContext, useNativeAccordionContext] =\n  createContext<NativeAccordionContext>({\n    name: \"NativeAccordionContext\",\n  })\n\nexport { NativeAccordionContext, useNativeAccordionContext }\n\nexport interface UseNativeAccordionProps extends HTMLProps {\n  /**\n   * If `true`, multiple accordion items can be expanded at once.\n   *\n   * @default false\n   */\n  multiple?: boolean\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n}\n\nexport const useNativeAccordion = ({\n  name,\n  multiple = false,\n  ...rest\n}: UseNativeAccordionProps = {}) => {\n  const generatedName = useId()\n\n  const getRootProps: PropGetter = ({ ref, ...props } = {}) => ({\n    ...props,\n    ...rest,\n    ref: mergeRefs(ref, rest.ref),\n  })\n\n  return {\n    name: multiple ? undefined : (name ?? generatedName),\n    getRootProps,\n  }\n}\n\nexport type UseNativeAccordionReturn = ReturnType<typeof useNativeAccordion>\n\nexport interface UseNativeAccordionItemProps extends HTMLProps<\"details\"> {\n  /**\n   * If `true`, the accordion item will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n}\n\nexport const useNativeAccordionItem = ({\n  disabled,\n  ...rest\n}: UseNativeAccordionItemProps) => {\n  const { name } = useNativeAccordionContext()\n\n  const getItemProps: PropGetter<\"details\"> = ({ ref, ...props } = {}) => ({\n    ref: mergeRefs(ref, rest.ref),\n    name: props.name ?? rest.name ?? name,\n    role: \"group\",\n    ...rest,\n    ...props,\n  })\n\n  const getButtonProps: PropGetter<\"summary\"> = useCallback(\n    (props = {}) => ({\n      \"aria-disabled\": ariaAttr(disabled),\n      \"data-disabled\": dataAttr(disabled),\n      ...props,\n      onClick: handlerAll(props.onClick, (ev) => {\n        if (!disabled) return\n\n        ev.preventDefault()\n      }),\n    }),\n    [disabled],\n  )\n\n  const getPanelProps: PropGetter = useCallback((props = {}) => props, [])\n\n  const getIconProps: PropGetter<\"svg\"> = useCallback(\n    (props = {}) => ({\n      \"aria-disabled\": ariaAttr(disabled),\n      \"aria-hidden\": true,\n      role: \"presentation\",\n      ...props,\n    }),\n    [disabled],\n  )\n\n  return {\n    disabled,\n    getButtonProps,\n    getIconProps,\n    getItemProps,\n    getPanelProps,\n  }\n}\n\nexport type UseNativeAccordionItemReturn = ReturnType<\n  typeof useNativeAccordionItem\n>\n"],"mappings":";;;;;;;;;AAiBA,MAAM,CAAC,wBAAwB,6BAC7BA,8BAAsC,EACpC,MAAM,0BACP,CAAC;AAiBJ,MAAa,sBAAsB,EACjC,MACA,WAAW,OACX,GAAG,SACwB,EAAE,KAAK;CAClC,MAAM,kCAAuB;CAE7B,MAAMC,gBAA4B,EAAE,KAAK,GAAG,UAAU,EAAE,MAAM;EAC5D,GAAG;EACH,GAAG;EACH,KAAKC,sBAAU,KAAK,KAAK,IAAI;EAC9B;AAED,QAAO;EACL,MAAM,WAAW,SAAa,QAAQ;EACtC;EACD;;AAcH,MAAa,0BAA0B,EACrC,UACA,GAAG,WAC8B;CACjC,MAAM,EAAE,SAAS,2BAA2B;CAE5C,MAAMC,gBAAuC,EAAE,KAAK,GAAG,UAAU,EAAE,MAAM;EACvE,KAAKD,sBAAU,KAAK,KAAK,IAAI;EAC7B,MAAM,MAAM,QAAQ,KAAK,QAAQ;EACjC,MAAM;EACN,GAAG;EACH,GAAG;EACJ;CAED,MAAME,yCACH,QAAQ,EAAE,MAAM;EACf,iEAA0B,SAAS;EACnC,iEAA0B,SAAS;EACnC,GAAG;EACH,2DAAoB,MAAM,UAAU,OAAO;AACzC,OAAI,CAAC,SAAU;AAEf,MAAG,gBAAgB;IACnB;EACH,GACD,CAAC,SAAS,CACX;CAED,MAAMC,wCAAyC,QAAQ,EAAE,KAAK,OAAO,EAAE,CAAC;AAYxE,QAAO;EACL;EACA;EACA,sCAZC,QAAQ,EAAE,MAAM;GACf,iEAA0B,SAAS;GACnC,eAAe;GACf,MAAM;GACN,GAAG;GACJ,GACD,CAAC,SAAS,CACX;EAMC;EACA;EACD"}

package/dist/cjs/components/native-popover/index.cjs

@@ -0,0 +1,23 @@
+const require_native_popover_style = require('./native-popover.style.cjs');
+const require_use_native_popover = require('./use-native-popover.cjs');
+const require_native_popover = require('./native-popover.cjs');
+const require_namespace = require('./namespace.cjs');
+
+Object.defineProperty(exports, 'NativePopover', {
+  enumerable: true,
+  get: function () {
+    return require_namespace.namespace_exports;
+  }
+});
+exports.NativePopoverAnchor = require_native_popover.NativePopoverAnchor;
+exports.NativePopoverBody = require_native_popover.NativePopoverBody;
+exports.NativePopoverCloseTrigger = require_native_popover.NativePopoverCloseTrigger;
+exports.NativePopoverContent = require_native_popover.NativePopoverContent;
+exports.NativePopoverFooter = require_native_popover.NativePopoverFooter;
+exports.NativePopoverHeader = require_native_popover.NativePopoverHeader;
+exports.NativePopoverPropsContext = require_native_popover.NativePopoverPropsContext;
+exports.NativePopoverRoot = require_native_popover.NativePopoverRoot;
+exports.NativePopoverTrigger = require_native_popover.NativePopoverTrigger;
+exports.nativePopoverStyle = require_native_popover_style.nativePopoverStyle;
+exports.useNativePopover = require_use_native_popover.useNativePopover;
+exports.useNativePopoverPropsContext = require_native_popover.useNativePopoverPropsContext;

package/dist/cjs/components/native-popover/namespace.cjs

@@ -0,0 +1,25 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_native_popover = require('./native-popover.cjs');
+
+//#region src/components/native-popover/namespace.ts
+var namespace_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+	Anchor: () => require_native_popover.NativePopoverAnchor,
+	Body: () => require_native_popover.NativePopoverBody,
+	CloseTrigger: () => require_native_popover.NativePopoverCloseTrigger,
+	Content: () => require_native_popover.NativePopoverContent,
+	Footer: () => require_native_popover.NativePopoverFooter,
+	Header: () => require_native_popover.NativePopoverHeader,
+	PropsContext: () => require_native_popover.NativePopoverPropsContext,
+	Root: () => require_native_popover.NativePopoverRoot,
+	Trigger: () => require_native_popover.NativePopoverTrigger,
+	usePropsContext: () => require_native_popover.useNativePopoverPropsContext
+});
+
+//#endregion
+Object.defineProperty(exports, 'namespace_exports', {
+  enumerable: true,
+  get: function () {
+    return namespace_exports;
+  }
+});
+//# sourceMappingURL=namespace.cjs.map

package/dist/cjs/components/native-popover/namespace.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"namespace.cjs","names":[],"sources":["../../../../src/components/native-popover/namespace.ts"],"sourcesContent":["export {\n  NativePopoverAnchor as Anchor,\n  NativePopoverBody as Body,\n  NativePopoverCloseTrigger as CloseTrigger,\n  NativePopoverContent as Content,\n  NativePopoverFooter as Footer,\n  NativePopoverHeader as Header,\n  NativePopoverPropsContext as PropsContext,\n  NativePopoverRoot as Root,\n  NativePopoverTrigger as Trigger,\n  useNativePopoverPropsContext as usePropsContext,\n} from \"./native-popover\"\nexport type {\n  NativePopoverAnchorProps as AnchorProps,\n  NativePopoverBodyProps as BodyProps,\n  NativePopoverCloseTriggerProps as CloseTriggerProps,\n  NativePopoverContentProps as ContentProps,\n  NativePopoverFooterProps as FooterProps,\n  NativePopoverHeaderProps as HeaderProps,\n  NativePopoverRootProps as RootProps,\n  NativePopoverTriggerProps as TriggerProps,\n} from \"./native-popover\"\n"],"mappings":""}

package/dist/cjs/components/native-popover/native-popover.cjs

@@ -0,0 +1,99 @@
+"use client";
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_factory = require('../../core/system/factory.cjs');
+const require_create_component = require('../../core/components/create-component.cjs');
+require('../../core/index.cjs');
+const require_native_popover_style = require('./native-popover.style.cjs');
+const require_use_native_popover = require('./use-native-popover.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/native-popover/native-popover.tsx
+const { ComponentContext, PropsContext: NativePopoverPropsContext, StyleContext, useComponentContext, usePropsContext: useNativePopoverPropsContext, withContext, useRootComponentProps } = require_create_component.createSlotComponent("native-popover", require_native_popover_style.nativePopoverStyle);
+/**
+* `NativePopover` is a component that floats around an element to display information using the native HTML Popover API.
+*
+* @see https://yamada-ui.com/docs/components/native-popover
+*/
+const NativePopoverRoot = (props) => {
+	const [styleContext, { children, ...rest }] = useRootComponentProps(props);
+	const { getAnchorProps, getBodyProps, getCloseTriggerProps, getContentProps, getFooterProps, getHeaderProps, getPositionerProps, getTriggerProps } = require_use_native_popover.useNativePopover(rest);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyleContext, {
+		value: styleContext,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
+			value: (0, react.useMemo)(() => ({
+				getAnchorProps,
+				getBodyProps,
+				getCloseTriggerProps,
+				getContentProps,
+				getFooterProps,
+				getHeaderProps,
+				getPositionerProps,
+				getTriggerProps
+			}), [
+				getAnchorProps,
+				getBodyProps,
+				getCloseTriggerProps,
+				getContentProps,
+				getFooterProps,
+				getHeaderProps,
+				getPositionerProps,
+				getTriggerProps
+			]),
+			children
+		})
+	});
+};
+const NativePopoverTrigger = withContext("button", "trigger")({ asChild: true }, (props) => {
+	const { getTriggerProps } = useComponentContext();
+	return getTriggerProps(props);
+});
+const NativePopoverAnchor = withContext("div", "anchor")({ asChild: true }, (props) => {
+	const { getAnchorProps } = useComponentContext();
+	return getAnchorProps(props);
+});
+const NativePopoverPositioner = withContext("div", "positioner")({ asChild: true }, (props) => {
+	const { getPositionerProps } = useComponentContext();
+	return getPositionerProps(props);
+});
+const NativePopoverCloseTrigger = withContext("button", {
+	name: "CloseTrigger",
+	slot: ["trigger", "close"]
+})({ asChild: true }, (props) => {
+	const { getCloseTriggerProps } = useComponentContext();
+	return getCloseTriggerProps(props);
+});
+const NativePopoverContent = withContext(({ children, ...rest }) => {
+	const { getContentProps } = useComponentContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NativePopoverPositioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
+		...getContentProps((0, require_utils_index.utils_exports.cast)(rest)),
+		children
+	}) });
+}, "content")({ suppressHydrationWarning: true });
+const NativePopoverHeader = withContext("div", "header")(void 0, (props) => {
+	const { getHeaderProps } = useComponentContext();
+	return getHeaderProps(props);
+});
+const NativePopoverBody = withContext("div", "body")(void 0, (props) => {
+	const { getBodyProps } = useComponentContext();
+	return getBodyProps(props);
+});
+const NativePopoverFooter = withContext("div", "footer")(void 0, (props) => {
+	const { getFooterProps } = useComponentContext();
+	return getFooterProps(props);
+});
+
+//#endregion
+exports.NativePopoverAnchor = NativePopoverAnchor;
+exports.NativePopoverBody = NativePopoverBody;
+exports.NativePopoverCloseTrigger = NativePopoverCloseTrigger;
+exports.NativePopoverContent = NativePopoverContent;
+exports.NativePopoverFooter = NativePopoverFooter;
+exports.NativePopoverHeader = NativePopoverHeader;
+exports.NativePopoverPropsContext = NativePopoverPropsContext;
+exports.NativePopoverRoot = NativePopoverRoot;
+exports.NativePopoverTrigger = NativePopoverTrigger;
+exports.useNativePopoverPropsContext = useNativePopoverPropsContext;
+//# sourceMappingURL=native-popover.cjs.map

package/dist/cjs/components/native-popover/native-popover.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-popover.cjs","names":["createSlotComponent","nativePopoverStyle","NativePopoverRoot: FC<NativePopoverRootProps>","useNativePopover","styled"],"sources":["../../../../src/components/native-popover/native-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { NativePopoverStyle } from \"./native-popover.style\"\nimport type {\n  UseNativePopoverProps,\n  UseNativePopoverReturn,\n} from \"./use-native-popover\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { cast } from \"../../utils\"\nimport { nativePopoverStyle } from \"./native-popover.style\"\nimport { useNativePopover } from \"./use-native-popover\"\n\ninterface ComponentContext extends Pick<\n  UseNativePopoverReturn,\n  | \"getAnchorProps\"\n  | \"getBodyProps\"\n  | \"getCloseTriggerProps\"\n  | \"getContentProps\"\n  | \"getFooterProps\"\n  | \"getHeaderProps\"\n  | \"getPositionerProps\"\n  | \"getTriggerProps\"\n> {}\n\nexport interface NativePopoverRootProps\n  extends\n    UseNativePopoverProps,\n    ThemeProps<NativePopoverStyle>,\n    PropsWithChildren {}\n\nconst {\n  ComponentContext,\n  PropsContext: NativePopoverPropsContext,\n  StyleContext,\n  useComponentContext,\n  usePropsContext: useNativePopoverPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<\n  NativePopoverRootProps,\n  NativePopoverStyle,\n  ComponentContext\n>(\"native-popover\", nativePopoverStyle)\n\nexport { NativePopoverPropsContext, useNativePopoverPropsContext }\n\n/**\n * `NativePopover` is a component that floats around an element to display information using the native HTML Popover API.\n *\n * @see https://yamada-ui.com/docs/components/native-popover\n */\nexport const NativePopoverRoot: FC<NativePopoverRootProps> = (props) => {\n  const [styleContext, { children, ...rest }] = useRootComponentProps(props)\n  const {\n    getAnchorProps,\n    getBodyProps,\n    getCloseTriggerProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n  } = useNativePopover(rest)\n  const componentContext = useMemo(\n    () => ({\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    }),\n    [\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    ],\n  )\n\n  return (\n    <StyleContext value={styleContext}>\n      <ComponentContext value={componentContext}>{children}</ComponentContext>\n    </StyleContext>\n  )\n}\n\nexport interface NativePopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const NativePopoverTrigger = withContext<\n  \"button\",\n  NativePopoverTriggerProps\n>(\"button\", \"trigger\")({ asChild: true }, (props) => {\n  const { getTriggerProps } = useComponentContext()\n\n  return getTriggerProps(props)\n})\n\nexport interface NativePopoverAnchorProps extends HTMLStyledProps {}\n\nexport const NativePopoverAnchor = withContext<\"div\", NativePopoverAnchorProps>(\n  \"div\",\n  \"anchor\",\n)({ asChild: true }, (props) => {\n  const { getAnchorProps } = useComponentContext()\n\n  return getAnchorProps(props)\n})\n\ninterface NativePopoverPositionerProps extends HTMLStyledProps {}\n\nconst NativePopoverPositioner = withContext<\n  \"div\",\n  NativePopoverPositionerProps\n>(\"div\", \"positioner\")({ asChild: true }, (props) => {\n  const { getPositionerProps } = useComponentContext()\n\n  return getPositionerProps(props)\n})\n\nexport interface NativePopoverCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const NativePopoverCloseTrigger = withContext<\n  \"button\",\n  NativePopoverCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n  { asChild: true },\n  (props) => {\n    const { getCloseTriggerProps } = useComponentContext()\n\n    return getCloseTriggerProps(props)\n  },\n)\n\nexport interface NativePopoverContentProps\n  extends HTMLStyledProps, PropsWithChildren {}\n\nexport const NativePopoverContent = withContext<\n  \"div\",\n  NativePopoverContentProps\n>(({ children, ...rest }) => {\n  const { getContentProps } = useComponentContext()\n\n  return (\n    <NativePopoverPositioner>\n      <styled.div {...getContentProps(cast<HTMLStyledProps>(rest))}>\n        {children}\n      </styled.div>\n    </NativePopoverPositioner>\n  )\n}, \"content\")({\n  suppressHydrationWarning: true,\n})\n\nexport interface NativePopoverHeaderProps extends HTMLStyledProps {}\n\nexport const NativePopoverHeader = withContext<\"div\", NativePopoverHeaderProps>(\n  \"div\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return getHeaderProps(props)\n})\n\nexport interface NativePopoverBodyProps extends HTMLStyledProps {}\n\nexport const NativePopoverBody = withContext<\"div\", NativePopoverBodyProps>(\n  \"div\",\n  \"body\",\n)(undefined, (props) => {\n  const { getBodyProps } = useComponentContext()\n\n  return getBodyProps(props)\n})\n\nexport interface NativePopoverFooterProps extends HTMLStyledProps {}\n\nexport const NativePopoverFooter = withContext<\"div\", NativePopoverFooterProps>(\n  \"div\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return getFooterProps(props)\n})\n"],"mappings":";;;;;;;;;;;;;AAiCA,MAAM,EACJ,kBACA,cAAc,2BACd,cACA,qBACA,iBAAiB,8BACjB,aACA,0BACEA,6CAIF,kBAAkBC,gDAAmB;;;;;;AASvC,MAAaC,qBAAiD,UAAU;CACtE,MAAM,CAAC,cAAc,EAAE,UAAU,GAAG,UAAU,sBAAsB,MAAM;CAC1E,MAAM,EACJ,gBACA,cACA,sBACA,iBACA,gBACA,gBACA,oBACA,oBACEC,4CAAiB,KAAK;AAwB1B,QACE,2CAAC;EAAa,OAAO;YACnB,2CAAC;GAAiB,iCAxBb;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD,GACD;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD,CACF;GAI+C;IAA4B;GAC3D;;AAMnB,MAAa,uBAAuB,YAGlC,UAAU,UAAU,CAAC,EAAE,SAAS,MAAM,GAAG,UAAU;CACnD,MAAM,EAAE,oBAAoB,qBAAqB;AAEjD,QAAO,gBAAgB,MAAM;EAC7B;AAIF,MAAa,sBAAsB,YACjC,OACA,SACD,CAAC,EAAE,SAAS,MAAM,GAAG,UAAU;CAC9B,MAAM,EAAE,mBAAmB,qBAAqB;AAEhD,QAAO,eAAe,MAAM;EAC5B;AAIF,MAAM,0BAA0B,YAG9B,OAAO,aAAa,CAAC,EAAE,SAAS,MAAM,GAAG,UAAU;CACnD,MAAM,EAAE,uBAAuB,qBAAqB;AAEpD,QAAO,mBAAmB,MAAM;EAChC;AAIF,MAAa,4BAA4B,YAGvC,UAAU;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,QAAQ;CAAE,CAAC,CAC/D,EAAE,SAAS,MAAM,GAChB,UAAU;CACT,MAAM,EAAE,yBAAyB,qBAAqB;AAEtD,QAAO,qBAAqB,MAAM;EAErC;AAKD,MAAa,uBAAuB,aAGjC,EAAE,UAAU,GAAG,WAAW;CAC3B,MAAM,EAAE,oBAAoB,qBAAqB;AAEjD,QACE,2CAAC,qCACC,2CAACC,uBAAO;EAAI,GAAI,4DAAsC,KAAK,CAAC;EACzD;GACU,GACW;GAE3B,UAAU,CAAC,EACZ,0BAA0B,MAC3B,CAAC;AAIF,MAAa,sBAAsB,YACjC,OACA,SACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,mBAAmB,qBAAqB;AAEhD,QAAO,eAAe,MAAM;EAC5B;AAIF,MAAa,oBAAoB,YAC/B,OACA,OACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,iBAAiB,qBAAqB;AAE9C,QAAO,aAAa,MAAM;EAC1B;AAIF,MAAa,sBAAsB,YACjC,OACA,SACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,mBAAmB,qBAAqB;AAEhD,QAAO,eAAe,MAAM;EAC5B"}

package/dist/cjs/components/native-popover/native-popover.style.cjs

@@ -0,0 +1,67 @@
+const require_config = require('../../core/system/config.cjs');
+require('../../core/index.cjs');
+
+//#region src/components/native-popover/native-popover.style.ts
+const nativePopoverStyle = require_config.defineComponentSlotStyle({
+	base: {
+		body: {
+			alignItems: "flex-start",
+			display: "flex",
+			flex: "1",
+			flexDirection: "column",
+			gap: "{gap}"
+		},
+		content: {
+			bg: "bg.float",
+			borderColor: "border.muted",
+			borderWidth: "1px",
+			boxShadow: "sm",
+			display: "flex",
+			flexDirection: "column",
+			focusVisibleRing: "none",
+			gap: "{gap}",
+			p: "{padding}",
+			rounded: "l2"
+		},
+		footer: {
+			alignItems: "center",
+			display: "flex",
+			gap: "{gap}",
+			justifyContent: "flex-start"
+		},
+		header: {
+			alignItems: "center",
+			display: "flex",
+			fontWeight: "semibold",
+			gap: "{gap}",
+			justifyContent: "flex-start"
+		}
+	},
+	sizes: {
+		xs: { content: {
+			"--gap": "spaces.1",
+			"--padding": "spaces.2",
+			fontSize: "xs"
+		} },
+		sm: { content: {
+			"--gap": "spaces.2",
+			"--padding": "spaces.3",
+			fontSize: "sm"
+		} },
+		md: { content: {
+			"--gap": "spaces.3",
+			"--padding": "spaces.4",
+			fontSize: "md"
+		} },
+		lg: { content: {
+			"--gap": "spaces.4",
+			"--padding": "spaces.5",
+			fontSize: "md"
+		} }
+	},
+	defaultProps: { size: "md" }
+});
+
+//#endregion
+exports.nativePopoverStyle = nativePopoverStyle;
+//# sourceMappingURL=native-popover.style.cjs.map

package/dist/cjs/components/native-popover/native-popover.style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-popover.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/native-popover/native-popover.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const nativePopoverStyle = defineComponentSlotStyle({\n  base: {\n    body: {\n      alignItems: \"flex-start\",\n      display: \"flex\",\n      flex: \"1\",\n      flexDirection: \"column\",\n      gap: \"{gap}\",\n    },\n    content: {\n      bg: \"bg.float\",\n      borderColor: \"border.muted\",\n      borderWidth: \"1px\",\n      boxShadow: \"sm\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      focusVisibleRing: \"none\",\n      gap: \"{gap}\",\n      p: \"{padding}\",\n      rounded: \"l2\",\n    },\n    footer: {\n      alignItems: \"center\",\n      display: \"flex\",\n      gap: \"{gap}\",\n      justifyContent: \"flex-start\",\n    },\n    header: {\n      alignItems: \"center\",\n      display: \"flex\",\n      fontWeight: \"semibold\",\n      gap: \"{gap}\",\n      justifyContent: \"flex-start\",\n    },\n  },\n\n  sizes: {\n    xs: {\n      content: {\n        \"--gap\": \"spaces.1\",\n        \"--padding\": \"spaces.2\",\n        fontSize: \"xs\",\n      },\n    },\n    sm: {\n      content: {\n        \"--gap\": \"spaces.2\",\n        \"--padding\": \"spaces.3\",\n        fontSize: \"sm\",\n      },\n    },\n    md: {\n      content: {\n        \"--gap\": \"spaces.3\",\n        \"--padding\": \"spaces.4\",\n        fontSize: \"md\",\n      },\n    },\n    lg: {\n      content: {\n        \"--gap\": \"spaces.4\",\n        \"--padding\": \"spaces.5\",\n        fontSize: \"md\",\n      },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n  },\n})\n\nexport type NativePopoverStyle = typeof nativePopoverStyle\n"],"mappings":";;;;AAEA,MAAa,qBAAqBA,wCAAyB;CACzD,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,SAAS;GACT,MAAM;GACN,eAAe;GACf,KAAK;GACN;EACD,SAAS;GACP,IAAI;GACJ,aAAa;GACb,aAAa;GACb,WAAW;GACX,SAAS;GACT,eAAe;GACf,kBAAkB;GAClB,KAAK;GACL,GAAG;GACH,SAAS;GACV;EACD,QAAQ;GACN,YAAY;GACZ,SAAS;GACT,KAAK;GACL,gBAAgB;GACjB;EACD,QAAQ;GACN,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,KAAK;GACL,gBAAgB;GACjB;EACF;CAED,OAAO;EACL,IAAI,EACF,SAAS;GACP,SAAS;GACT,aAAa;GACb,UAAU;GACX,EACF;EACD,IAAI,EACF,SAAS;GACP,SAAS;GACT,aAAa;GACb,UAAU;GACX,EACF;EACD,IAAI,EACF,SAAS;GACP,SAAS;GACT,aAAa;GACb,UAAU;GACX,EACF;EACD,IAAI,EACF,SAAS;GACP,SAAS;GACT,aAAa;GACb,UAAU;GACX,EACF;EACF;CAED,cAAc,EACZ,MAAM,MACP;CACF,CAAC"}

package/dist/cjs/components/native-popover/use-native-popover.cjs

@@ -0,0 +1,119 @@
+"use client";
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ref = require('../../utils/ref.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_environment_provider = require('../../core/system/environment-provider.cjs');
+require('../../core/index.cjs');
+const require_hooks_use_popper_index = require('../../hooks/use-popper/index.cjs');
+let react = require("react");
+
+//#region src/components/native-popover/use-native-popover.tsx
+const useNativePopover = ({ autoUpdate, disabled = false, elements, flip, gutter, matchWidth, middleware, offset, placement = "end", platform, popover = "auto", popoverTarget, popoverTargetAction = "toggle", preventOverflow, strategy, transform, updateRef, whileElementsMounted } = {}) => {
+	const { getDocument } = require_environment_provider.useEnvironment();
+	const headerId = (0, react.useId)();
+	const bodyId = (0, react.useId)();
+	const generatedContentId = (0, react.useId)();
+	const contentId = popoverTarget ?? generatedContentId;
+	const anchorRef = (0, react.useRef)(null);
+	const triggerRef = (0, react.useRef)(null);
+	const contentRef = (0, react.useRef)(null);
+	const { refs, update, getPopperProps } = require_hooks_use_popper_index.usePopper({
+		autoUpdate,
+		elements,
+		flip,
+		gutter,
+		matchWidth,
+		middleware,
+		offset,
+		placement,
+		platform,
+		preventOverflow,
+		strategy,
+		transform,
+		whileElementsMounted
+	});
+	require_ref.assignRef(updateRef, update);
+	const onClick = (0, react.useCallback)((ev) => {
+		if (!disabled) return;
+		ev.preventDefault();
+		ev.stopPropagation();
+	}, [disabled]);
+	const getTriggerProps = (0, react.useCallback)(({ ref, ...props } = {}) => {
+		return {
+			type: "button",
+			"aria-controls": contentId,
+			"aria-disabled": (0, require_utils_index.utils_exports.ariaAttr)(disabled),
+			"aria-haspopup": "dialog",
+			popoverTarget: contentId,
+			popoverTargetAction,
+			role: "button",
+			...props,
+			ref: require_ref.mergeRefs(ref, triggerRef, (node) => {
+				if (anchorRef.current == null) refs.setReference(node);
+			}),
+			onClick: (0, require_utils_index.utils_exports.handlerAll)(props.onClick, onClick)
+		};
+	}, [
+		contentId,
+		disabled,
+		onClick,
+		popoverTargetAction,
+		refs
+	]);
+	const getAnchorProps = (0, react.useCallback)(({ ref, ...props } = {}) => ({
+		...props,
+		ref: require_ref.mergeRefs(ref, anchorRef, refs.setReference)
+	}), [refs.setReference]);
+	const getPositionerProps = (0, react.useCallback)(getPopperProps, [getPopperProps]);
+	const getContentProps = (0, react.useCallback)(({ ref, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby, ...props } = {}) => {
+		const hasHeader = !!getDocument()?.getElementById(headerId);
+		const hasBody = !!getDocument()?.getElementById(bodyId);
+		return {
+			id: contentId,
+			"aria-describedby": (0, require_utils_index.utils_exports.cx)(ariaDescribedby, hasBody ? bodyId : void 0),
+			"aria-labelledby": (0, require_utils_index.utils_exports.cx)(ariaLabelledby, hasHeader ? headerId : void 0),
+			"data-popup": (0, require_utils_index.utils_exports.dataAttr)(true),
+			popover: popover === true ? "" : popover,
+			role: "dialog",
+			tabIndex: -1,
+			...props,
+			ref: require_ref.mergeRefs(ref, contentRef)
+		};
+	}, [
+		getDocument,
+		headerId,
+		bodyId,
+		contentId,
+		popover
+	]);
+	const getHeaderProps = (0, react.useCallback)((props) => ({
+		id: headerId,
+		...props
+	}), [headerId]);
+	const getBodyProps = (0, react.useCallback)((props) => ({
+		id: bodyId,
+		...props
+	}), [bodyId]);
+	const getFooterProps = (0, react.useCallback)((props) => ({ ...props }), []);
+	return {
+		getAnchorProps,
+		getBodyProps,
+		getCloseTriggerProps: (0, react.useCallback)((props = {}) => {
+			return {
+				popoverTarget: contentId,
+				popoverTargetAction: "hide",
+				...props
+			};
+		}, [contentId]),
+		getContentProps,
+		getFooterProps,
+		getHeaderProps,
+		getPositionerProps,
+		getTriggerProps
+	};
+};
+
+//#endregion
+exports.useNativePopover = useNativePopover;
+//# sourceMappingURL=use-native-popover.cjs.map

package/dist/cjs/components/native-popover/use-native-popover.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-native-popover.cjs","names":["useEnvironment","usePopper","getTriggerProps: PropGetter<\"button\">","mergeRefs","getAnchorProps: PropGetter","getPositionerProps: PropGetter","getContentProps: PropGetter","getHeaderProps: PropGetter","getBodyProps: PropGetter","getFooterProps: PropGetter"],"sources":["../../../../src/components/native-popover/use-native-popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { MouseEvent, RefObject } from \"react\"\nimport type { Direction, PropGetter } from \"../../core\"\nimport type { UsePopperProps } from \"../../hooks/use-popper\"\nimport { useCallback, useId, useRef } from \"react\"\nimport { useEnvironment } from \"../../core\"\nimport { usePopper } from \"../../hooks/use-popper\"\nimport {\n  ariaAttr,\n  assignRef,\n  cx,\n  dataAttr,\n  handlerAll,\n  mergeRefs,\n} from \"../../utils\"\n\nexport interface UseNativePopoverProps extends UsePopperProps<\"button\"> {\n  /**\n   * If `true`, the popover will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end'\n   */\n  placement?: Direction\n  /**\n   * The mode of the popover.\n   *\n   * @default 'auto'\n   */\n  popover?: \"\" | \"auto\" | \"hint\" | \"manual\" | true\n  /**\n   * The target element ID for the popover trigger.\n   * If not provided, a generated ID will be used.\n   */\n  popoverTarget?: string\n  /**\n   * The action for the popover target.\n   *\n   * @default 'toggle'\n   */\n  popoverTargetAction?: \"hide\" | \"show\" | \"toggle\"\n  /**\n   * Update the position of the floating element, re-rendering the component if required.\n   */\n  updateRef?: RefObject<() => void>\n}\n\nexport const useNativePopover = ({\n  autoUpdate,\n  disabled = false,\n  elements,\n  flip,\n  gutter,\n  matchWidth,\n  middleware,\n  offset,\n  placement = \"end\",\n  platform,\n  popover = \"auto\",\n  popoverTarget,\n  popoverTargetAction = \"toggle\",\n  preventOverflow,\n  strategy,\n  transform,\n  updateRef,\n  whileElementsMounted,\n}: UseNativePopoverProps = {}) => {\n  const { getDocument } = useEnvironment()\n  const headerId = useId()\n  const bodyId = useId()\n  const generatedContentId = useId()\n  const contentId = popoverTarget ?? generatedContentId\n  const anchorRef = useRef<HTMLElement>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n  const contentRef = useRef<HTMLDivElement>(null)\n  const { refs, update, getPopperProps } = usePopper<\"button\">({\n    autoUpdate,\n    elements,\n    flip,\n    gutter,\n    matchWidth,\n    middleware,\n    offset,\n    placement,\n    platform,\n    preventOverflow,\n    strategy,\n    transform,\n    whileElementsMounted,\n  })\n\n  assignRef(updateRef, update)\n\n  const onClick = useCallback(\n    (ev: MouseEvent<HTMLButtonElement>) => {\n      if (!disabled) return\n\n      ev.preventDefault()\n      ev.stopPropagation()\n    },\n    [disabled],\n  )\n\n  const getTriggerProps: PropGetter<\"button\"> = useCallback(\n    ({ ref, ...props } = {}) => {\n      return {\n        type: \"button\",\n        \"aria-controls\": contentId,\n        \"aria-disabled\": ariaAttr(disabled),\n        \"aria-haspopup\": \"dialog\",\n        popoverTarget: contentId,\n        popoverTargetAction,\n        role: \"button\",\n        ...props,\n        ref: mergeRefs(ref, triggerRef, (node) => {\n          if (anchorRef.current == null) refs.setReference(node)\n        }),\n        onClick: handlerAll(props.onClick, onClick),\n      }\n    },\n    [contentId, disabled, onClick, popoverTargetAction, refs],\n  )\n\n  const getAnchorProps: PropGetter = useCallback(\n    ({ ref, ...props } = {}) => ({\n      ...props,\n      ref: mergeRefs(ref, anchorRef, refs.setReference),\n    }),\n    [refs.setReference],\n  )\n\n  const getPositionerProps: PropGetter = useCallback(getPopperProps, [\n    getPopperProps,\n  ])\n\n  const getContentProps: PropGetter = useCallback(\n    ({\n      ref,\n      \"aria-describedby\": ariaDescribedby,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    } = {}) => {\n      const hasHeader = !!getDocument()?.getElementById(headerId)\n      const hasBody = !!getDocument()?.getElementById(bodyId)\n\n      return {\n        id: contentId,\n        \"aria-describedby\": cx(ariaDescribedby, hasBody ? bodyId : undefined),\n        \"aria-labelledby\": cx(ariaLabelledby, hasHeader ? headerId : undefined),\n        \"data-popup\": dataAttr(true),\n        popover: popover === true ? \"\" : popover,\n        role: \"dialog\",\n        tabIndex: -1,\n        ...props,\n        ref: mergeRefs(ref, contentRef),\n      }\n    },\n    [getDocument, headerId, bodyId, contentId, popover],\n  )\n\n  const getHeaderProps: PropGetter = useCallback(\n    (props) => ({ id: headerId, ...props }),\n    [headerId],\n  )\n\n  const getBodyProps: PropGetter = useCallback(\n    (props) => ({ id: bodyId, ...props }),\n    [bodyId],\n  )\n\n  const getFooterProps: PropGetter = useCallback((props) => ({ ...props }), [])\n\n  const getCloseTriggerProps: PropGetter<\"button\"> = useCallback(\n    (props = {}) => {\n      return {\n        popoverTarget: contentId,\n        popoverTargetAction: \"hide\",\n        ...props,\n      }\n    },\n    [contentId],\n  )\n\n  return {\n    getAnchorProps,\n    getBodyProps,\n    getCloseTriggerProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n  }\n}\n\nexport type UseNativePopoverReturn = ReturnType<typeof useNativePopover>\n"],"mappings":";;;;;;;;;;;AAqDA,MAAa,oBAAoB,EAC/B,YACA,WAAW,OACX,UACA,MACA,QACA,YACA,YACA,QACA,YAAY,OACZ,UACA,UAAU,QACV,eACA,sBAAsB,UACtB,iBACA,UACA,WACA,WACA,yBACyB,EAAE,KAAK;CAChC,MAAM,EAAE,gBAAgBA,6CAAgB;CACxC,MAAM,6BAAkB;CACxB,MAAM,2BAAgB;CACtB,MAAM,uCAA4B;CAClC,MAAM,YAAY,iBAAiB;CACnC,MAAM,8BAAgC,KAAK;CAC3C,MAAM,+BAAuC,KAAK;CAClD,MAAM,+BAAoC,KAAK;CAC/C,MAAM,EAAE,MAAM,QAAQ,mBAAmBC,yCAAoB;EAC3D;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,uBAAU,WAAW,OAAO;CAE5B,MAAM,kCACH,OAAsC;AACrC,MAAI,CAAC,SAAU;AAEf,KAAG,gBAAgB;AACnB,KAAG,iBAAiB;IAEtB,CAAC,SAAS,CACX;CAED,MAAMC,0CACH,EAAE,KAAK,GAAG,UAAU,EAAE,KAAK;AAC1B,SAAO;GACL,MAAM;GACN,iBAAiB;GACjB,iEAA0B,SAAS;GACnC,iBAAiB;GACjB,eAAe;GACf;GACA,MAAM;GACN,GAAG;GACH,KAAKC,sBAAU,KAAK,aAAa,SAAS;AACxC,QAAI,UAAU,WAAW,KAAM,MAAK,aAAa,KAAK;KACtD;GACF,2DAAoB,MAAM,SAAS,QAAQ;GAC5C;IAEH;EAAC;EAAW;EAAU;EAAS;EAAqB;EAAK,CAC1D;CAED,MAAMC,yCACH,EAAE,KAAK,GAAG,UAAU,EAAE,MAAM;EAC3B,GAAG;EACH,KAAKD,sBAAU,KAAK,WAAW,KAAK,aAAa;EAClD,GACD,CAAC,KAAK,aAAa,CACpB;CAED,MAAME,4CAA6C,gBAAgB,CACjE,eACD,CAAC;CAEF,MAAMC,0CACH,EACC,KACA,oBAAoB,iBACpB,mBAAmB,gBACnB,GAAG,UACD,EAAE,KAAK;EACT,MAAM,YAAY,CAAC,CAAC,aAAa,EAAE,eAAe,SAAS;EAC3D,MAAM,UAAU,CAAC,CAAC,aAAa,EAAE,eAAe,OAAO;AAEvD,SAAO;GACL,IAAI;GACJ,8DAAuB,iBAAiB,UAAU,SAAS,OAAU;GACrE,6DAAsB,gBAAgB,YAAY,WAAW,OAAU;GACvE,8DAAuB,KAAK;GAC5B,SAAS,YAAY,OAAO,KAAK;GACjC,MAAM;GACN,UAAU;GACV,GAAG;GACH,KAAKH,sBAAU,KAAK,WAAW;GAChC;IAEH;EAAC;EAAa;EAAU;EAAQ;EAAW;EAAQ,CACpD;CAED,MAAMI,yCACH,WAAW;EAAE,IAAI;EAAU,GAAG;EAAO,GACtC,CAAC,SAAS,CACX;CAED,MAAMC,uCACH,WAAW;EAAE,IAAI;EAAQ,GAAG;EAAO,GACpC,CAAC,OAAO,CACT;CAED,MAAMC,yCAA0C,WAAW,EAAE,GAAG,OAAO,GAAG,EAAE,CAAC;AAa7E,QAAO;EACL;EACA;EACA,8CAbC,QAAQ,EAAE,KAAK;AACd,UAAO;IACL,eAAe;IACf,qBAAqB;IACrB,GAAG;IACJ;KAEH,CAAC,UAAU,CACZ;EAMC;EACA;EACA;EACA;EACA;EACD"}

package/dist/cjs/components/native-select/native-select.cjs

@@ -5,11 +5,11 @@ const require_create_component = require('../../core/components/create-component
 require('../../core/index.cjs');
 const require_chevron_down_icon = require('../icon/icons/chevron-down-icon.cjs');
 require('../icon/index.cjs');
+const require_use_group = require('../group/use-group.cjs');
+require('../group/index.cjs');
 const require_use_input_border = require('../input/use-input-border.cjs');
 const require_input = require('../input/input.cjs');
 const require_input_element = require('../input/input-element.cjs');
-const require_use_group = require('../group/use-group.cjs');
-require('../group/index.cjs');
 const require_input_group = require('../input/input-group.cjs');
 require('../input/index.cjs');
 const require_native_select_style = require('./native-select.style.cjs');

package/dist/cjs/components/number-input/number-input.cjs

@@ -6,10 +6,10 @@ require('../../core/index.cjs');
 const require_chevron_down_icon = require('../icon/icons/chevron-down-icon.cjs');
 const require_chevron_up_icon = require('../icon/icons/chevron-up-icon.cjs');
 require('../icon/index.cjs');
-const require_input = require('../input/input.cjs');
-const require_input_element = require('../input/input-element.cjs');
 const require_use_group = require('../group/use-group.cjs');
 require('../group/index.cjs');
+const require_input = require('../input/input.cjs');
+const require_input_element = require('../input/input-element.cjs');
 const require_input_group = require('../input/input-group.cjs');
 require('../input/index.cjs');
 const require_number_input_style = require('./number-input.style.cjs');

package/dist/cjs/components/number-input/number-input.style.cjs

@@ -1,9 +1,9 @@
 const require_config = require('../../core/system/config.cjs');
 require('../../core/index.cjs');
-const require_input_style = require('../input/input.style.cjs');
-require('../input/index.cjs');
 const require_button_style = require('../button/button.style.cjs');
 require('../button/index.cjs');
+const require_input_style = require('../input/input.style.cjs');
+require('../input/index.cjs');
 
 //#region src/components/number-input/number-input.style.ts
 const numberInputStyle = require_config.defineComponentSlotStyle({

package/dist/cjs/components/password-input/password-input.cjs

@@ -6,10 +6,10 @@ require('../../core/index.cjs');
 const require_eye_icon = require('../icon/icons/eye-icon.cjs');
 const require_eye_off_icon = require('../icon/icons/eye-off-icon.cjs');
 require('../icon/index.cjs');
-const require_input = require('../input/input.cjs');
-const require_input_element = require('../input/input-element.cjs');
 const require_use_group = require('../group/use-group.cjs');
 require('../group/index.cjs');
+const require_input = require('../input/input.cjs');
+const require_input_element = require('../input/input-element.cjs');
 const require_input_group = require('../input/input-group.cjs');
 require('../input/index.cjs');
 const require_password_input_style = require('./password-input.style.cjs');

package/dist/cjs/components/password-input/password-input.style.cjs

@@ -1,9 +1,9 @@
 const require_config = require('../../core/system/config.cjs');
 require('../../core/index.cjs');
-const require_input_style = require('../input/input.style.cjs');
-require('../input/index.cjs');
 const require_button_style = require('../button/button.style.cjs');
 require('../button/index.cjs');
+const require_input_style = require('../input/input.style.cjs');
+require('../input/index.cjs');
 
 //#region src/components/password-input/password-input.style.ts
 const passwordInputStyle = require_config.defineComponentSlotStyle({

package/dist/cjs/components/pin-input/pin-input.cjs

@@ -6,11 +6,11 @@ const require_ref = require('../../utils/ref.cjs');
 require('../../utils/index.cjs');
 const require_create_component = require('../../core/components/create-component.cjs');
 require('../../core/index.cjs');
+const require_group = require('../group/group.cjs');
+require('../group/index.cjs');
 const require_use_field_props = require('../field/use-field-props.cjs');
 require('../field/index.cjs');
 const require_input = require('../input/input.cjs');
-const require_group = require('../group/group.cjs');
-require('../group/index.cjs');
 require('../input/index.cjs');
 const require_pin_input_style = require('./pin-input.style.cjs');
 const require_use_pin_input = require('./use-pin-input.cjs');

package/dist/cjs/components/popover/index.cjs

@@ -11,6 +11,7 @@ Object.defineProperty(exports, 'Popover', {
 });
 exports.PopoverAnchor = require_popover.PopoverAnchor;
 exports.PopoverBody = require_popover.PopoverBody;
+exports.PopoverCloseTrigger = require_popover.PopoverCloseTrigger;
 exports.PopoverContent = require_popover.PopoverContent;
 exports.PopoverFooter = require_popover.PopoverFooter;
 exports.PopoverHeader = require_popover.PopoverHeader;

package/dist/cjs/components/popover/namespace.cjs

@@ -5,6 +5,7 @@ const require_popover = require('./popover.cjs');
 var namespace_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
 	Anchor: () => require_popover.PopoverAnchor,
 	Body: () => require_popover.PopoverBody,
+	CloseTrigger: () => require_popover.PopoverCloseTrigger,
 	Content: () => require_popover.PopoverContent,
 	Footer: () => require_popover.PopoverFooter,
 	Header: () => require_popover.PopoverHeader,

package/dist/cjs/components/popover/namespace.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"namespace.cjs","names":[],"sources":["../../../../src/components/popover/namespace.ts"],"sourcesContent":["export {\n  PopoverAnchor as Anchor,\n  PopoverBody as Body,\n  PopoverContent as Content,\n  PopoverFooter as Footer,\n  PopoverHeader as Header,\n  PopoverPropsContext as PropsContext,\n  PopoverRoot as Root,\n  PopoverTrigger as Trigger,\n  usePopoverPropsContext as usePropsContext,\n} from \"./popover\"\nexport type {\n  PopoverAnchorProps as AnchorProps,\n  PopoverBodyProps as BodyProps,\n  PopoverContentProps as ContentProps,\n  PopoverFooterProps as FooterProps,\n  PopoverHeaderProps as HeaderProps,\n  PopoverRootProps as RootProps,\n  PopoverTriggerProps as TriggerProps,\n} from \"./popover\"\n"],"mappings":""}
+{"version":3,"file":"namespace.cjs","names":[],"sources":["../../../../src/components/popover/namespace.ts"],"sourcesContent":["export {\n  PopoverAnchor as Anchor,\n  PopoverBody as Body,\n  PopoverCloseTrigger as CloseTrigger,\n  PopoverContent as Content,\n  PopoverFooter as Footer,\n  PopoverHeader as Header,\n  PopoverPropsContext as PropsContext,\n  PopoverRoot as Root,\n  PopoverTrigger as Trigger,\n  usePopoverPropsContext as usePropsContext,\n} from \"./popover\"\nexport type {\n  PopoverAnchorProps as AnchorProps,\n  PopoverBodyProps as BodyProps,\n  PopoverCloseTriggerProps as CloseTriggerProps,\n  PopoverContentProps as ContentProps,\n  PopoverFooterProps as FooterProps,\n  PopoverHeaderProps as HeaderProps,\n  PopoverRootProps as RootProps,\n  PopoverTriggerProps as TriggerProps,\n} from \"./popover\"\n"],"mappings":""}

package/dist/cjs/components/popover/popover.cjs

@@ -81,8 +81,8 @@ const { ComponentContext, PropsContext: PopoverPropsContext, StyleContext, useCo
 * @see https://yamada-ui.com/docs/components/popover
 */
 const PopoverRoot = (props) => {
-	const [styleContext, { animationScheme = "scale", children, duration = .1, withCloseButton = true, ...rest }] = useRootComponentProps(props);
-	const { open, getAnchorProps, getBodyProps, getContentProps, getFooterProps, getHeaderProps, getPositionerProps, getTriggerProps, onClose } = require_use_popover.usePopover(rest);
+	const [styleContext, { animationScheme = "scale", children, duration = .1, ...rest }] = useRootComponentProps(props);
+	const { open, getAnchorProps, getBodyProps, getCloseTriggerProps, getContentProps, getFooterProps, getHeaderProps, getPositionerProps, getTriggerProps, onClose } = require_use_popover.usePopover(rest);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyleContext, {
 		value: styleContext,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
@@ -90,21 +90,21 @@ const PopoverRoot = (props) => {
 				animationScheme,
 				duration,
 				open,
-				withCloseButton,
 				getAnchorProps,
 				getBodyProps,
+				getCloseTriggerProps,
 				getContentProps,
 				getFooterProps,
 				getHeaderProps,
 				getPositionerProps,
 				getTriggerProps
 			}), [
-				withCloseButton,
 				open,
 				animationScheme,
 				duration,
 				getAnchorProps,
 				getBodyProps,
+				getCloseTriggerProps,
 				getContentProps,
 				getFooterProps,
 				getHeaderProps,
@@ -122,6 +122,13 @@ const PopoverTrigger = withContext("button", "trigger")({ asChild: true }, (prop
 	const { getTriggerProps } = useComponentContext();
 	return getTriggerProps(props);
 });
+const PopoverCloseTrigger = withContext("button", {
+	name: "CloseTrigger",
+	slot: ["trigger", "close"]
+})({ asChild: true }, (props) => {
+	const { getCloseTriggerProps } = useComponentContext();
+	return getCloseTriggerProps(props);
+});
 const PopoverAnchor = withContext("div", "anchor")({ asChild: true }, (props) => {
 	const { getAnchorProps } = useComponentContext();
 	return getAnchorProps(props);
@@ -156,6 +163,7 @@ const PopoverFooter = withContext("div", "footer")(void 0, (props) => {
 //#endregion
 exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverBody = PopoverBody;
+exports.PopoverCloseTrigger = PopoverCloseTrigger;
 exports.PopoverContent = PopoverContent;
 exports.PopoverFooter = PopoverFooter;
 exports.PopoverHeader = PopoverHeader;

package/dist/cjs/components/popover/popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover.cjs","names":["fadeScaleVariants","slideFadeVariants","createSlotComponent","popoverStyle","PopoverRoot: FC<PopoverRootProps>","usePopover","AnimatePresence","Portal","motion"],"sources":["../../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type {\n  HTMLProps,\n  HTMLStyledProps,\n  SimplePlacement,\n  ThemeProps,\n} from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { PopoverStyle } from \"./popover.style\"\nimport type { UsePopoverProps, UsePopoverReturn } from \"./use-popover\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { cast, runIfFn } from \"../../utils\"\nimport { fadeScaleVariants } from \"../fade-scale\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { slideFadeVariants } from \"../slide-fade\"\nimport { popoverStyle } from \"./popover.style\"\nimport { usePopover } from \"./use-popover\"\n\nexport interface PopupAnimationProps {\n  /**\n   * The animation of the element.\n   *\n   * @default 'scale'\n   */\n  animationScheme?: \"none\" | \"scale\" | SimplePlacement\n  /**\n   * The animation duration.\n   *\n   * @default 0.2\n   */\n  duration?: MotionTransitionProps[\"duration\"]\n}\n\nexport const getPopupAnimationProps = (\n  animationScheme: PopupAnimationProps[\"animationScheme\"] = \"scale\",\n  duration?: PopupAnimationProps[\"duration\"],\n) => {\n  const sharedProps = { animate: \"enter\", exit: \"exit\", initial: \"exit\" }\n\n  switch (animationScheme) {\n    case \"scale\":\n      return {\n        ...sharedProps,\n        custom: { duration, reverse: true, scale: 0.95 },\n        variants: fadeScaleVariants,\n      }\n    case \"block-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"block-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    default:\n      return {}\n  }\n}\n\ninterface ComponentContext\n  extends\n    Pick<\n      UsePopoverReturn,\n      | \"getAnchorProps\"\n      | \"getBodyProps\"\n      | \"getContentProps\"\n      | \"getFooterProps\"\n      | \"getHeaderProps\"\n      | \"getPositionerProps\"\n      | \"getTriggerProps\"\n      | \"open\"\n    >,\n    PopupAnimationProps,\n    Pick<PopoverRootProps, \"withCloseButton\"> {}\n\nexport interface PopoverRootProps\n  extends UsePopoverProps, PopupAnimationProps, ThemeProps<PopoverStyle> {\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNodeOrFunction<{\n    open: boolean\n    onClose: () => void\n  }>\n  /**\n   * The animation duration.\n   *\n   * @default 0.2\n   */\n  duration?: PopupAnimationProps[\"duration\"]\n  /**\n   * If `true`, display the popover close button.\n   *\n   * @default true\n   */\n  withCloseButton?: boolean\n}\n\nconst {\n  ComponentContext,\n  PropsContext: PopoverPropsContext,\n  StyleContext,\n  useComponentContext,\n  usePropsContext: usePopoverPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<PopoverRootProps, PopoverStyle, ComponentContext>(\n  \"popover\",\n  popoverStyle,\n)\n\nexport { PopoverPropsContext, usePopoverPropsContext }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see https://yamada-ui.com/docs/components/popover\n */\nexport const PopoverRoot: FC<PopoverRootProps> = (props) => {\n  const [\n    styleContext,\n    {\n      animationScheme = \"scale\",\n      children,\n      duration = 0.1,\n      withCloseButton = true,\n      ...rest\n    },\n  ] = useRootComponentProps(props)\n  const {\n    open,\n    getAnchorProps,\n    getBodyProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n    onClose,\n  } = usePopover(rest)\n  const componentContext = useMemo(\n    () => ({\n      animationScheme,\n      duration,\n      open,\n      withCloseButton,\n      getAnchorProps,\n      getBodyProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    }),\n    [\n      withCloseButton,\n      open,\n      animationScheme,\n      duration,\n      getAnchorProps,\n      getBodyProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    ],\n  )\n\n  return (\n    <StyleContext value={styleContext}>\n      <ComponentContext value={componentContext}>\n        {runIfFn(children, { open, onClose })}\n      </ComponentContext>\n    </StyleContext>\n  )\n}\n\nexport interface PopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverTrigger = withContext<\"button\", PopoverTriggerProps>(\n  \"button\",\n  \"trigger\",\n)({ asChild: true }, (props) => {\n  const { getTriggerProps } = useComponentContext()\n\n  return getTriggerProps(props)\n})\n\nexport interface PopoverAnchorProps extends HTMLStyledProps {}\n\nexport const PopoverAnchor = withContext<\"div\", PopoverAnchorProps>(\n  \"div\",\n  \"anchor\",\n)({ asChild: true }, (props) => {\n  const { getAnchorProps } = useComponentContext()\n\n  return getAnchorProps(props)\n})\n\ninterface PopoverPositionerProps extends HTMLStyledProps {}\n\nconst PopoverPositioner = withContext<\"div\", PopoverPositionerProps>(\n  \"div\",\n  \"positioner\",\n)(undefined, (props) => {\n  const { getPositionerProps } = useComponentContext()\n\n  return getPositionerProps(props)\n})\n\nexport interface PopoverContentProps\n  extends Omit<HTMLMotionProps, \"children\">, PropsWithChildren {\n  /**\n   * Props for portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n}\n\nexport const PopoverContent = withContext<\"div\", PopoverContentProps>(\n  ({ portalProps, ...rest }) => {\n    const { animationScheme, duration, open, getContentProps } =\n      useComponentContext()\n\n    return (\n      <AnimatePresence>\n        {open ? (\n          <Portal {...portalProps}>\n            <PopoverPositioner>\n              <motion.div\n                {...getPopupAnimationProps(animationScheme, duration)}\n                {...cast<HTMLMotionProps>(\n                  getContentProps(cast<HTMLProps>(rest)),\n                )}\n              />\n            </PopoverPositioner>\n          </Portal>\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n  \"content\",\n)()\n\nexport interface PopoverHeaderProps extends HTMLStyledProps {}\n\nexport const PopoverHeader = withContext<\"div\", PopoverHeaderProps>(\n  \"div\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return getHeaderProps(props)\n})\n\nexport interface PopoverBodyProps extends HTMLStyledProps {}\n\nexport const PopoverBody = withContext<\"div\", PopoverBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return getBodyProps(props)\n  },\n)\n\nexport interface PopoverFooterProps extends HTMLStyledProps {}\n\nexport const PopoverFooter = withContext<\"div\", PopoverFooterProps>(\n  \"div\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return getFooterProps(props)\n})\n"],"mappings":"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"}
+{"version":3,"file":"popover.cjs","names":["fadeScaleVariants","slideFadeVariants","createSlotComponent","popoverStyle","PopoverRoot: FC<PopoverRootProps>","usePopover","AnimatePresence","Portal","motion"],"sources":["../../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type {\n  HTMLProps,\n  HTMLStyledProps,\n  SimplePlacement,\n  ThemeProps,\n} from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { PopoverStyle } from \"./popover.style\"\nimport type { UsePopoverProps, UsePopoverReturn } from \"./use-popover\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { cast, runIfFn } from \"../../utils\"\nimport { fadeScaleVariants } from \"../fade-scale\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { slideFadeVariants } from \"../slide-fade\"\nimport { popoverStyle } from \"./popover.style\"\nimport { usePopover } from \"./use-popover\"\n\nexport interface PopupAnimationProps {\n  /**\n   * The animation of the element.\n   *\n   * @default 'scale'\n   */\n  animationScheme?: \"none\" | \"scale\" | SimplePlacement\n  /**\n   * The animation duration.\n   *\n   * @default 0.2\n   */\n  duration?: MotionTransitionProps[\"duration\"]\n}\n\nexport const getPopupAnimationProps = (\n  animationScheme: PopupAnimationProps[\"animationScheme\"] = \"scale\",\n  duration?: PopupAnimationProps[\"duration\"],\n) => {\n  const sharedProps = { animate: \"enter\", exit: \"exit\", initial: \"exit\" }\n\n  switch (animationScheme) {\n    case \"scale\":\n      return {\n        ...sharedProps,\n        custom: { duration, reverse: true, scale: 0.95 },\n        variants: fadeScaleVariants,\n      }\n    case \"block-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"block-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    default:\n      return {}\n  }\n}\n\ninterface ComponentContext\n  extends\n    Pick<\n      UsePopoverReturn,\n      | \"getAnchorProps\"\n      | \"getBodyProps\"\n      | \"getCloseTriggerProps\"\n      | \"getContentProps\"\n      | \"getFooterProps\"\n      | \"getHeaderProps\"\n      | \"getPositionerProps\"\n      | \"getTriggerProps\"\n      | \"open\"\n    >,\n    PopupAnimationProps {}\n\nexport interface PopoverRootProps\n  extends UsePopoverProps, PopupAnimationProps, ThemeProps<PopoverStyle> {\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNodeOrFunction<{\n    open: boolean\n    onClose: () => void\n  }>\n  /**\n   * The animation duration.\n   *\n   * @default 0.2\n   */\n  duration?: PopupAnimationProps[\"duration\"]\n}\n\nconst {\n  ComponentContext,\n  PropsContext: PopoverPropsContext,\n  StyleContext,\n  useComponentContext,\n  usePropsContext: usePopoverPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<PopoverRootProps, PopoverStyle, ComponentContext>(\n  \"popover\",\n  popoverStyle,\n)\n\nexport { PopoverPropsContext, usePopoverPropsContext }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see https://yamada-ui.com/docs/components/popover\n */\nexport const PopoverRoot: FC<PopoverRootProps> = (props) => {\n  const [\n    styleContext,\n    { animationScheme = \"scale\", children, duration = 0.1, ...rest },\n  ] = useRootComponentProps(props)\n  const {\n    open,\n    getAnchorProps,\n    getBodyProps,\n    getCloseTriggerProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n    onClose,\n  } = usePopover(rest)\n  const componentContext = useMemo(\n    () => ({\n      animationScheme,\n      duration,\n      open,\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    }),\n    [\n      open,\n      animationScheme,\n      duration,\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    ],\n  )\n\n  return (\n    <StyleContext value={styleContext}>\n      <ComponentContext value={componentContext}>\n        {runIfFn(children, { open, onClose })}\n      </ComponentContext>\n    </StyleContext>\n  )\n}\n\nexport interface PopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverTrigger = withContext<\"button\", PopoverTriggerProps>(\n  \"button\",\n  \"trigger\",\n)({ asChild: true }, (props) => {\n  const { getTriggerProps } = useComponentContext()\n\n  return getTriggerProps(props)\n})\n\nexport interface PopoverCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverCloseTrigger = withContext<\n  \"button\",\n  PopoverCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n  { asChild: true },\n  (props) => {\n    const { getCloseTriggerProps } = useComponentContext()\n\n    return getCloseTriggerProps(props)\n  },\n)\n\nexport interface PopoverAnchorProps extends HTMLStyledProps {}\n\nexport const PopoverAnchor = withContext<\"div\", PopoverAnchorProps>(\n  \"div\",\n  \"anchor\",\n)({ asChild: true }, (props) => {\n  const { getAnchorProps } = useComponentContext()\n\n  return getAnchorProps(props)\n})\n\ninterface PopoverPositionerProps extends HTMLStyledProps {}\n\nconst PopoverPositioner = withContext<\"div\", PopoverPositionerProps>(\n  \"div\",\n  \"positioner\",\n)(undefined, (props) => {\n  const { getPositionerProps } = useComponentContext()\n\n  return getPositionerProps(props)\n})\n\nexport interface PopoverContentProps\n  extends Omit<HTMLMotionProps, \"children\">, PropsWithChildren {\n  /**\n   * Props for portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n}\n\nexport const PopoverContent = withContext<\"div\", PopoverContentProps>(\n  ({ portalProps, ...rest }) => {\n    const { animationScheme, duration, open, getContentProps } =\n      useComponentContext()\n\n    return (\n      <AnimatePresence>\n        {open ? (\n          <Portal {...portalProps}>\n            <PopoverPositioner>\n              <motion.div\n                {...getPopupAnimationProps(animationScheme, duration)}\n                {...cast<HTMLMotionProps>(\n                  getContentProps(cast<HTMLProps>(rest)),\n                )}\n              />\n            </PopoverPositioner>\n          </Portal>\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n  \"content\",\n)()\n\nexport interface PopoverHeaderProps extends HTMLStyledProps {}\n\nexport const PopoverHeader = withContext<\"div\", PopoverHeaderProps>(\n  \"div\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return getHeaderProps(props)\n})\n\nexport interface PopoverBodyProps extends HTMLStyledProps {}\n\nexport const PopoverBody = withContext<\"div\", PopoverBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return getBodyProps(props)\n  },\n)\n\nexport interface PopoverFooterProps extends HTMLStyledProps {}\n\nexport const PopoverFooter = withContext<\"div\", PopoverFooterProps>(\n  \"div\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return getFooterProps(props)\n})\n"],"mappings":"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"}