@impulse-ui-native/popover 6.3.1 → 7.0.0

package/README.md

@@ -35,17 +35,21 @@ import { Typography } from "@impulse-ui-native/primitives";
 </Tooltip>;
 ```
 
-All compound parts render supplied children. `Popover.Content` owns Portal rendering and carries popover context to the host, so `Title`, `Description`, and `Close` work there. Other app-local React providers around an anchor do not automatically move with it; put those providers above the host or inside Content.
+All compound parts render supplied children. `Popover.Content` owns Portal rendering and carries popover context to the host, so `Close` can dismiss there. Header, Footer, Title, and Description use independent theme styling. Other app-local React providers around an anchor do not automatically move with it; put those providers above the host or inside Content.
 
-The convenience form assembles Trigger and Content:
+The convenience form composes Trigger, Content, Header, Title, Close, and Footer:
 
 ```tsx
-<Popover trigger={<Typography.Label>Details</Typography.Label>}>
-  <Popover.Title>Project details</Popover.Title>
+<Popover
+  trigger={<Typography.Label>Details</Typography.Label>}
+  title="Project details"
+>
   <Popover.Description>Updated just now.</Popover.Description>
 </Popover>
 ```
 
+A truthy header replaces the generated title. The header includes a neutral X close icon by default; hideClose omits it. A truthy footer renders Popover.Footer with trailing, wrapping actions. Header and Footer are child-only View parts available for compound composition. Pass body content as children; triggerProps and contentProps continue to customize the trigger and positioned panel. Titles can wrap beside the close control instead of pushing it outside the header.
+
 ## Contract
 
 - `open`, `defaultOpen` (false), and `onOpenChange` support controlled and uncontrolled state. Controlled consumers must apply requested changes.
@@ -54,11 +58,20 @@ The convenience form assembles Trigger and Content:
 - Root `disabled` suppresses the overlay and blocks trigger changes. Trigger/Close `disabled` or `loading` blocks that part's interaction. Supply a single Trigger and Content per Root; use non-interactive visual children inside Trigger rather than nesting another pressable.
 - Outside taps and Android Back request dismissal. Outside taps are consumed; there is no dim scrim. Content sizes naturally without internal scrolling. Keep popovers compact; use a sheet, dialog, or screen for larger content. Keyboard avoidance and nested overlay coordination are outside this initial API.
 - Tooltip `duration` defaults to 3000ms from opening; zero persists until dismissal. Timers clean up on close/unmount. Supply strings/numbers for token-styled text or a React node for custom content.
-- `surface` selects elevated (default) or inverse appearance for Popover. Tooltip uses inverse. Override `components.popover` on ThemeProvider for shared geometry, typography, and surface styling.
-- Elevated content defaults to 320dp wide; inverse hints size to their content. Both are constrained to the available host width. Content spacing and width can be customized with primitive style props or `style`.
+- Popover uses one flat secondary surface with a subtle border and no default shadow. Override `components.popover` on ThemeProvider for geometry, typography, and panel styling. Tooltip owns its compact inverse styling through `components.popover.tooltip`, without a surface variant in Root or context.
+- Popover content defaults to 320dp wide; Tooltip sizes to its content. Both are constrained to the available host width. Content spacing and width can be customized with primitive style props or `style`.
 - Anchors and host bounds are measured on opening and polled every 100ms while open, following scrolling and layout changes. Only one measurement is in flight; slow native callbacks are allowed to finish. Closed overlays have no measurement timer. Content stays hidden until measured and when its anchor is outside the usable host bounds.
 - Popover and Tooltip use rounded panels without arrows. Collision handling flips to the opposite side when it has more space, then shifts into safe-area bounds. Extremely large content can overlap the anchor after clamping.
 
 ## Exports and verification
 
-`Popover`, `Tooltip`, and their prop/placement/surface types are available directly or through `@impulse-ui-native/toolkit`. Storybook covers composition, controlled state, disabled triggers, long-press, and edge placements. Use the on-device Storybook host to verify rendering and interaction on iOS and Android.
+`Popover`, `Tooltip`, and their prop and placement types are available directly or through `@impulse-ui-native/toolkit`. Storybook covers composition, controlled state, disabled triggers, long-press, and edge placements. Use the on-device Storybook host to verify rendering and interaction on iOS and Android.
+
+## Surface migration
+
+The surface prop and PopoverSurface type have been removed. Move former
+components.popover.surfaces.elevated customizations to the flat panel tokens
+(backgroundColor, borderColor, borderWidth, borderRadius, paddingHorizontal,
+and paddingVertical). Move inverse hint styling to components.popover.tooltip;
+its text color is named color. Customize Popover.Content directly for custom
+panel styling.

package/dist/components/index.d.mts

@@ -1,16 +1,18 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { PopoverProps, PopoverRootProps, PopoverTriggerProps, PopoverContentProps, PopoverTitleProps, PopoverDescriptionProps, PopoverCloseProps } from '../types/popover.types.mjs';
+import { PopoverProps, PopoverRootProps, PopoverTriggerProps, PopoverContentProps, PopoverHeaderProps, PopoverFooterProps, PopoverTitleProps, PopoverDescriptionProps, PopoverCloseProps } from '../types/popover.types.mjs';
 export { Tooltip } from './tooltip.mjs';
 import 'react-native';
 import '@impulse-ui-native/primitives';
 
 declare const Popover: react.NamedExoticComponent<PopoverProps> & {
-    readonly type: ({ trigger, triggerProps, contentProps, children, ...props }: PopoverProps) => react_jsx_runtime.JSX.Element;
+    readonly type: ({ trigger, triggerProps, contentProps, header, title, footer, hideClose, children, ...props }: PopoverProps) => react_jsx_runtime.JSX.Element;
 } & {
-    Root: react.MemoExoticComponent<({ children, open: openProp, defaultOpen, onOpenChange, disabled, placement, surface, portalName, }: PopoverRootProps) => react_jsx_runtime.JSX.Element>;
+    Root: react.MemoExoticComponent<({ children, open: openProp, defaultOpen, onOpenChange, disabled, placement, portalName, }: PopoverRootProps) => react_jsx_runtime.JSX.Element>;
     Trigger: react.MemoExoticComponent<({ trigger, disabled, loading, onPress, onLongPress, ...props }: PopoverTriggerProps) => react_jsx_runtime.JSX.Element>;
     Content: react.MemoExoticComponent<(props: PopoverContentProps) => react_jsx_runtime.JSX.Element | null>;
+    Header: react.MemoExoticComponent<({ style, ...props }: PopoverHeaderProps) => react_jsx_runtime.JSX.Element>;
+    Footer: react.MemoExoticComponent<({ style, ...props }: PopoverFooterProps) => react_jsx_runtime.JSX.Element>;
     Title: react.MemoExoticComponent<(props: PopoverTitleProps) => react_jsx_runtime.JSX.Element>;
     Description: react.MemoExoticComponent<(props: PopoverDescriptionProps) => react_jsx_runtime.JSX.Element>;
     Close: react.MemoExoticComponent<({ disabled, loading, onPress, ...props }: PopoverCloseProps) => react_jsx_runtime.JSX.Element>;

package/dist/components/index.js

@@ -2,6 +2,8 @@ import { PopoverComponent } from "./popover";
 import { PopoverClose } from "./popover-close";
 import { PopoverContent } from "./popover-content";
 import { PopoverDescription } from "./popover-description";
+import { PopoverFooter } from "./popover-footer";
+import { PopoverHeader } from "./popover-header";
 import { PopoverRoot } from "./popover-root";
 import { PopoverTitle } from "./popover-title";
 import { PopoverTrigger } from "./popover-trigger";
@@ -9,6 +11,8 @@ const Popover = Object.assign(PopoverComponent, {
   Root: PopoverRoot,
   Trigger: PopoverTrigger,
   Content: PopoverContent,
+  Header: PopoverHeader,
+  Footer: PopoverFooter,
   Title: PopoverTitle,
   Description: PopoverDescription,
   Close: PopoverClose

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["import { PopoverComponent } from \"./popover\";\nimport { PopoverClose } from \"./popover-close\";\nimport { PopoverContent } from \"./popover-content\";\nimport { PopoverDescription } from \"./popover-description\";\nimport { PopoverRoot } from \"./popover-root\";\nimport { PopoverTitle } from \"./popover-title\";\nimport { PopoverTrigger } from \"./popover-trigger\";\n\nexport const Popover = Object.assign(PopoverComponent, {\n  Root: PopoverRoot,\n  Trigger: PopoverTrigger,\n  Content: PopoverContent,\n  Title: PopoverTitle,\n  Description: PopoverDescription,\n  Close: PopoverClose,\n});\n\nexport { Tooltip } from \"./tooltip\";\n"],"mappings":"AAAA,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAExB,MAAM,UAAU,OAAO,OAAO,kBAAkB;AAAA,EACrD,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,aAAa;AAAA,EACb,OAAO;AACT,CAAC;AAED,SAAS,eAAe;","names":[]}
+{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["import { PopoverComponent } from \"./popover\";\nimport { PopoverClose } from \"./popover-close\";\nimport { PopoverContent } from \"./popover-content\";\nimport { PopoverDescription } from \"./popover-description\";\nimport { PopoverFooter } from \"./popover-footer\";\nimport { PopoverHeader } from \"./popover-header\";\nimport { PopoverRoot } from \"./popover-root\";\nimport { PopoverTitle } from \"./popover-title\";\nimport { PopoverTrigger } from \"./popover-trigger\";\n\nexport const Popover = Object.assign(PopoverComponent, {\n  Root: PopoverRoot,\n  Trigger: PopoverTrigger,\n  Content: PopoverContent,\n  Header: PopoverHeader,\n  Footer: PopoverFooter,\n  Title: PopoverTitle,\n  Description: PopoverDescription,\n  Close: PopoverClose,\n});\n\nexport { Tooltip } from \"./tooltip\";\n"],"mappings":"AAAA,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAExB,MAAM,UAAU,OAAO,OAAO,kBAAkB;AAAA,EACrD,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AAAA,EACb,OAAO;AACT,CAAC;AAED,SAAS,eAAe;","names":[]}

package/dist/components/popover-description.js

@@ -2,14 +2,12 @@ import { jsx } from "react/jsx-runtime";
 import { memo } from "react";
 import { Typography } from "@impulse-ui-native/primitives";
 import { useComponentsTokens } from "@impulse-ui-native/theme";
-import { usePopoverContext } from "../hooks/use-popover-context.hook";
 const PopoverDescription = memo(function PopoverDescription2(props) {
-  const { surface } = usePopoverContext();
   const tokens = useComponentsTokens().popover;
   return /* @__PURE__ */ jsx(
     Typography.BodySmall,
     {
-      color: surface === "inverse" ? tokens.surfaces.inverse.contrast : tokens.descriptionColor,
+      color: tokens.descriptionColor,
       fontSize: tokens.descriptionFontSize,
       lineHeight: tokens.descriptionLineHeight,
       ...props

package/dist/components/popover-description.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/popover-description.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Typography } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { PopoverDescriptionProps } from \"../types\";\nimport { usePopoverContext } from \"../hooks/use-popover-context.hook\";\n\nexport const PopoverDescription = memo(function PopoverDescription(\n  props: PopoverDescriptionProps,\n) {\n  const { surface } = usePopoverContext();\n  const tokens = useComponentsTokens().popover;\n\n  return (\n    <Typography.BodySmall\n      color={\n        surface === \"inverse\"\n          ? tokens.surfaces.inverse.contrast\n          : tokens.descriptionColor\n      }\n      fontSize={tokens.descriptionFontSize}\n      lineHeight={tokens.descriptionLineHeight}\n      {...props}\n    />\n  );\n});\n"],"mappings":"AAeI;AAfJ,SAAS,YAAY;AAErB,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AAGpC,SAAS,yBAAyB;AAE3B,MAAM,qBAAqB,KAAK,SAASA,oBAC9C,OACA;AACA,QAAM,EAAE,QAAQ,IAAI,kBAAkB;AACtC,QAAM,SAAS,oBAAoB,EAAE;AAErC,SACE;AAAA,IAAC,WAAW;AAAA,IAAX;AAAA,MACC,OACE,YAAY,YACR,OAAO,SAAS,QAAQ,WACxB,OAAO;AAAA,MAEb,UAAU,OAAO;AAAA,MACjB,YAAY,OAAO;AAAA,MAClB,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["PopoverDescription"]}
+{"version":3,"sources":["../../src/components/popover-description.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Typography } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { PopoverDescriptionProps } from \"../types\";\n\nexport const PopoverDescription = memo(function PopoverDescription(\n  props: PopoverDescriptionProps,\n) {\n  const tokens = useComponentsTokens().popover;\n\n  return (\n    <Typography.BodySmall\n      color={tokens.descriptionColor}\n      fontSize={tokens.descriptionFontSize}\n      lineHeight={tokens.descriptionLineHeight}\n      {...props}\n    />\n  );\n});\n"],"mappings":"AAaI;AAbJ,SAAS,YAAY;AAErB,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AAI7B,MAAM,qBAAqB,KAAK,SAASA,oBAC9C,OACA;AACA,QAAM,SAAS,oBAAoB,EAAE;AAErC,SACE;AAAA,IAAC,WAAW;AAAA,IAAX;AAAA,MACC,OAAO,OAAO;AAAA,MACd,UAAU,OAAO;AAAA,MACjB,YAAY,OAAO;AAAA,MAClB,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["PopoverDescription"]}

package/dist/components/popover-footer.d.mts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PopoverFooterProps } from '../types/popover.types.mjs';
+import 'react-native';
+import '@impulse-ui-native/primitives';
+
+declare const PopoverFooter: react.MemoExoticComponent<({ style, ...props }: PopoverFooterProps) => react_jsx_runtime.JSX.Element>;
+
+export { PopoverFooter };

package/dist/components/popover-footer.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { View } from "@impulse-ui-native/primitives";
+import { useStyleProps, useThemedStyles } from "@impulse-ui-native/theme";
+const PopoverFooter = memo(function PopoverFooter2({
+  style,
+  ...props
+}) {
+  const extractedStyleProps = useStyleProps(props);
+  const styles = useThemedStyles(themedStyles);
+  const partStyle = useMemo(
+    () => [styles.part, extractedStyleProps, style],
+    [styles.part, extractedStyleProps, style]
+  );
+  return /* @__PURE__ */ jsx(View, { ...props, style: partStyle });
+});
+function themedStyles(theme) {
+  return StyleSheet.create({
+    part: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "flex-end",
+      flexWrap: "wrap",
+      gap: theme.components.popover.gap
+    }
+  });
+}
+export {
+  PopoverFooter
+};
+//# sourceMappingURL=popover-footer.js.map

package/dist/components/popover-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/popover-footer.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { PopoverFooterProps } from \"../types\";\n\nexport const PopoverFooter = memo(function PopoverFooter({\n  style,\n  ...props\n}: PopoverFooterProps) {\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(themedStyles);\n\n  const partStyle = useMemo(\n    () => [styles.part, extractedStyleProps, style],\n    [styles.part, extractedStyleProps, style],\n  );\n\n  return <View {...props} style={partStyle} />;\n});\n\nfunction themedStyles(theme: AppTheme) {\n  return StyleSheet.create({\n    part: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      justifyContent: \"flex-end\",\n      flexWrap: \"wrap\",\n      gap: theme.components.popover.gap,\n    },\n  });\n}\n"],"mappings":"AAqBS;AArBT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,YAAY;AACrB,SAAS,eAAe,uBAAuB;AAIxC,MAAM,gBAAgB,KAAK,SAASA,eAAc;AAAA,EACvD;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS,gBAAgB,YAAY;AAE3C,QAAM,YAAY;AAAA,IAChB,MAAM,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,IAC9C,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,EAC1C;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,WAAW;AAC5C,CAAC;AAED,SAAS,aAAa,OAAiB;AACrC,SAAO,WAAW,OAAO;AAAA,IACvB,MAAM;AAAA,MACJ,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,KAAK,MAAM,WAAW,QAAQ;AAAA,IAChC;AAAA,EACF,CAAC;AACH;","names":["PopoverFooter"]}

package/dist/components/popover-header.d.mts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PopoverHeaderProps } from '../types/popover.types.mjs';
+import 'react-native';
+import '@impulse-ui-native/primitives';
+
+declare const PopoverHeader: react.MemoExoticComponent<({ style, ...props }: PopoverHeaderProps) => react_jsx_runtime.JSX.Element>;
+
+export { PopoverHeader };

package/dist/components/popover-header.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { View } from "@impulse-ui-native/primitives";
+import { useStyleProps, useThemedStyles } from "@impulse-ui-native/theme";
+const PopoverHeader = memo(function PopoverHeader2({
+  style,
+  ...props
+}) {
+  const extractedStyleProps = useStyleProps(props);
+  const styles = useThemedStyles(themedStyles);
+  const partStyle = useMemo(
+    () => [styles.part, extractedStyleProps, style],
+    [styles.part, extractedStyleProps, style]
+  );
+  return /* @__PURE__ */ jsx(View, { ...props, style: partStyle });
+});
+function themedStyles(theme) {
+  return StyleSheet.create({
+    part: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: theme.components.popover.gap
+    }
+  });
+}
+export {
+  PopoverHeader
+};
+//# sourceMappingURL=popover-header.js.map

package/dist/components/popover-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/popover-header.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { View } from \"@impulse-ui-native/primitives\";\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { PopoverHeaderProps } from \"../types\";\n\nexport const PopoverHeader = memo(function PopoverHeader({\n  style,\n  ...props\n}: PopoverHeaderProps) {\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(themedStyles);\n\n  const partStyle = useMemo(\n    () => [styles.part, extractedStyleProps, style],\n    [styles.part, extractedStyleProps, style],\n  );\n\n  return <View {...props} style={partStyle} />;\n});\n\nfunction themedStyles(theme: AppTheme) {\n  return StyleSheet.create({\n    part: {\n      flexDirection: \"row\",\n      alignItems: \"center\",\n      justifyContent: \"space-between\",\n      gap: theme.components.popover.gap,\n    },\n  });\n}\n"],"mappings":"AAqBS;AArBT,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,YAAY;AACrB,SAAS,eAAe,uBAAuB;AAIxC,MAAM,gBAAgB,KAAK,SAASA,eAAc;AAAA,EACvD;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS,gBAAgB,YAAY;AAE3C,QAAM,YAAY;AAAA,IAChB,MAAM,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,IAC9C,CAAC,OAAO,MAAM,qBAAqB,KAAK;AAAA,EAC1C;AAEA,SAAO,oBAAC,QAAM,GAAG,OAAO,OAAO,WAAW;AAC5C,CAAC;AAED,SAAS,aAAa,OAAiB;AACrC,SAAO,WAAW,OAAO;AAAA,IACvB,MAAM;AAAA,MACJ,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,KAAK,MAAM,WAAW,QAAQ;AAAA,IAChC;AAAA,EACF,CAAC;AACH;","names":["PopoverHeader"]}

package/dist/components/popover-root.d.mts

@@ -4,6 +4,6 @@ import { PopoverRootProps } from '../types/popover.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/primitives';
 
-declare const PopoverRoot: react.MemoExoticComponent<({ children, open: openProp, defaultOpen, onOpenChange, disabled, placement, surface, portalName, }: PopoverRootProps) => react_jsx_runtime.JSX.Element>;
+declare const PopoverRoot: react.MemoExoticComponent<({ children, open: openProp, defaultOpen, onOpenChange, disabled, placement, portalName, }: PopoverRootProps) => react_jsx_runtime.JSX.Element>;
 
 export { PopoverRoot };

package/dist/components/popover-root.js

@@ -9,7 +9,6 @@ const PopoverRoot = memo(function PopoverRoot2({
   onOpenChange,
   disabled = false,
   placement = "bottom",
-  surface = "elevated",
   portalName
 }) {
   const anchorRef = useRef(null);
@@ -25,10 +24,9 @@ const PopoverRoot = memo(function PopoverRoot2({
       setOpen,
       anchorRef,
       placement,
-      surface,
       portalName
     }),
-    [open, disabled, setOpen, placement, surface, portalName]
+    [open, disabled, setOpen, placement, portalName]
   );
   return /* @__PURE__ */ jsx(PopoverContext.Provider, { value: context, children });
 });

package/dist/components/popover-root.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/popover-root.tsx"],"sourcesContent":["import type { View } from \"react-native\";\nimport { memo, useMemo, useRef } from \"react\";\n\nimport { useControllableState } from \"@impulse-ui-native/core\";\n\nimport type { PopoverRootProps } from \"../types\";\nimport { PopoverContext } from \"../contexts/popover.context\";\n\nexport const PopoverRoot = memo(function PopoverRoot({\n  children,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  disabled = false,\n  placement = \"bottom\",\n  surface = \"elevated\",\n  portalName,\n}: PopoverRootProps) {\n  const anchorRef = useRef<View>(null);\n\n  const [open, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpen,\n    onChange: onOpenChange,\n  });\n\n  const context = useMemo(\n    () => ({\n      open: open && !disabled,\n      disabled,\n      setOpen,\n      anchorRef,\n      placement,\n      surface,\n      portalName,\n    }),\n    [open, disabled, setOpen, placement, surface, portalName],\n  );\n\n  return (\n    <PopoverContext.Provider value={context}>\n      {children}\n    </PopoverContext.Provider>\n  );\n});\n"],"mappings":"AAwCI;AAvCJ,SAAS,MAAM,SAAS,cAAc;AAEtC,SAAS,4BAA4B;AAGrC,SAAS,sBAAsB;AAExB,MAAM,cAAc,KAAK,SAASA,aAAY;AAAA,EACnD;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,UAAU;AAAA,EACV;AACF,GAAqB;AACnB,QAAM,YAAY,OAAa,IAAI;AAEnC,QAAM,CAAC,MAAM,OAAO,IAAI,qBAAqB;AAAA,IAC3C,MAAM;AAAA,IACN,aAAa;AAAA,IACb,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,UAAU;AAAA,IACd,OAAO;AAAA,MACL,MAAM,QAAQ,CAAC;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,UAAU,SAAS,WAAW,SAAS,UAAU;AAAA,EAC1D;AAEA,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,SAC7B,UACH;AAEJ,CAAC;","names":["PopoverRoot"]}
+{"version":3,"sources":["../../src/components/popover-root.tsx"],"sourcesContent":["import type { View } from \"react-native\";\nimport { memo, useMemo, useRef } from \"react\";\n\nimport { useControllableState } from \"@impulse-ui-native/core\";\n\nimport type { PopoverRootProps } from \"../types\";\nimport { PopoverContext } from \"../contexts/popover.context\";\n\nexport const PopoverRoot = memo(function PopoverRoot({\n  children,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  disabled = false,\n  placement = \"bottom\",\n  portalName,\n}: PopoverRootProps) {\n  const anchorRef = useRef<View>(null);\n\n  const [open, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpen,\n    onChange: onOpenChange,\n  });\n\n  const context = useMemo(\n    () => ({\n      open: open && !disabled,\n      disabled,\n      setOpen,\n      anchorRef,\n      placement,\n      portalName,\n    }),\n    [open, disabled, setOpen, placement, portalName],\n  );\n\n  return (\n    <PopoverContext.Provider value={context}>\n      {children}\n    </PopoverContext.Provider>\n  );\n});\n"],"mappings":"AAsCI;AArCJ,SAAS,MAAM,SAAS,cAAc;AAEtC,SAAS,4BAA4B;AAGrC,SAAS,sBAAsB;AAExB,MAAM,cAAc,KAAK,SAASA,aAAY;AAAA,EACnD;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AACF,GAAqB;AACnB,QAAM,YAAY,OAAa,IAAI;AAEnC,QAAM,CAAC,MAAM,OAAO,IAAI,qBAAqB;AAAA,IAC3C,MAAM;AAAA,IACN,aAAa;AAAA,IACb,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,UAAU;AAAA,IACd,OAAO;AAAA,MACL,MAAM,QAAQ,CAAC;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,MAAM,UAAU,SAAS,WAAW,UAAU;AAAA,EACjD;AAEA,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,SAC7B,UACH;AAEJ,CAAC;","names":["PopoverRoot"]}

package/dist/components/popover-surface.js

@@ -29,7 +29,6 @@ const PopoverSurfaceView = memo(function PopoverSurfaceView2({
         /* @__PURE__ */ jsx(
           View,
           {
-            shadow: "sm",
             ...props,
             pointerEvents: styleProps.ready ? "auto" : "none",
             style: panelStyle,
@@ -41,9 +40,8 @@ const PopoverSurfaceView = memo(function PopoverSurfaceView2({
     }
   );
 });
-function themedStyles(theme, { surface, bounds, host, position, ready }) {
+function themedStyles(theme, { bounds, host, position, ready }) {
   const tokens = theme.components.popover;
-  const appearance = tokens.surfaces[surface];
   return StyleSheet.create({
     host: { ...StyleSheet.absoluteFill, zIndex: tokens.zIndexBase },
     position: {
@@ -54,13 +52,13 @@ function themedStyles(theme, { surface, bounds, host, position, ready }) {
       opacity: ready ? 1 : 0
     },
     panel: {
-      width: surface === "elevated" ? tokens.maxWidth : void 0,
-      backgroundColor: appearance.value,
-      borderColor: appearance.borderColor,
-      borderWidth: appearance.borderWidth,
-      borderRadius: appearance.borderRadius,
-      paddingHorizontal: appearance.paddingHorizontal,
-      paddingVertical: appearance.paddingVertical,
+      width: tokens.maxWidth,
+      backgroundColor: tokens.backgroundColor,
+      borderColor: tokens.borderColor,
+      borderWidth: tokens.borderWidth,
+      borderRadius: tokens.borderRadius,
+      paddingHorizontal: tokens.paddingHorizontal,
+      paddingVertical: tokens.paddingVertical,
       gap: tokens.gap
     }
   });

package/dist/components/popover-surface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/popover-surface.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { Pressable, View } from \"@impulse-ui-native/primitives\";\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { PopoverContentProps } from \"../types\";\nimport type { PopoverSurfaceStyleProps } from \"../types/popover.types\";\nimport { usePopoverSurface } from \"../hooks/use-popover-surface.hook\";\n\nexport const PopoverSurfaceView = memo(function PopoverSurfaceView({\n  children,\n  style,\n  onLayout,\n  ...props\n}: PopoverContentProps) {\n  const { hostRef, styleProps, close, handleLayout } =\n    usePopoverSurface(onLayout);\n\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(themedStyles, styleProps, [styleProps]);\n\n  const panelStyle = useMemo(\n    () => [styles.panel, extractedStyleProps, style, styles.position],\n    [styles.panel, extractedStyleProps, style, styles.position],\n  );\n\n  return (\n    <View\n      ref={hostRef}\n      collapsable={false}\n      pointerEvents=\"box-none\"\n      style={styles.host}\n    >\n      <Pressable style={StyleSheet.absoluteFill} onPress={close} />\n      <View\n        shadow=\"sm\"\n        {...props}\n        pointerEvents={styleProps.ready ? \"auto\" : \"none\"}\n        style={panelStyle}\n        onLayout={handleLayout}\n      >\n        {children}\n      </View>\n    </View>\n  );\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  { surface, bounds, host, position, ready }: PopoverSurfaceStyleProps,\n) {\n  const tokens = theme.components.popover;\n  const appearance = tokens.surfaces[surface];\n\n  return StyleSheet.create({\n    host: { ...StyleSheet.absoluteFill, zIndex: tokens.zIndexBase },\n\n    position: {\n      position: \"absolute\",\n      left: (position?.x ?? bounds.x) - (host?.x ?? 0),\n      top: (position?.y ?? bounds.y) - (host?.y ?? 0),\n      maxWidth: Math.min(tokens.maxWidth, bounds.width),\n      opacity: ready ? 1 : 0,\n    },\n\n    panel: {\n      width: surface === \"elevated\" ? tokens.maxWidth : undefined,\n      backgroundColor: appearance.value,\n      borderColor: appearance.borderColor,\n      borderWidth: appearance.borderWidth,\n      borderRadius: appearance.borderRadius,\n      paddingHorizontal: appearance.paddingHorizontal,\n      paddingVertical: appearance.paddingVertical,\n      gap: tokens.gap,\n    },\n  });\n}\n"],"mappings":"AA6BI,SAME,KANF;AA7BJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,WAAW,YAAY;AAChC,SAAS,eAAe,uBAAuB;AAI/C,SAAS,yBAAyB;AAE3B,MAAM,qBAAqB,KAAK,SAASA,oBAAmB;AAAA,EACjE;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,EAAE,SAAS,YAAY,OAAO,aAAa,IAC/C,kBAAkB,QAAQ;AAE5B,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS,gBAAgB,cAAc,YAAY,CAAC,UAAU,CAAC;AAErE,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,OAAO,OAAO,qBAAqB,OAAO,OAAO,QAAQ;AAAA,IAChE,CAAC,OAAO,OAAO,qBAAqB,OAAO,OAAO,QAAQ;AAAA,EAC5D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,aAAa;AAAA,MACb,eAAc;AAAA,MACd,OAAO,OAAO;AAAA,MAEd;AAAA,4BAAC,aAAU,OAAO,WAAW,cAAc,SAAS,OAAO;AAAA,QAC3D;AAAA,UAAC;AAAA;AAAA,YACC,QAAO;AAAA,YACN,GAAG;AAAA,YACJ,eAAe,WAAW,QAAQ,SAAS;AAAA,YAC3C,OAAO;AAAA,YACP,UAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,SAAS,aACP,OACA,EAAE,SAAS,QAAQ,MAAM,UAAU,MAAM,GACzC;AACA,QAAM,SAAS,MAAM,WAAW;AAChC,QAAM,aAAa,OAAO,SAAS,OAAO;AAE1C,SAAO,WAAW,OAAO;AAAA,IACvB,MAAM,EAAE,GAAG,WAAW,cAAc,QAAQ,OAAO,WAAW;AAAA,IAE9D,UAAU;AAAA,MACR,UAAU;AAAA,MACV,OAAO,UAAU,KAAK,OAAO,MAAM,MAAM,KAAK;AAAA,MAC9C,MAAM,UAAU,KAAK,OAAO,MAAM,MAAM,KAAK;AAAA,MAC7C,UAAU,KAAK,IAAI,OAAO,UAAU,OAAO,KAAK;AAAA,MAChD,SAAS,QAAQ,IAAI;AAAA,IACvB;AAAA,IAEA,OAAO;AAAA,MACL,OAAO,YAAY,aAAa,OAAO,WAAW;AAAA,MAClD,iBAAiB,WAAW;AAAA,MAC5B,aAAa,WAAW;AAAA,MACxB,aAAa,WAAW;AAAA,MACxB,cAAc,WAAW;AAAA,MACzB,mBAAmB,WAAW;AAAA,MAC9B,iBAAiB,WAAW;AAAA,MAC5B,KAAK,OAAO;AAAA,IACd;AAAA,EACF,CAAC;AACH;","names":["PopoverSurfaceView"]}
+{"version":3,"sources":["../../src/components/popover-surface.tsx"],"sourcesContent":["import { memo, useMemo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport { Pressable, View } from \"@impulse-ui-native/primitives\";\nimport { useStyleProps, useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { PopoverContentProps } from \"../types\";\nimport type { PopoverSurfaceStyleProps } from \"../types/popover.types\";\nimport { usePopoverSurface } from \"../hooks/use-popover-surface.hook\";\n\nexport const PopoverSurfaceView = memo(function PopoverSurfaceView({\n  children,\n  style,\n  onLayout,\n  ...props\n}: PopoverContentProps) {\n  const { hostRef, styleProps, close, handleLayout } =\n    usePopoverSurface(onLayout);\n\n  const extractedStyleProps = useStyleProps(props);\n  const styles = useThemedStyles(themedStyles, styleProps, [styleProps]);\n\n  const panelStyle = useMemo(\n    () => [styles.panel, extractedStyleProps, style, styles.position],\n    [styles.panel, extractedStyleProps, style, styles.position],\n  );\n\n  return (\n    <View\n      ref={hostRef}\n      collapsable={false}\n      pointerEvents=\"box-none\"\n      style={styles.host}\n    >\n      <Pressable style={StyleSheet.absoluteFill} onPress={close} />\n      <View\n        {...props}\n        pointerEvents={styleProps.ready ? \"auto\" : \"none\"}\n        style={panelStyle}\n        onLayout={handleLayout}\n      >\n        {children}\n      </View>\n    </View>\n  );\n});\n\nfunction themedStyles(\n  theme: AppTheme,\n  { bounds, host, position, ready }: PopoverSurfaceStyleProps,\n) {\n  const tokens = theme.components.popover;\n\n  return StyleSheet.create({\n    host: { ...StyleSheet.absoluteFill, zIndex: tokens.zIndexBase },\n\n    position: {\n      position: \"absolute\",\n      left: (position?.x ?? bounds.x) - (host?.x ?? 0),\n      top: (position?.y ?? bounds.y) - (host?.y ?? 0),\n      maxWidth: Math.min(tokens.maxWidth, bounds.width),\n      opacity: ready ? 1 : 0,\n    },\n\n    panel: {\n      width: tokens.maxWidth,\n      backgroundColor: tokens.backgroundColor,\n      borderColor: tokens.borderColor,\n      borderWidth: tokens.borderWidth,\n      borderRadius: tokens.borderRadius,\n      paddingHorizontal: tokens.paddingHorizontal,\n      paddingVertical: tokens.paddingVertical,\n      gap: tokens.gap,\n    },\n  });\n}\n"],"mappings":"AA6BI,SAME,KANF;AA7BJ,SAAS,MAAM,eAAe;AAC9B,SAAS,kBAAkB;AAG3B,SAAS,WAAW,YAAY;AAChC,SAAS,eAAe,uBAAuB;AAI/C,SAAS,yBAAyB;AAE3B,MAAM,qBAAqB,KAAK,SAASA,oBAAmB;AAAA,EACjE;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,EAAE,SAAS,YAAY,OAAO,aAAa,IAC/C,kBAAkB,QAAQ;AAE5B,QAAM,sBAAsB,cAAc,KAAK;AAC/C,QAAM,SAAS,gBAAgB,cAAc,YAAY,CAAC,UAAU,CAAC;AAErE,QAAM,aAAa;AAAA,IACjB,MAAM,CAAC,OAAO,OAAO,qBAAqB,OAAO,OAAO,QAAQ;AAAA,IAChE,CAAC,OAAO,OAAO,qBAAqB,OAAO,OAAO,QAAQ;AAAA,EAC5D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,aAAa;AAAA,MACb,eAAc;AAAA,MACd,OAAO,OAAO;AAAA,MAEd;AAAA,4BAAC,aAAU,OAAO,WAAW,cAAc,SAAS,OAAO;AAAA,QAC3D;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,eAAe,WAAW,QAAQ,SAAS;AAAA,YAC3C,OAAO;AAAA,YACP,UAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,SAAS,aACP,OACA,EAAE,QAAQ,MAAM,UAAU,MAAM,GAChC;AACA,QAAM,SAAS,MAAM,WAAW;AAEhC,SAAO,WAAW,OAAO;AAAA,IACvB,MAAM,EAAE,GAAG,WAAW,cAAc,QAAQ,OAAO,WAAW;AAAA,IAE9D,UAAU;AAAA,MACR,UAAU;AAAA,MACV,OAAO,UAAU,KAAK,OAAO,MAAM,MAAM,KAAK;AAAA,MAC9C,MAAM,UAAU,KAAK,OAAO,MAAM,MAAM,KAAK;AAAA,MAC7C,UAAU,KAAK,IAAI,OAAO,UAAU,OAAO,KAAK;AAAA,MAChD,SAAS,QAAQ,IAAI;AAAA,IACvB;AAAA,IAEA,OAAO;AAAA,MACL,OAAO,OAAO;AAAA,MACd,iBAAiB,OAAO;AAAA,MACxB,aAAa,OAAO;AAAA,MACpB,aAAa,OAAO;AAAA,MACpB,cAAc,OAAO;AAAA,MACrB,mBAAmB,OAAO;AAAA,MAC1B,iBAAiB,OAAO;AAAA,MACxB,KAAK,OAAO;AAAA,IACd;AAAA,EACF,CAAC;AACH;","names":["PopoverSurfaceView"]}

package/dist/components/popover-title.js

@@ -2,16 +2,15 @@ import { jsx } from "react/jsx-runtime";
 import { memo } from "react";
 import { Typography } from "@impulse-ui-native/primitives";
 import { useComponentsTokens } from "@impulse-ui-native/theme";
-import { usePopoverContext } from "../hooks/use-popover-context.hook";
 const PopoverTitle = memo(function PopoverTitle2(props) {
-  const { surface } = usePopoverContext();
   const tokens = useComponentsTokens().popover;
   return /* @__PURE__ */ jsx(
     Typography.Title6,
     {
-      color: surface === "inverse" ? tokens.surfaces.inverse.contrast : tokens.titleColor,
+      color: tokens.titleColor,
       fontSize: tokens.titleFontSize,
       lineHeight: tokens.titleLineHeight,
+      flexShrink: 1,
       ...props
     }
   );

package/dist/components/popover-title.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/popover-title.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Typography } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { PopoverTitleProps } from \"../types\";\nimport { usePopoverContext } from \"../hooks/use-popover-context.hook\";\n\nexport const PopoverTitle = memo(function PopoverTitle(\n  props: PopoverTitleProps,\n) {\n  const { surface } = usePopoverContext();\n  const tokens = useComponentsTokens().popover;\n\n  return (\n    <Typography.Title6\n      color={\n        surface === \"inverse\"\n          ? tokens.surfaces.inverse.contrast\n          : tokens.titleColor\n      }\n      fontSize={tokens.titleFontSize}\n      lineHeight={tokens.titleLineHeight}\n      {...props}\n    />\n  );\n});\n"],"mappings":"AAeI;AAfJ,SAAS,YAAY;AAErB,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AAGpC,SAAS,yBAAyB;AAE3B,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,EAAE,QAAQ,IAAI,kBAAkB;AACtC,QAAM,SAAS,oBAAoB,EAAE;AAErC,SACE;AAAA,IAAC,WAAW;AAAA,IAAX;AAAA,MACC,OACE,YAAY,YACR,OAAO,SAAS,QAAQ,WACxB,OAAO;AAAA,MAEb,UAAU,OAAO;AAAA,MACjB,YAAY,OAAO;AAAA,MAClB,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["PopoverTitle"]}
+{"version":3,"sources":["../../src/components/popover-title.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Typography } from \"@impulse-ui-native/primitives\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { PopoverTitleProps } from \"../types\";\n\nexport const PopoverTitle = memo(function PopoverTitle(\n  props: PopoverTitleProps,\n) {\n  const tokens = useComponentsTokens().popover;\n\n  return (\n    <Typography.Title6\n      color={tokens.titleColor}\n      fontSize={tokens.titleFontSize}\n      lineHeight={tokens.titleLineHeight}\n      flexShrink={1}\n      {...props}\n    />\n  );\n});\n"],"mappings":"AAaI;AAbJ,SAAS,YAAY;AAErB,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AAI7B,MAAM,eAAe,KAAK,SAASA,cACxC,OACA;AACA,QAAM,SAAS,oBAAoB,EAAE;AAErC,SACE;AAAA,IAAC,WAAW;AAAA,IAAX;AAAA,MACC,OAAO,OAAO;AAAA,MACd,UAAU,OAAO;AAAA,MACjB,YAAY,OAAO;AAAA,MACnB,YAAY;AAAA,MACX,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["PopoverTitle"]}

package/dist/components/popover.d.mts

@@ -4,6 +4,6 @@ import { PopoverProps } from '../types/popover.types.mjs';
 import 'react-native';
 import '@impulse-ui-native/primitives';
 
-declare const PopoverComponent: react.MemoExoticComponent<({ trigger, triggerProps, contentProps, children, ...props }: PopoverProps) => react_jsx_runtime.JSX.Element>;
+declare const PopoverComponent: react.MemoExoticComponent<({ trigger, triggerProps, contentProps, header, title, footer, hideClose, children, ...props }: PopoverProps) => react_jsx_runtime.JSX.Element>;
 
 export { PopoverComponent };

package/dist/components/popover.js

@@ -1,18 +1,38 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
+import { Icon } from "@impulse-ui-native/icon";
+import { XIcon } from "@impulse-ui-native/icon/icons/x";
+import { useColors } from "@impulse-ui-native/theme";
+import { PopoverClose } from "./popover-close";
 import { PopoverContent } from "./popover-content";
+import { PopoverFooter } from "./popover-footer";
+import { PopoverHeader } from "./popover-header";
 import { PopoverRoot } from "./popover-root";
+import { PopoverTitle } from "./popover-title";
 import { PopoverTrigger } from "./popover-trigger";
 const PopoverComponent = memo(function Popover({
   trigger,
   triggerProps,
   contentProps,
+  header,
+  title,
+  footer,
+  hideClose = false,
   children,
   ...props
 }) {
+  const colors = useColors();
   return /* @__PURE__ */ jsxs(PopoverRoot, { ...props, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { ...triggerProps, children: trigger }),
-    /* @__PURE__ */ jsx(PopoverContent, { ...contentProps, children })
+    /* @__PURE__ */ jsxs(PopoverContent, { ...contentProps, children: [
+      header || title || !hideClose ? /* @__PURE__ */ jsxs(PopoverHeader, { children: [
+        header,
+        !header && title ? /* @__PURE__ */ jsx(PopoverTitle, { children: title }) : null,
+        !hideClose ? /* @__PURE__ */ jsx(PopoverClose, { marginLeft: "auto", children: /* @__PURE__ */ jsx(Icon, { icon: XIcon, size: "small", color: colors.text.tertiary }) }) : null
+      ] }) : null,
+      children,
+      footer ? /* @__PURE__ */ jsx(PopoverFooter, { children: footer }) : null
+    ] })
   ] });
 });
 export {

package/dist/components/popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport type { PopoverProps } from \"../types\";\nimport { PopoverContent } from \"./popover-content\";\nimport { PopoverRoot } from \"./popover-root\";\nimport { PopoverTrigger } from \"./popover-trigger\";\n\nexport const PopoverComponent = memo(function Popover({\n  trigger,\n  triggerProps,\n  contentProps,\n  children,\n  ...props\n}: PopoverProps) {\n  return (\n    <PopoverRoot {...props}>\n      <PopoverTrigger {...triggerProps}>{trigger}</PopoverTrigger>\n      <PopoverContent {...contentProps}>{children}</PopoverContent>\n    </PopoverRoot>\n  );\n});\n"],"mappings":"AAeI,SACE,KADF;AAfJ,SAAS,YAAY;AAGrB,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAExB,MAAM,mBAAmB,KAAK,SAAS,QAAQ;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf,SACE,qBAAC,eAAa,GAAG,OACf;AAAA,wBAAC,kBAAgB,GAAG,cAAe,mBAAQ;AAAA,IAC3C,oBAAC,kBAAgB,GAAG,cAAe,UAAS;AAAA,KAC9C;AAEJ,CAAC;","names":[]}
+{"version":3,"sources":["../../src/components/popover.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport { Icon } from \"@impulse-ui-native/icon\";\nimport { XIcon } from \"@impulse-ui-native/icon/icons/x\";\nimport { useColors } from \"@impulse-ui-native/theme\";\n\nimport type { PopoverProps } from \"../types\";\nimport { PopoverClose } from \"./popover-close\";\nimport { PopoverContent } from \"./popover-content\";\nimport { PopoverFooter } from \"./popover-footer\";\nimport { PopoverHeader } from \"./popover-header\";\nimport { PopoverRoot } from \"./popover-root\";\nimport { PopoverTitle } from \"./popover-title\";\nimport { PopoverTrigger } from \"./popover-trigger\";\n\nexport const PopoverComponent = memo(function Popover({\n  trigger,\n  triggerProps,\n  contentProps,\n  header,\n  title,\n  footer,\n  hideClose = false,\n  children,\n  ...props\n}: PopoverProps) {\n  const colors = useColors();\n\n  return (\n    <PopoverRoot {...props}>\n      <PopoverTrigger {...triggerProps}>{trigger}</PopoverTrigger>\n      <PopoverContent {...contentProps}>\n        {header || title || !hideClose ? (\n          <PopoverHeader>\n            {header}\n            {!header && title ? <PopoverTitle>{title}</PopoverTitle> : null}\n            {!hideClose ? (\n              <PopoverClose marginLeft=\"auto\">\n                <Icon icon={XIcon} size=\"small\" color={colors.text.tertiary} />\n              </PopoverClose>\n            ) : null}\n          </PopoverHeader>\n        ) : null}\n        {children}\n        {footer ? <PopoverFooter>{footer}</PopoverFooter> : null}\n      </PopoverContent>\n    </PopoverRoot>\n  );\n});\n"],"mappings":"AA8BM,cAGI,YAHJ;AA9BN,SAAS,YAAY;AAErB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAG1B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,sBAAsB;AAExB,MAAM,mBAAmB,KAAK,SAAS,QAAQ;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAiB;AACf,QAAM,SAAS,UAAU;AAEzB,SACE,qBAAC,eAAa,GAAG,OACf;AAAA,wBAAC,kBAAgB,GAAG,cAAe,mBAAQ;AAAA,IAC3C,qBAAC,kBAAgB,GAAG,cACjB;AAAA,gBAAU,SAAS,CAAC,YACnB,qBAAC,iBACE;AAAA;AAAA,QACA,CAAC,UAAU,QAAQ,oBAAC,gBAAc,iBAAM,IAAkB;AAAA,QAC1D,CAAC,YACA,oBAAC,gBAAa,YAAW,QACvB,8BAAC,QAAK,MAAM,OAAO,MAAK,SAAQ,OAAO,OAAO,KAAK,UAAU,GAC/D,IACE;AAAA,SACN,IACE;AAAA,MACH;AAAA,MACA,SAAS,oBAAC,iBAAe,kBAAO,IAAmB;AAAA,OACtD;AAAA,KACF;AAEJ,CAAC;","names":[]}

package/dist/components/tooltip.js

@@ -1,10 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
+import { StyleSheet } from "react-native";
 import {
   useControllableState,
   useEventCallback,
   useTimer
 } from "@impulse-ui-native/core";
+import { useThemedStyles } from "@impulse-ui-native/theme";
 import { TooltipDuration } from "../constants/popover.constants";
 import { PopoverContent } from "./popover-content";
 import { PopoverDescription } from "./popover-description";
@@ -27,6 +29,7 @@ const Tooltip = memo(function Tooltip2({
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
+  const styles = useThemedStyles(themedStyles);
   const dismiss = useEventCallback(() => setOpen(false));
   useTimer({ enabled: open && !disabled, duration, callback: dismiss });
   return /* @__PURE__ */ jsxs(
@@ -37,14 +40,30 @@ const Tooltip = memo(function Tooltip2({
       onOpenChange: setOpen,
       disabled,
       placement,
-      surface: "inverse",
       children: [
         /* @__PURE__ */ jsx(PopoverTrigger, { trigger: "longPress", ...triggerProps, children }),
-        /* @__PURE__ */ jsx(PopoverContent, { children: typeof content === "string" || typeof content === "number" ? /* @__PURE__ */ jsx(PopoverDescription, { children: content }) : content })
+        /* @__PURE__ */ jsx(PopoverContent, { shadow: "sm", style: styles.content, children: typeof content === "string" || typeof content === "number" ? /* @__PURE__ */ jsx(PopoverDescription, { style: styles.description, children: content }) : content })
       ]
     }
   );
 });
+function themedStyles(theme) {
+  const tokens = theme.components.popover.tooltip;
+  return StyleSheet.create({
+    content: {
+      width: "auto",
+      backgroundColor: tokens.backgroundColor,
+      borderColor: tokens.backgroundColor,
+      borderWidth: 0,
+      borderRadius: tokens.borderRadius,
+      paddingHorizontal: tokens.paddingHorizontal,
+      paddingVertical: tokens.paddingVertical
+    },
+    description: {
+      color: tokens.color
+    }
+  });
+}
 export {
   Tooltip
 };

package/dist/components/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport {\n  useControllableState,\n  useEventCallback,\n  useTimer,\n} from \"@impulse-ui-native/core\";\n\nimport type { TooltipProps } from \"../types\";\nimport { TooltipDuration } from \"../constants/popover.constants\";\nimport { PopoverContent } from \"./popover-content\";\nimport { PopoverDescription } from \"./popover-description\";\nimport { PopoverRoot } from \"./popover-root\";\nimport { PopoverTrigger } from \"./popover-trigger\";\n\nexport const Tooltip = memo(function Tooltip({\n  children,\n  content,\n  triggerProps,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  disabled,\n  placement = \"top\",\n  duration = TooltipDuration,\n  ...props\n}: TooltipProps) {\n  const [open, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpen,\n    onChange: onOpenChange,\n  });\n\n  const dismiss = useEventCallback(() => setOpen(false));\n\n  useTimer({ enabled: open && !disabled, duration, callback: dismiss });\n\n  return (\n    <PopoverRoot\n      {...props}\n      open={open}\n      onOpenChange={setOpen}\n      disabled={disabled}\n      placement={placement}\n      surface=\"inverse\"\n    >\n      <PopoverTrigger trigger=\"longPress\" {...triggerProps}>\n        {children}\n      </PopoverTrigger>\n      <PopoverContent>\n        {typeof content === \"string\" || typeof content === \"number\" ? (\n          <PopoverDescription>{content}</PopoverDescription>\n        ) : (\n          content\n        )}\n      </PopoverContent>\n    </PopoverRoot>\n  );\n});\n"],"mappings":"AAsCI,SAQE,KARF;AAtCJ,SAAS,YAAY;AAErB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAExB,MAAM,UAAU,KAAK,SAASA,SAAQ;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,GAAG;AACL,GAAiB;AACf,QAAM,CAAC,MAAM,OAAO,IAAI,qBAAqB;AAAA,IAC3C,MAAM;AAAA,IACN,aAAa;AAAA,IACb,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,UAAU,iBAAiB,MAAM,QAAQ,KAAK,CAAC;AAErD,WAAS,EAAE,SAAS,QAAQ,CAAC,UAAU,UAAU,UAAU,QAAQ,CAAC;AAEpE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MAER;AAAA,4BAAC,kBAAe,SAAQ,aAAa,GAAG,cACrC,UACH;AAAA,QACA,oBAAC,kBACE,iBAAO,YAAY,YAAY,OAAO,YAAY,WACjD,oBAAC,sBAAoB,mBAAQ,IAE7B,SAEJ;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["Tooltip"]}
+{"version":3,"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { memo } from \"react\";\nimport { StyleSheet } from \"react-native\";\n\nimport type { AppTheme } from \"@impulse-ui-native/theme\";\nimport {\n  useControllableState,\n  useEventCallback,\n  useTimer,\n} from \"@impulse-ui-native/core\";\nimport { useThemedStyles } from \"@impulse-ui-native/theme\";\n\nimport type { TooltipProps } from \"../types\";\nimport { TooltipDuration } from \"../constants/popover.constants\";\nimport { PopoverContent } from \"./popover-content\";\nimport { PopoverDescription } from \"./popover-description\";\nimport { PopoverRoot } from \"./popover-root\";\nimport { PopoverTrigger } from \"./popover-trigger\";\n\nexport const Tooltip = memo(function Tooltip({\n  children,\n  content,\n  triggerProps,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  disabled,\n  placement = \"top\",\n  duration = TooltipDuration,\n  ...props\n}: TooltipProps) {\n  const [open, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpen,\n    onChange: onOpenChange,\n  });\n\n  const styles = useThemedStyles(themedStyles);\n\n  const dismiss = useEventCallback(() => setOpen(false));\n\n  useTimer({ enabled: open && !disabled, duration, callback: dismiss });\n\n  return (\n    <PopoverRoot\n      {...props}\n      open={open}\n      onOpenChange={setOpen}\n      disabled={disabled}\n      placement={placement}\n    >\n      <PopoverTrigger trigger=\"longPress\" {...triggerProps}>\n        {children}\n      </PopoverTrigger>\n      <PopoverContent shadow=\"sm\" style={styles.content}>\n        {typeof content === \"string\" || typeof content === \"number\" ? (\n          <PopoverDescription style={styles.description}>\n            {content}\n          </PopoverDescription>\n        ) : (\n          content\n        )}\n      </PopoverContent>\n    </PopoverRoot>\n  );\n});\n\nfunction themedStyles(theme: AppTheme) {\n  const tokens = theme.components.popover.tooltip;\n\n  return StyleSheet.create({\n    content: {\n      width: \"auto\",\n      backgroundColor: tokens.backgroundColor,\n      borderColor: tokens.backgroundColor,\n      borderWidth: 0,\n      borderRadius: tokens.borderRadius,\n      paddingHorizontal: tokens.paddingHorizontal,\n      paddingVertical: tokens.paddingVertical,\n    },\n    description: {\n      color: tokens.color,\n    },\n  });\n}\n"],"mappings":"AA2CI,SAOE,KAPF;AA3CJ,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAG3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAGhC,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAExB,MAAM,UAAU,KAAK,SAASA,SAAQ;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,GAAG;AACL,GAAiB;AACf,QAAM,CAAC,MAAM,OAAO,IAAI,qBAAqB;AAAA,IAC3C,MAAM;AAAA,IACN,aAAa;AAAA,IACb,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,SAAS,gBAAgB,YAAY;AAE3C,QAAM,UAAU,iBAAiB,MAAM,QAAQ,KAAK,CAAC;AAErD,WAAS,EAAE,SAAS,QAAQ,CAAC,UAAU,UAAU,UAAU,QAAQ,CAAC;AAEpE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,kBAAe,SAAQ,aAAa,GAAG,cACrC,UACH;AAAA,QACA,oBAAC,kBAAe,QAAO,MAAK,OAAO,OAAO,SACvC,iBAAO,YAAY,YAAY,OAAO,YAAY,WACjD,oBAAC,sBAAmB,OAAO,OAAO,aAC/B,mBACH,IAEA,SAEJ;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,SAAS,aAAa,OAAiB;AACrC,QAAM,SAAS,MAAM,WAAW,QAAQ;AAExC,SAAO,WAAW,OAAO;AAAA,IACvB,SAAS;AAAA,MACP,OAAO;AAAA,MACP,iBAAiB,OAAO;AAAA,MACxB,aAAa,OAAO;AAAA,MACpB,aAAa;AAAA,MACb,cAAc,OAAO;AAAA,MACrB,mBAAmB,OAAO;AAAA,MAC1B,iBAAiB,OAAO;AAAA,IAC1B;AAAA,IACA,aAAa;AAAA,MACX,OAAO,OAAO;AAAA,IAChB;AAAA,EACF,CAAC;AACH;","names":["Tooltip"]}

package/dist/hooks/use-popover-surface.hook.js

@@ -5,7 +5,7 @@ import { getPopoverPosition } from "../utils/popover-position.utils";
 import { usePopoverContext } from "./use-popover-context.hook";
 import { usePopoverPosition } from "./use-popover-position.hook";
 function usePopoverSurface(onLayout) {
-  const { surface, placement, setOpen } = usePopoverContext();
+  const { placement, setOpen } = usePopoverContext();
   const [size, setSize] = useState({ width: 0, height: 0 });
   const hostRef = useRef(null);
   const tokens = useComponentsTokens().popover;
@@ -22,8 +22,8 @@ function usePopoverSurface(onLayout) {
   );
   const ready = visible && size.width > 0 && size.height > 0;
   const styleProps = useMemo(
-    () => ({ surface, bounds, host: measurement?.host, position, ready }),
-    [surface, bounds, measurement?.host, position, ready]
+    () => ({ bounds, host: measurement?.host, position, ready }),
+    [bounds, measurement?.host, position, ready]
   );
   const close = useEventCallback(() => setOpen(false));
   const handleLayout = useEventCallback((event) => {

package/dist/hooks/use-popover-surface.hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/use-popover-surface.hook.ts"],"sourcesContent":["import type { LayoutChangeEvent, View } from \"react-native\";\nimport { useMemo, useRef, useState } from \"react\";\n\nimport { useBackHandler, useEventCallback } from \"@impulse-ui-native/core\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { PopoverContentProps } from \"../types\";\nimport type { PopoverSurfaceStyleProps } from \"../types/popover.types\";\nimport { getPopoverPosition } from \"../utils/popover-position.utils\";\nimport { usePopoverContext } from \"./use-popover-context.hook\";\nimport { usePopoverPosition } from \"./use-popover-position.hook\";\n\nexport function usePopoverSurface(onLayout: PopoverContentProps[\"onLayout\"]) {\n  const { surface, placement, setOpen } = usePopoverContext();\n\n  const [size, setSize] = useState({ width: 0, height: 0 });\n  const hostRef = useRef<View>(null);\n\n  const tokens = useComponentsTokens().popover;\n  const { measurement, bounds, visible } = usePopoverPosition(hostRef);\n\n  const position = useMemo(\n    () =>\n      measurement\n        ? getPopoverPosition({\n            anchor: measurement.anchor,\n            bounds,\n            ...size,\n            placement,\n            gap: tokens.gap,\n          })\n        : null,\n    [measurement, bounds, size, placement, tokens.gap],\n  );\n\n  const ready = visible && size.width > 0 && size.height > 0;\n  const styleProps = useMemo<PopoverSurfaceStyleProps>(\n    () => ({ surface, bounds, host: measurement?.host, position, ready }),\n    [surface, bounds, measurement?.host, position, ready],\n  );\n\n  const close = useEventCallback(() => setOpen(false));\n\n  const handleLayout = useEventCallback((event: LayoutChangeEvent) => {\n    const { width, height } = event.nativeEvent.layout;\n\n    setSize((previous) =>\n      previous.width === width && previous.height === height\n        ? previous\n        : { width, height },\n    );\n\n    onLayout?.(event);\n  });\n\n  useBackHandler(() => {\n    close();\n\n    return true;\n  });\n\n  return { hostRef, styleProps, close, handleLayout };\n}\n"],"mappings":"AACA,SAAS,SAAS,QAAQ,gBAAgB;AAE1C,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,2BAA2B;AAIpC,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AAE5B,SAAS,kBAAkB,UAA2C;AAC3E,QAAM,EAAE,SAAS,WAAW,QAAQ,IAAI,kBAAkB;AAE1D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE,OAAO,GAAG,QAAQ,EAAE,CAAC;AACxD,QAAM,UAAU,OAAa,IAAI;AAEjC,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,EAAE,aAAa,QAAQ,QAAQ,IAAI,mBAAmB,OAAO;AAEnE,QAAM,WAAW;AAAA,IACf,MACE,cACI,mBAAmB;AAAA,MACjB,QAAQ,YAAY;AAAA,MACpB;AAAA,MACA,GAAG;AAAA,MACH;AAAA,MACA,KAAK,OAAO;AAAA,IACd,CAAC,IACD;AAAA,IACN,CAAC,aAAa,QAAQ,MAAM,WAAW,OAAO,GAAG;AAAA,EACnD;AAEA,QAAM,QAAQ,WAAW,KAAK,QAAQ,KAAK,KAAK,SAAS;AACzD,QAAM,aAAa;AAAA,IACjB,OAAO,EAAE,SAAS,QAAQ,MAAM,aAAa,MAAM,UAAU,MAAM;AAAA,IACnE,CAAC,SAAS,QAAQ,aAAa,MAAM,UAAU,KAAK;AAAA,EACtD;AAEA,QAAM,QAAQ,iBAAiB,MAAM,QAAQ,KAAK,CAAC;AAEnD,QAAM,eAAe,iBAAiB,CAAC,UAA6B;AAClE,UAAM,EAAE,OAAO,OAAO,IAAI,MAAM,YAAY;AAE5C;AAAA,MAAQ,CAAC,aACP,SAAS,UAAU,SAAS,SAAS,WAAW,SAC5C,WACA,EAAE,OAAO,OAAO;AAAA,IACtB;AAEA,eAAW,KAAK;AAAA,EAClB,CAAC;AAED,iBAAe,MAAM;AACnB,UAAM;AAEN,WAAO;AAAA,EACT,CAAC;AAED,SAAO,EAAE,SAAS,YAAY,OAAO,aAAa;AACpD;","names":[]}
+{"version":3,"sources":["../../src/hooks/use-popover-surface.hook.ts"],"sourcesContent":["import type { LayoutChangeEvent, View } from \"react-native\";\nimport { useMemo, useRef, useState } from \"react\";\n\nimport { useBackHandler, useEventCallback } from \"@impulse-ui-native/core\";\nimport { useComponentsTokens } from \"@impulse-ui-native/theme\";\n\nimport type { PopoverContentProps } from \"../types\";\nimport type { PopoverSurfaceStyleProps } from \"../types/popover.types\";\nimport { getPopoverPosition } from \"../utils/popover-position.utils\";\nimport { usePopoverContext } from \"./use-popover-context.hook\";\nimport { usePopoverPosition } from \"./use-popover-position.hook\";\n\nexport function usePopoverSurface(onLayout: PopoverContentProps[\"onLayout\"]) {\n  const { placement, setOpen } = usePopoverContext();\n\n  const [size, setSize] = useState({ width: 0, height: 0 });\n  const hostRef = useRef<View>(null);\n\n  const tokens = useComponentsTokens().popover;\n  const { measurement, bounds, visible } = usePopoverPosition(hostRef);\n\n  const position = useMemo(\n    () =>\n      measurement\n        ? getPopoverPosition({\n            anchor: measurement.anchor,\n            bounds,\n            ...size,\n            placement,\n            gap: tokens.gap,\n          })\n        : null,\n    [measurement, bounds, size, placement, tokens.gap],\n  );\n\n  const ready = visible && size.width > 0 && size.height > 0;\n  const styleProps = useMemo<PopoverSurfaceStyleProps>(\n    () => ({ bounds, host: measurement?.host, position, ready }),\n    [bounds, measurement?.host, position, ready],\n  );\n\n  const close = useEventCallback(() => setOpen(false));\n\n  const handleLayout = useEventCallback((event: LayoutChangeEvent) => {\n    const { width, height } = event.nativeEvent.layout;\n\n    setSize((previous) =>\n      previous.width === width && previous.height === height\n        ? previous\n        : { width, height },\n    );\n\n    onLayout?.(event);\n  });\n\n  useBackHandler(() => {\n    close();\n\n    return true;\n  });\n\n  return { hostRef, styleProps, close, handleLayout };\n}\n"],"mappings":"AACA,SAAS,SAAS,QAAQ,gBAAgB;AAE1C,SAAS,gBAAgB,wBAAwB;AACjD,SAAS,2BAA2B;AAIpC,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AAE5B,SAAS,kBAAkB,UAA2C;AAC3E,QAAM,EAAE,WAAW,QAAQ,IAAI,kBAAkB;AAEjD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE,OAAO,GAAG,QAAQ,EAAE,CAAC;AACxD,QAAM,UAAU,OAAa,IAAI;AAEjC,QAAM,SAAS,oBAAoB,EAAE;AACrC,QAAM,EAAE,aAAa,QAAQ,QAAQ,IAAI,mBAAmB,OAAO;AAEnE,QAAM,WAAW;AAAA,IACf,MACE,cACI,mBAAmB;AAAA,MACjB,QAAQ,YAAY;AAAA,MACpB;AAAA,MACA,GAAG;AAAA,MACH;AAAA,MACA,KAAK,OAAO;AAAA,IACd,CAAC,IACD;AAAA,IACN,CAAC,aAAa,QAAQ,MAAM,WAAW,OAAO,GAAG;AAAA,EACnD;AAEA,QAAM,QAAQ,WAAW,KAAK,QAAQ,KAAK,KAAK,SAAS;AACzD,QAAM,aAAa;AAAA,IACjB,OAAO,EAAE,QAAQ,MAAM,aAAa,MAAM,UAAU,MAAM;AAAA,IAC1D,CAAC,QAAQ,aAAa,MAAM,UAAU,KAAK;AAAA,EAC7C;AAEA,QAAM,QAAQ,iBAAiB,MAAM,QAAQ,KAAK,CAAC;AAEnD,QAAM,eAAe,iBAAiB,CAAC,UAA6B;AAClE,UAAM,EAAE,OAAO,OAAO,IAAI,MAAM,YAAY;AAE5C;AAAA,MAAQ,CAAC,aACP,SAAS,UAAU,SAAS,SAAS,WAAW,SAC5C,WACA,EAAE,OAAO,OAAO;AAAA,IACtB;AAEA,eAAW,KAAK;AAAA,EAClB,CAAC;AAED,iBAAe,MAAM;AACnB,UAAM;AAEN,WAAO;AAAA,EACT,CAAC;AAED,SAAO,EAAE,SAAS,YAAY,OAAO,aAAa;AACpD;","names":[]}

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 export { Popover } from './components/index.mjs';
-export { PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverPlacement, PopoverProps, PopoverRootProps, PopoverSurface, PopoverTitleProps, PopoverTriggerProps, TooltipProps } from './types/popover.types.mjs';
+export { PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverFooterProps, PopoverHeaderProps, PopoverPlacement, PopoverProps, PopoverRootProps, PopoverTitleProps, PopoverTriggerProps, TooltipProps } from './types/popover.types.mjs';
 export { Tooltip } from './components/tooltip.mjs';
 import 'react/jsx-runtime';
 import 'react';

package/dist/types/index.d.mts

@@ -1,4 +1,4 @@
-export { PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverPlacement, PopoverProps, PopoverRootProps, PopoverSurface, PopoverTitleProps, PopoverTriggerProps, TooltipProps } from './popover.types.mjs';
+export { PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverFooterProps, PopoverHeaderProps, PopoverPlacement, PopoverProps, PopoverRootProps, PopoverTitleProps, PopoverTriggerProps, TooltipProps } from './popover.types.mjs';
 import 'react';
 import 'react-native';
 import '@impulse-ui-native/primitives';

package/dist/types/popover.types.d.mts

@@ -3,29 +3,33 @@ import { View } from 'react-native';
 import { PressableCoreProps, ViewProps, TextProps } from '@impulse-ui-native/primitives';
 
 type PopoverPlacement = "top" | "bottom" | "left" | "right";
-type PopoverSurface = "elevated" | "inverse";
 interface PopoverRootProps extends PropsWithChildren {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     disabled?: boolean;
     placement?: PopoverPlacement;
-    surface?: PopoverSurface;
     portalName?: string;
 }
 interface PopoverTriggerProps extends Omit<PressableCoreProps, "children">, PropsWithChildren {
     trigger?: "press" | "longPress";
 }
 type PopoverContentProps = ViewProps;
+type PopoverHeaderProps = ViewProps;
+type PopoverFooterProps = ViewProps;
 type PopoverTitleProps = TextProps;
 type PopoverDescriptionProps = TextProps;
 type PopoverCloseProps = Omit<PressableCoreProps, "children"> & PropsWithChildren;
 interface PopoverProps extends PopoverRootProps {
+    title?: ReactNode;
+    header?: ReactNode;
+    footer?: ReactNode;
+    hideClose?: boolean;
     trigger: ReactNode;
     triggerProps?: PopoverTriggerProps;
     contentProps?: PopoverContentProps;
 }
-interface TooltipProps extends Omit<PopoverRootProps, "surface"> {
+interface TooltipProps extends PopoverRootProps {
     content: ReactNode;
     triggerProps?: PopoverTriggerProps;
     /** Milliseconds before dismissal. Zero keeps the hint open. */
@@ -37,7 +41,6 @@ interface PopoverContextValue {
     setOpen: (open: boolean) => void;
     anchorRef: RefObject<View | null>;
     placement: PopoverPlacement;
-    surface: PopoverSurface;
     portalName?: string;
 }
 interface PopoverRect {
@@ -60,11 +63,10 @@ interface PopoverPositionOptions {
     gap: number;
 }
 interface PopoverSurfaceStyleProps {
-    surface: PopoverSurface;
     bounds: PopoverRect;
     host?: PopoverRect;
     position: PopoverPosition | null;
     ready: boolean;
 }
 
-export type { PopoverCloseProps, PopoverContentProps, PopoverContextValue, PopoverDescriptionProps, PopoverPlacement, PopoverPosition, PopoverPositionOptions, PopoverProps, PopoverRect, PopoverRootProps, PopoverSurface, PopoverSurfaceStyleProps, PopoverTitleProps, PopoverTriggerProps, TooltipProps };
+export type { PopoverCloseProps, PopoverContentProps, PopoverContextValue, PopoverDescriptionProps, PopoverFooterProps, PopoverHeaderProps, PopoverPlacement, PopoverPosition, PopoverPositionOptions, PopoverProps, PopoverRect, PopoverRootProps, PopoverSurfaceStyleProps, PopoverTitleProps, PopoverTriggerProps, TooltipProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@impulse-ui-native/popover",
-  "version": "6.3.1",
+  "version": "7.0.0",
   "description": "Portal-rendered tooltips and compound anchored popovers for ImpulseUI Native.",
   "keywords": [
     "react-native",
@@ -27,10 +27,11 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@impulse-ui-native/theme": "6.3.1",
-    "@impulse-ui-native/core": "6.3.1",
-    "@impulse-ui-native/portal": "6.3.1",
-    "@impulse-ui-native/primitives": "6.3.1"
+    "@impulse-ui-native/icon": "7.0.0",
+    "@impulse-ui-native/primitives": "7.0.0",
+    "@impulse-ui-native/theme": "7.0.0",
+    "@impulse-ui-native/core": "7.0.0",
+    "@impulse-ui-native/portal": "7.0.0"
   },
   "devDependencies": {
     "@types/react": "~19.2.14",
@@ -41,8 +42,8 @@
     "react-native-safe-area-context": "~5.7.0",
     "typescript": "~6.0.3",
     "@impulse-ui-native/eslint-config": "1.0.0",
-    "@impulse-ui-native/prettier-config": "1.0.0",
-    "@impulse-ui-native/tsconfig": "1.0.0"
+    "@impulse-ui-native/tsconfig": "1.0.0",
+    "@impulse-ui-native/prettier-config": "1.0.0"
   },
   "peerDependencies": {
     "react": ">=18",