@bacon-pos/ui 0.6.0 → 0.7.1

package/lib/typescript/module/components/Menu/SelectButton.d.ts

@@ -1,6 +1,6 @@
 import { type ButtonSize, type ButtonVariant } from '../Button/Button';
 import type { IconName } from '../Icon/icons.generated';
-import { type MenuOrigin } from './Menu';
+import { type EdgeInsets, type MenuOrigin } from './Menu';
 /** A selectable option. Its `icon` shows both in the row and on the trigger when chosen. */
 export interface SelectButtonOption {
     key: string;
@@ -39,6 +39,10 @@ export interface SelectButtonProps {
     menuOrigin?: MenuOrigin;
     /** Gap between trigger and menu. Defaults to 8. */
     offset?: number;
+    /** Safe-area insets to keep clear. */
+    insets?: EdgeInsets;
+    /** Status-bar coordinate offset for the menu (see `Menu`). Pass 0 when immersive. */
+    statusBarHeight?: number;
     /** Menu width. Defaults to the `Dropdown` default (350). */
     menuWidth?: number;
     /** Draw dividers between rows. Defaults to the `Dropdown` default (true). */
@@ -56,5 +60,5 @@ export interface SelectButtonProps {
  * A composed component built from `Button` + `Menu` + `Dropdown`. Controlled via
  * `value` / `onChange`, or uncontrolled via `defaultValue`.
  */
-export declare function SelectButton({ options, value: valueProp, defaultValue, onChange, placeholder, placeholderIcon, showSelectedIcon, chevron, variant, size, fullWidth, disabled, anchorOrigin, menuOrigin, offset, menuWidth, showDividers, closeOnSelect, open, onOpenChange, }: SelectButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function SelectButton({ options, value: valueProp, defaultValue, onChange, placeholder, placeholderIcon, showSelectedIcon, chevron, variant, size, fullWidth, disabled, anchorOrigin, menuOrigin, offset, insets, statusBarHeight, menuWidth, showDividers, closeOnSelect, open, onOpenChange, }: SelectButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SelectButton.d.ts.map

package/lib/typescript/module/components/Menu/SelectButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/SelectButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAG/E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,QAAQ,CAAC;AAE/C,4FAA4F;AAC5F,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,kCAAkC;IAClC,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sFAAsF;IACtF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,sCAAsC;IACtC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,2EAA2E;IAC3E,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wDAAwD;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gDAAgD;IAChD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAqBD;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,QAAQ,EACR,WAAsB,EACtB,eAAe,EACf,gBAAuB,EACvB,OAAe,EACf,OAAqB,EACrB,IAAW,EACX,SAAiB,EACjB,QAAgB,EAChB,YAAyD,EACzD,UAAoD,EACpD,MAAU,EACV,SAAS,EACT,YAAY,EACZ,aAAoB,EACpB,IAAI,EACJ,YAAY,GACb,EAAE,iBAAiB,2CAiEnB"}
+{"version":3,"file":"SelectButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/SelectButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAG/E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAQ,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEhE,4FAA4F;AAC5F,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,kCAAkC;IAClC,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sFAAsF;IACtF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,sCAAsC;IACtC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gFAAgF;IAChF,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,2EAA2E;IAC3E,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,qFAAqF;IACrF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wDAAwD;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gDAAgD;IAChD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAqBD;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,QAAQ,EACR,WAAsB,EACtB,eAAe,EACf,gBAAuB,EACvB,OAAe,EACf,OAAqB,EACrB,IAAW,EACX,SAAiB,EACjB,QAAgB,EAChB,YAAyD,EACzD,UAAoD,EACpD,MAAU,EACV,MAAM,EACN,eAAe,EACf,SAAS,EACT,YAAY,EACZ,aAAoB,EACpB,IAAI,EACJ,YAAY,GACb,EAAE,iBAAiB,2CAmEnB"}

package/lib/typescript/module/components/Menu/UserMenu.d.ts

@@ -0,0 +1,50 @@
+import type { ImageSourcePropType } from 'react-native';
+import { type DropdownEntry } from '../Dropdown/Dropdown';
+import { type UserChipSize } from '../UserChip/UserChip';
+import { type EdgeInsets, type MenuOrigin } from './Menu';
+export interface UserMenuProps {
+    /** The menu rows (see `Dropdown`). */
+    options: DropdownEntry[];
+    /** Called with the key of the selected row. */
+    onSelect?: (key: string) => void;
+    /** Avatar image for the trigger. */
+    source?: ImageSourcePropType;
+    /** Name for the trigger. With a name the trigger is the `UserChip` pill; without it, just the avatar. */
+    name?: string;
+    /** Explicit avatar initials. */
+    initials?: string;
+    /** Trigger size. Defaults to `md`. */
+    size?: UserChipSize;
+    /** Trigger pill background (when a name is shown). */
+    chipBackgroundColor?: string;
+    /** Trigger text color (when a name is shown). */
+    chipColor?: string;
+    /** Point on the trigger the menu latches to. Defaults to `{ bottom, left }`. */
+    anchorOrigin?: MenuOrigin;
+    /** Point on the menu placed at the anchor. Defaults to `{ top, left }`. */
+    menuOrigin?: MenuOrigin;
+    /** Gap between trigger and menu. Defaults to 8. */
+    offset?: number;
+    /** Safe-area insets to keep clear. */
+    insets?: EdgeInsets;
+    /** Status-bar coordinate offset for the menu (see `Menu`). Pass 0 when immersive. */
+    statusBarHeight?: number;
+    /** Menu width. Defaults to the `Dropdown` default (350). */
+    menuWidth?: number;
+    /** Draw dividers between rows. Defaults to the `Dropdown` default (true). */
+    showDividers?: boolean;
+    /** Close the menu after a row is selected. Defaults to true. */
+    closeOnSelect?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Notified whenever the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * User menu — an avatar / `UserChip` that opens an anchored `Dropdown` (e.g. an
+ * account menu). A composed component built from `UserChip` + `Menu` +
+ * `Dropdown`. Pass a `name` to use the labelled pill as the trigger, or omit it
+ * for just the avatar. Dismisses on outside press / back button.
+ */
+export declare function UserMenu({ options, onSelect, source, name, initials, size, chipBackgroundColor, chipColor, anchorOrigin, menuOrigin, offset, insets, statusBarHeight, menuWidth, showDividers, closeOnSelect, open, onOpenChange, }: UserMenuProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UserMenu.d.ts.map

package/lib/typescript/module/components/Menu/UserMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/UserMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACnE,OAAO,EAAQ,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEhE,MAAM,WAAW,aAAa;IAC5B,sCAAsC;IACtC,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC,oCAAoC;IACpC,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,yGAAyG;IACzG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,sDAAsD;IACtD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gFAAgF;IAChF,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,2EAA2E;IAC3E,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,qFAAqF;IACrF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gEAAgE;IAChE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gDAAgD;IAChD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,IAAW,EACX,mBAAmB,EACnB,SAAS,EACT,YAAyD,EACzD,UAAoD,EACpD,MAAU,EACV,MAAM,EACN,eAAe,EACf,SAAS,EACT,YAAY,EACZ,aAAoB,EACpB,IAAI,EACJ,YAAY,GACb,EAAE,aAAa,2CAoCf"}

package/lib/typescript/module/components/Menu/index.d.ts

@@ -4,4 +4,6 @@ export { MenuButton } from './MenuButton';
 export type { MenuButtonProps } from './MenuButton';
 export { SelectButton } from './SelectButton';
 export type { SelectButtonProps, SelectButtonOption } from './SelectButton';
+export { UserMenu } from './UserMenu';
+export type { UserMenuProps } from './UserMenu';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/components/Menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EACV,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,gBAAgB,GACjB,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EACV,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,gBAAgB,GACjB,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/lib/typescript/module/components/Menu/placement.d.ts

@@ -0,0 +1,47 @@
+import type { EdgeInsets, MenuOrigin } from './Menu';
+export interface PlacementInput {
+    /** Trigger rect in window coordinates (as returned by `measureInWindow`). */
+    rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    /** Measured menu size (0 before the first layout). */
+    menuWidth: number;
+    menuHeight: number;
+    /** The content's natural (uncapped) height — drives the flip / cap decisions. */
+    naturalHeight: number;
+    anchorOrigin: MenuOrigin;
+    menuOrigin: MenuOrigin;
+    offset: number;
+    screenPadding: number;
+    insets: EdgeInsets;
+    /** Window size (`Dimensions.get('window')`). */
+    screenWidth: number;
+    screenHeight: number;
+    /**
+     * Difference between the window's coordinate origin (where `measureInWindow`
+     * reports) and the full-screen Modal's origin. On Android with a translucent
+     * status bar this is the status bar height; 0 on iOS / web / immersive.
+     */
+    statusBarHeight: number;
+    autoFit: boolean;
+}
+export interface Placement {
+    top: number;
+    left: number;
+    /** Auto-fit cap for the content so it scrolls instead of overflowing. */
+    maxHeight?: number;
+}
+/**
+ * Pure placement math for `Menu`. Kept side-effect-free so it can be unit-tested
+ * exhaustively (status-bar offset, flip, cap, clamp) independent of RN layout.
+ *
+ * The key correctness point: the trigger is measured in *window* coordinates but
+ * the menu is painted in a full-screen (`statusBarTranslucent`) Modal, so we add
+ * `statusBarHeight` when converting the trigger position into the Modal's space.
+ * Available-space math cancels the offset out, so it uses window coordinates.
+ */
+export declare function computeMenuPlacement(input: PlacementInput): Placement;
+//# sourceMappingURL=placement.d.ts.map

package/lib/typescript/module/components/Menu/placement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"placement.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/placement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAKrD,MAAM,WAAW,cAAc;IAC7B,6EAA6E;IAC7E,IAAI,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,sDAAsD;IACtD,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,UAAU,CAAC;IACzB,UAAU,EAAE,UAAU,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,UAAU,CAAC;IACnB,gDAAgD;IAChD,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,cAAc,GAAG,SAAS,CAuDrE"}

package/lib/typescript/module/components/Menu/placement.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=placement.test.d.ts.map

package/lib/typescript/module/components/Menu/placement.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"placement.test.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menu/placement.test.ts"],"names":[],"mappings":""}

package/lib/typescript/module/components/Select/Select.d.ts

@@ -57,6 +57,8 @@ export interface SelectProps {
     autoFit?: boolean;
     /** Safe-area insets to keep clear. */
     insets?: EdgeInsets;
+    /** Status-bar coordinate offset for the menu (see `Menu`). Pass 0 when immersive. */
+    statusBarHeight?: number;
     /** Close after selecting. Defaults to `!multiple`. */
     closeOnSelect?: boolean;
     /** Container style. */
@@ -69,5 +71,5 @@ export interface SelectProps {
  * current option is marked with a check. With `multiple`, rows become checkboxes,
  * the value is an array, and the menu stays open while picking.
  */
-export declare function Select({ options, multiple, value, defaultValue, onChange, label, helperText, error, placeholder, leftIcon, size, width, fullWidth, disabled, renderValue, matchTriggerWidth, menuWidth, maxHeight, anchorOrigin, menuOrigin, offset, autoFit, insets, closeOnSelect, style, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function Select({ options, multiple, value, defaultValue, onChange, label, helperText, error, placeholder, leftIcon, size, width, fullWidth, disabled, renderValue, matchTriggerWidth, menuWidth, maxHeight, anchorOrigin, menuOrigin, offset, autoFit, insets, statusBarHeight, closeOnSelect, style, }: SelectProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Select.d.ts.map

package/lib/typescript/module/components/Select/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAKtB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAQ,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAiBtE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAUrC,+BAA+B;AAC/B,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,kCAAkC;IAClC,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC,gFAAgF;IAChF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAE9C,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2FAA2F;IAC3F,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8FAA8F;IAC9F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,EAAE,KAAK,MAAM,CAAC;IAEnD,iEAAiE;IACjE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,2EAA2E;IAC3E,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,sDAAsD;IACtD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uBAAuB;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;GAMG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,QAAgB,EAChB,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAK,EACL,WAA6B,EAC7B,QAAQ,EACR,IAAW,EACX,KAAK,EACL,SAAgB,EAChB,QAAgB,EAChB,WAAW,EACX,iBAAwB,EACxB,SAAS,EACT,SAAS,EACT,YAAyD,EACzD,UAAoD,EACpD,MAAU,EACV,OAAc,EACd,MAAM,EACN,aAAa,EACb,KAAK,GACN,EAAE,WAAW,2CAyLb"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/Select.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bacon-pos/ui",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "Bacon POS design system — React Native component library",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",

package/src/components/Menu/Menu.tsx

@@ -6,11 +6,13 @@ import {
   Modal,
   Platform,
   Pressable,
+  StatusBar,
   View,
   type LayoutChangeEvent,
   type StyleProp,
   type ViewStyle,
 } from 'react-native';
+import { computeMenuPlacement } from './placement';
 
 export type OriginVertical = 'top' | 'center' | 'bottom';
 export type OriginHorizontal = 'left' | 'center' | 'right';
@@ -21,9 +23,6 @@ export interface MenuOrigin {
   horizontal: OriginHorizontal;
 }
 
-const V_FRAC: Record<OriginVertical, number> = { top: 0, center: 0.5, bottom: 1 };
-const H_FRAC: Record<OriginHorizontal, number> = { left: 0, center: 0.5, right: 1 };
-
 /** State handed to the trigger renderer and (optionally) the content renderer. */
 export interface MenuTriggerState {
   open: boolean;
@@ -56,6 +55,12 @@ export interface MenuProps {
   autoFit?: boolean;
   /** Safe-area insets to keep clear (pass from `react-native-safe-area-context` if you use it). */
   insets?: EdgeInsets;
+  /**
+   * Offset between window coordinates (where the trigger is measured) and the
+   * full-screen Modal the menu paints into. Defaults to the Android status bar
+   * height (0 on iOS / web). Pass 0 when the host runs edge-to-edge / immersive.
+   */
+  statusBarHeight?: number;
   /** Controlled open state. Omit for uncontrolled. */
   open?: boolean;
   /** Notified whenever the open state changes. */
@@ -75,6 +80,9 @@ export interface EdgeInsets {
 
 const ZERO_INSETS: EdgeInsets = { top: 0, right: 0, bottom: 0, left: 0 };
 
+/** Default coordinate offset for the translucent Modal (Android status bar). */
+const DEFAULT_STATUS_BAR_HEIGHT = Platform.OS === 'android' ? StatusBar.currentHeight ?? 0 : 0;
+
 interface Rect {
   x: number;
   y: number;
@@ -82,11 +90,6 @@ interface Rect {
   height: number;
 }
 
-function clamp(value: number, min: number, max: number): number {
-  if (max < min) return min;
-  return Math.min(Math.max(value, min), max);
-}
-
 /**
  * Anchored overlay menu. Renders a trigger inline and, when open, a floating
  * panel positioned relative to the trigger via two origins — `anchorOrigin`
@@ -102,6 +105,7 @@ export function Menu({
   offset = 8,
   autoFit = true,
   insets = ZERO_INSETS,
+  statusBarHeight = DEFAULT_STATUS_BAR_HEIGHT,
   open: openProp,
   onOpenChange,
   screenPadding = 8,
@@ -161,44 +165,31 @@ export function Menu({
     if (naturalHeight === null) setNaturalHeight(height);
   };
 
-  // Auto-fit: choose a vertical direction with room and cap the height so the
-  // menu never runs off-screen. Only meaningful for a "drop" origin config
-  // (top↔bottom); otherwise we keep the origins as given.
-  const isDropConfig =
-    (anchorOrigin.vertical === 'bottom' && menuOrigin.vertical === 'top') ||
-    (anchorOrigin.vertical === 'top' && menuOrigin.vertical === 'bottom');
-  const preferredUp = anchorOrigin.vertical === 'top' && menuOrigin.vertical === 'bottom';
-
-  let effAnchor = anchorOrigin;
-  let effMenu = menuOrigin;
-  let autoMaxHeight: number | undefined;
-
-  if (autoFit && isDropConfig && rect && naturalHeight !== null) {
-    const screen = Dimensions.get('window');
-    const spaceBelow = screen.height - insets.bottom - (rect.y + rect.height) - offset - screenPadding;
-    const spaceAbove = rect.y - insets.top - offset - screenPadding;
-    let up = preferredUp;
-    if (!preferredUp) up = naturalHeight > spaceBelow && spaceAbove > spaceBelow;
-    else up = !(naturalHeight > spaceAbove && spaceBelow > spaceAbove);
-    const chosen = up ? spaceAbove : spaceBelow;
-    if (naturalHeight > chosen && chosen > 0) autoMaxHeight = chosen;
-    effAnchor = { horizontal: anchorOrigin.horizontal, vertical: up ? 'top' : 'bottom' };
-    effMenu = { horizontal: menuOrigin.horizontal, vertical: up ? 'bottom' : 'top' };
-  }
-
-  let top = 0;
-  let left = 0;
-  if (rect && menuSize) {
-    const screen = Dimensions.get('window');
-    const anchorX = rect.x + H_FRAC[effAnchor.horizontal] * rect.width;
-    const anchorY = rect.y + V_FRAC[effAnchor.vertical] * rect.height;
-    const offsetY =
-      effMenu.vertical === 'top' ? offset : effMenu.vertical === 'bottom' ? -offset : 0;
-    left = anchorX - H_FRAC[effMenu.horizontal] * menuSize.width;
-    top = anchorY - V_FRAC[effMenu.vertical] * menuSize.height + offsetY;
-    left = clamp(left, screenPadding + insets.left, screen.width - insets.right - menuSize.width - screenPadding);
-    top = clamp(top, screenPadding + insets.top, screen.height - insets.bottom - menuSize.height - screenPadding);
-  }
+  // All positioning math lives in the pure `computeMenuPlacement` (unit-tested):
+  // it applies the status-bar offset, auto-fit flip, height cap and screen clamp.
+  const screen = Dimensions.get('window');
+  const placement =
+    rect && naturalHeight !== null
+      ? computeMenuPlacement({
+          rect,
+          menuWidth: menuSize?.width ?? 0,
+          menuHeight: menuSize?.height ?? naturalHeight,
+          naturalHeight,
+          anchorOrigin,
+          menuOrigin,
+          offset,
+          screenPadding,
+          insets,
+          screenWidth: screen.width,
+          screenHeight: screen.height,
+          statusBarHeight,
+          autoFit,
+        })
+      : null;
+
+  const top = placement?.top ?? 0;
+  const left = placement?.left ?? 0;
+  const autoMaxHeight = placement?.maxHeight;
 
   const placed = Boolean(rect && menuSize);
   const content =

package/src/components/Menu/MenuButton.tsx

@@ -1,7 +1,7 @@
 import { Dropdown, type DropdownEntry } from '../Dropdown/Dropdown';
 import { IconButton, type IconButtonShape, type IconButtonSize, type IconButtonVariant } from '../IconButton/IconButton';
 import type { IconName } from '../Icon/icons.generated';
-import { Menu, type MenuOrigin } from './Menu';
+import { Menu, type EdgeInsets, type MenuOrigin } from './Menu';
 
 export interface MenuButtonProps {
   /** The menu rows (see `Dropdown`). */
@@ -26,6 +26,10 @@ export interface MenuButtonProps {
   menuOrigin?: MenuOrigin;
   /** Gap between trigger and menu. Defaults to 8. */
   offset?: number;
+  /** Safe-area insets to keep clear. */
+  insets?: EdgeInsets;
+  /** Status-bar coordinate offset for the menu (see `Menu`). Pass 0 when immersive. */
+  statusBarHeight?: number;
   /** Menu width. Defaults to the `Dropdown` default (350). */
   menuWidth?: number;
   /** Draw dividers between rows. Defaults to the `Dropdown` default (true). */
@@ -56,6 +60,8 @@ export function MenuButton({
   anchorOrigin = { vertical: 'bottom', horizontal: 'right' },
   menuOrigin = { vertical: 'top', horizontal: 'right' },
   offset = 8,
+  insets,
+  statusBarHeight,
   menuWidth,
   showDividers,
   closeOnSelect = true,
@@ -67,6 +73,8 @@ export function MenuButton({
       anchorOrigin={anchorOrigin}
       menuOrigin={menuOrigin}
       offset={offset}
+      insets={insets}
+      statusBarHeight={statusBarHeight}
       open={open}
       onOpenChange={onOpenChange}
       renderTrigger={({ toggle }) => (

package/src/components/Menu/SelectButton.tsx

@@ -4,7 +4,7 @@ import { Button, type ButtonSize, type ButtonVariant } from '../Button/Button';
 import { Dropdown, type DropdownEntry } from '../Dropdown/Dropdown';
 import { Icon } from '../Icon/Icon';
 import type { IconName } from '../Icon/icons.generated';
-import { Menu, type MenuOrigin } from './Menu';
+import { Menu, type EdgeInsets, type MenuOrigin } from './Menu';
 
 /** A selectable option. Its `icon` shows both in the row and on the trigger when chosen. */
 export interface SelectButtonOption {
@@ -45,6 +45,10 @@ export interface SelectButtonProps {
   menuOrigin?: MenuOrigin;
   /** Gap between trigger and menu. Defaults to 8. */
   offset?: number;
+  /** Safe-area insets to keep clear. */
+  insets?: EdgeInsets;
+  /** Status-bar coordinate offset for the menu (see `Menu`). Pass 0 when immersive. */
+  statusBarHeight?: number;
   /** Menu width. Defaults to the `Dropdown` default (350). */
   menuWidth?: number;
   /** Draw dividers between rows. Defaults to the `Dropdown` default (true). */
@@ -98,6 +102,8 @@ export function SelectButton({
   anchorOrigin = { vertical: 'bottom', horizontal: 'left' },
   menuOrigin = { vertical: 'top', horizontal: 'left' },
   offset = 8,
+  insets,
+  statusBarHeight,
   menuWidth,
   showDividers,
   closeOnSelect = true,
@@ -134,6 +140,8 @@ export function SelectButton({
       anchorOrigin={anchorOrigin}
       menuOrigin={menuOrigin}
       offset={offset}
+      insets={insets}
+      statusBarHeight={statusBarHeight}
       open={open}
       onOpenChange={onOpenChange}
       triggerStyle={fullWidth ? { alignSelf: 'stretch' } : undefined}

package/src/components/Menu/UserMenu.tsx

@@ -0,0 +1,108 @@
+import type { ImageSourcePropType } from 'react-native';
+import { Dropdown, type DropdownEntry } from '../Dropdown/Dropdown';
+import { UserChip, type UserChipSize } from '../UserChip/UserChip';
+import { Menu, type EdgeInsets, type MenuOrigin } from './Menu';
+
+export interface UserMenuProps {
+  /** The menu rows (see `Dropdown`). */
+  options: DropdownEntry[];
+  /** Called with the key of the selected row. */
+  onSelect?: (key: string) => void;
+
+  /** Avatar image for the trigger. */
+  source?: ImageSourcePropType;
+  /** Name for the trigger. With a name the trigger is the `UserChip` pill; without it, just the avatar. */
+  name?: string;
+  /** Explicit avatar initials. */
+  initials?: string;
+  /** Trigger size. Defaults to `md`. */
+  size?: UserChipSize;
+  /** Trigger pill background (when a name is shown). */
+  chipBackgroundColor?: string;
+  /** Trigger text color (when a name is shown). */
+  chipColor?: string;
+
+  /** Point on the trigger the menu latches to. Defaults to `{ bottom, left }`. */
+  anchorOrigin?: MenuOrigin;
+  /** Point on the menu placed at the anchor. Defaults to `{ top, left }`. */
+  menuOrigin?: MenuOrigin;
+  /** Gap between trigger and menu. Defaults to 8. */
+  offset?: number;
+  /** Safe-area insets to keep clear. */
+  insets?: EdgeInsets;
+  /** Status-bar coordinate offset for the menu (see `Menu`). Pass 0 when immersive. */
+  statusBarHeight?: number;
+  /** Menu width. Defaults to the `Dropdown` default (350). */
+  menuWidth?: number;
+  /** Draw dividers between rows. Defaults to the `Dropdown` default (true). */
+  showDividers?: boolean;
+  /** Close the menu after a row is selected. Defaults to true. */
+  closeOnSelect?: boolean;
+  /** Controlled open state. */
+  open?: boolean;
+  /** Notified whenever the open state changes. */
+  onOpenChange?: (open: boolean) => void;
+}
+
+/**
+ * User menu — an avatar / `UserChip` that opens an anchored `Dropdown` (e.g. an
+ * account menu). A composed component built from `UserChip` + `Menu` +
+ * `Dropdown`. Pass a `name` to use the labelled pill as the trigger, or omit it
+ * for just the avatar. Dismisses on outside press / back button.
+ */
+export function UserMenu({
+  options,
+  onSelect,
+  source,
+  name,
+  initials,
+  size = 'md',
+  chipBackgroundColor,
+  chipColor,
+  anchorOrigin = { vertical: 'bottom', horizontal: 'left' },
+  menuOrigin = { vertical: 'top', horizontal: 'left' },
+  offset = 8,
+  insets,
+  statusBarHeight,
+  menuWidth,
+  showDividers,
+  closeOnSelect = true,
+  open,
+  onOpenChange,
+}: UserMenuProps) {
+  return (
+    <Menu
+      anchorOrigin={anchorOrigin}
+      menuOrigin={menuOrigin}
+      offset={offset}
+      insets={insets}
+      statusBarHeight={statusBarHeight}
+      open={open}
+      onOpenChange={onOpenChange}
+      renderTrigger={({ toggle }) => (
+        <UserChip
+          source={source}
+          name={name}
+          initials={initials}
+          size={size}
+          backgroundColor={chipBackgroundColor}
+          color={chipColor}
+          onPress={toggle}
+        />
+      )}
+    >
+      {({ close, maxHeight }) => (
+        <Dropdown
+          options={options}
+          width={menuWidth}
+          maxHeight={maxHeight}
+          showDividers={showDividers}
+          onSelect={(key) => {
+            onSelect?.(key);
+            if (closeOnSelect) close();
+          }}
+        />
+      )}
+    </Menu>
+  );
+}

package/src/components/Menu/index.ts

@@ -10,3 +10,5 @@ export { MenuButton } from './MenuButton';
 export type { MenuButtonProps } from './MenuButton';
 export { SelectButton } from './SelectButton';
 export type { SelectButtonProps, SelectButtonOption } from './SelectButton';
+export { UserMenu } from './UserMenu';
+export type { UserMenuProps } from './UserMenu';

package/src/components/Menu/placement.ts

@@ -0,0 +1,107 @@
+import type { EdgeInsets, MenuOrigin } from './Menu';
+
+const V_FRAC = { top: 0, center: 0.5, bottom: 1 } as const;
+const H_FRAC = { left: 0, center: 0.5, right: 1 } as const;
+
+export interface PlacementInput {
+  /** Trigger rect in window coordinates (as returned by `measureInWindow`). */
+  rect: { x: number; y: number; width: number; height: number };
+  /** Measured menu size (0 before the first layout). */
+  menuWidth: number;
+  menuHeight: number;
+  /** The content's natural (uncapped) height — drives the flip / cap decisions. */
+  naturalHeight: number;
+  anchorOrigin: MenuOrigin;
+  menuOrigin: MenuOrigin;
+  offset: number;
+  screenPadding: number;
+  insets: EdgeInsets;
+  /** Window size (`Dimensions.get('window')`). */
+  screenWidth: number;
+  screenHeight: number;
+  /**
+   * Difference between the window's coordinate origin (where `measureInWindow`
+   * reports) and the full-screen Modal's origin. On Android with a translucent
+   * status bar this is the status bar height; 0 on iOS / web / immersive.
+   */
+  statusBarHeight: number;
+  autoFit: boolean;
+}
+
+export interface Placement {
+  top: number;
+  left: number;
+  /** Auto-fit cap for the content so it scrolls instead of overflowing. */
+  maxHeight?: number;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  if (max < min) return min;
+  return Math.min(Math.max(value, min), max);
+}
+
+/**
+ * Pure placement math for `Menu`. Kept side-effect-free so it can be unit-tested
+ * exhaustively (status-bar offset, flip, cap, clamp) independent of RN layout.
+ *
+ * The key correctness point: the trigger is measured in *window* coordinates but
+ * the menu is painted in a full-screen (`statusBarTranslucent`) Modal, so we add
+ * `statusBarHeight` when converting the trigger position into the Modal's space.
+ * Available-space math cancels the offset out, so it uses window coordinates.
+ */
+export function computeMenuPlacement(input: PlacementInput): Placement {
+  const {
+    rect,
+    menuWidth,
+    menuHeight,
+    naturalHeight,
+    anchorOrigin,
+    menuOrigin,
+    offset,
+    screenPadding,
+    insets,
+    screenWidth,
+    screenHeight,
+    statusBarHeight,
+    autoFit,
+  } = input;
+
+  const isDropConfig =
+    (anchorOrigin.vertical === 'bottom' && menuOrigin.vertical === 'top') ||
+    (anchorOrigin.vertical === 'top' && menuOrigin.vertical === 'bottom');
+  const preferredUp = anchorOrigin.vertical === 'top' && menuOrigin.vertical === 'bottom';
+
+  let effAnchor = anchorOrigin;
+  let effMenu = menuOrigin;
+  let maxHeight: number | undefined;
+
+  if (autoFit && isDropConfig) {
+    // Space math is in window coordinates (the status-bar offset cancels out).
+    const spaceBelow = screenHeight - insets.bottom - (rect.y + rect.height) - offset - screenPadding;
+    const spaceAbove = rect.y - insets.top - offset - screenPadding;
+    let up = preferredUp;
+    if (!preferredUp) up = naturalHeight > spaceBelow && spaceAbove > spaceBelow;
+    else up = !(naturalHeight > spaceAbove && spaceBelow > spaceAbove);
+    const chosen = up ? spaceAbove : spaceBelow;
+    if (naturalHeight > chosen && chosen > 0) maxHeight = chosen;
+    effAnchor = { horizontal: anchorOrigin.horizontal, vertical: up ? 'top' : 'bottom' };
+    effMenu = { horizontal: menuOrigin.horizontal, vertical: up ? 'bottom' : 'top' };
+  }
+
+  // Convert the trigger position into the Modal's (full-screen) coordinate space.
+  const anchorX = rect.x + H_FRAC[effAnchor.horizontal] * rect.width;
+  const anchorY = rect.y + statusBarHeight + V_FRAC[effAnchor.vertical] * rect.height;
+  const offsetY = effMenu.vertical === 'top' ? offset : effMenu.vertical === 'bottom' ? -offset : 0;
+
+  let left = anchorX - H_FRAC[effMenu.horizontal] * menuWidth;
+  let top = anchorY - V_FRAC[effMenu.vertical] * menuHeight + offsetY;
+
+  left = clamp(left, screenPadding + insets.left, screenWidth - insets.right - menuWidth - screenPadding);
+  top = clamp(
+    top,
+    statusBarHeight + screenPadding + insets.top,
+    screenHeight + statusBarHeight - insets.bottom - menuHeight - screenPadding,
+  );
+
+  return { top, left, maxHeight };
+}