@bacon-pos/ui 0.5.0 → 0.6.0

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

@@ -0,0 +1,73 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+import type { IconName } from '../Icon/icons.generated';
+import { type EdgeInsets, type MenuOrigin } from '../Menu/Menu';
+export type SelectSize = 'md' | 'lg';
+/** An option in a `Select`. */
+export interface SelectOption {
+    key: string;
+    label: string;
+    /** Leading icon shown in the option row. */
+    icon?: IconName;
+    disabled?: boolean;
+}
+export interface SelectProps {
+    /** The options to choose from. */
+    options: SelectOption[];
+    /** Allow choosing several options (checkbox rows; value is an array). */
+    multiple?: boolean;
+    /** Selected key(s) — a string (single) or string[] (multiple). Controlled. */
+    value?: string | string[];
+    /** Initial selection for the uncontrolled case. */
+    defaultValue?: string | string[];
+    /** Called with the new selection (string for single, string[] for multiple). */
+    onChange?: (value: string | string[]) => void;
+    /** Label above the field. */
+    label?: string;
+    /** Helper text below the field. Replaced by the error message when `error` is a string. */
+    helperText?: string;
+    /** Mark invalid. Pass a string to show it as the error message. */
+    error?: boolean | string;
+    /** Text shown when nothing is selected. Defaults to "Select option". */
+    placeholder?: string;
+    /** Fixed leading icon on the field. */
+    leftIcon?: IconName;
+    /** Field height: `md` = 48, `lg` = 58. Defaults to `lg`. */
+    size?: SelectSize;
+    /** Fixed field width. Omit to use `fullWidth` (the Figma default). */
+    width?: number;
+    /** Stretch to the full width of the parent. Defaults to true. Ignored when `width` is set. */
+    fullWidth?: boolean;
+    /** Disable the field. */
+    disabled?: boolean;
+    /** Custom display for the selected value(s). */
+    renderValue?: (selected: SelectOption[]) => string;
+    /** Match the menu width to the field width. Defaults to true. */
+    matchTriggerWidth?: boolean;
+    /** Menu width when `matchTriggerWidth` is false. */
+    menuWidth?: number;
+    /** Max menu height; scrolls beyond it. */
+    maxHeight?: number;
+    /** Point on the field 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 field and menu. Defaults to 8. */
+    offset?: number;
+    /** Auto-fit the menu height and flip direction near screen edges. Defaults to true. */
+    autoFit?: boolean;
+    /** Safe-area insets to keep clear. */
+    insets?: EdgeInsets;
+    /** Close after selecting. Defaults to `!multiple`. */
+    closeOnSelect?: boolean;
+    /** Container style. */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Select — a form field that opens a `Dropdown` of options. The field mirrors
+ * `Input` (pill, label, helper/error, lime focus ring, red error ring); it is
+ * not editable — pressing it opens the menu, which matches the field width. The
+ * 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;
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,3 @@
+export { Select } from './Select';
+export type { SelectProps, SelectOption, SelectSize } from './Select';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC"}

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

@@ -0,0 +1,33 @@
+import { type ImageSourcePropType, type StyleProp, type ViewStyle } from 'react-native';
+export type UserChipSize = 'sm' | 'md' | 'lg';
+export interface UserChipProps {
+    /** Avatar image; when omitted or it fails to load, initials from `name` show. */
+    source?: ImageSourcePropType;
+    /**
+     * Name shown as the label and used for the avatar initials. When omitted, only
+     * the avatar renders (no pill) — the label's presence is driven by this prop.
+     */
+    name?: string;
+    /** Explicit initials for the avatar fallback (overrides `name`). */
+    initials?: string;
+    /** Size preset — scales the avatar, text and the fixed pill width. Defaults to `md`. */
+    size?: UserChipSize;
+    /** Pill background. Defaults to `action.primary` (lime). */
+    backgroundColor?: string;
+    /** Text color. Defaults to `action.secondaryForeground`. */
+    color?: string;
+    /** Make the chip pressable. */
+    onPress?: () => void;
+    /** Override the container style. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label. Defaults to `name`. */
+    accessibilityLabel?: string;
+}
+/**
+ * User chip — an `Avatar` with an optional name. With a `name` it renders the
+ * lime pill from Figma "User": the avatar flush on the left and the name in a
+ * fixed-width box that is centered when short and truncates with an ellipsis when
+ * long. Without a `name` it is just the avatar. The pill width is fixed per size.
+ */
+export declare function UserChip({ source, name, initials, size, backgroundColor, color, onPress, style, accessibilityLabel, }: UserChipProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UserChip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UserChip.d.ts","sourceRoot":"","sources":["../../../../../src/components/UserChip/UserChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAMtB,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,WAAW,aAAa;IAC5B,iFAAiF;IACjF,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wFAAwF;IACxF,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,4DAA4D;IAC5D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAgBD;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EACvB,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,IAAW,EACX,eAAe,EACf,KAAK,EACL,OAAO,EACP,KAAK,EACL,kBAAkB,GACnB,EAAE,aAAa,2CAqEf"}

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

@@ -0,0 +1,3 @@
+export { UserChip } from './UserChip';
+export type { UserChipProps, UserChipSize } from './UserChip';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/UserChip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}

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

@@ -7,18 +7,22 @@ export * from './Chip';
 export * from './CodeField';
 export * from './CodeInput';
 export * from './Dialog';
+export * from './Dropdown';
 export * from './Icon';
 export * from './IconButton';
 export * from './Input';
 export * from './Keypad';
 export * from './LinkButton';
+export * from './Menu';
 export * from './ProductCard';
 export * from './QuantityStepper';
 export * from './Radio';
+export * from './Select';
 export * from './Spinner';
 export * from './Surface';
 export * from './Switch';
 export * from './Text';
 export * from './Toast';
+export * from './UserChip';
 export type { LabelPosition } from './_internal/Labeled';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AAExB,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAE3B,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/package.json

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

package/src/components/CodeField/CodeField.tsx

@@ -51,8 +51,10 @@ export interface CodeFieldProps {
   disabled?: boolean;
   /** Focus on mount. */
   autoFocus?: boolean;
-  /** Cell width in px (Figma default 126). */
+  /** Cell width in px (Figma default 126). Ignored when `fullWidth` is set. */
   cellWidth?: number;
+  /** Stretch the row to 100% of the container; cells share the width evenly. */
+  fullWidth?: boolean;
   /** Cell height in px (Figma default 58). */
   cellHeight?: number;
   /** Gap between cells in px (Figma default 24). */
@@ -84,6 +86,7 @@ export function CodeField({
   disabled = false,
   autoFocus = false,
   cellWidth = 126,
+  fullWidth = false,
   cellHeight = 58,
   gap = 24,
   fontFamily,
@@ -106,7 +109,7 @@ export function CodeField({
   const message = typeof error === 'string' ? error : helperText;
 
   return (
-    <View style={[{ alignSelf: 'flex-start' }, style]}>
+    <View style={[fullWidth ? { alignSelf: 'stretch', width: '100%' } : { alignSelf: 'flex-start' }, style]}>
       <Pressable
         onPress={() => inputRef.current?.focus()}
         disabled={disabled}
@@ -130,7 +133,7 @@ export function CodeField({
                 key={i}
                 testID="code-field-cell"
                 style={{
-                  width: cellWidth,
+                  ...(fullWidth ? { flex: 1 } : { width: cellWidth }),
                   height: cellHeight,
                   borderRadius: theme.radii.pill,
                   borderWidth: 1,

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,319 @@
+import { Fragment, type ReactNode } from 'react';
+import { Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../theme';
+import type { RadiusToken } from '../../theme/spacing';
+import { Checkbox } from '../Checkbox/Checkbox';
+import { Icon } from '../Icon/Icon';
+import type { IconName } from '../Icon/icons.generated';
+import { Radio } from '../Radio/Radio';
+import { Switch, type SwitchSize } from '../Switch/Switch';
+import { Text } from '../Text/Text';
+import { ScrollArea } from '../_internal/ScrollArea';
+
+/**
+ * A leading/trailing slot on a row. Either a decorative/actionable control from
+ * the design system, or any custom node (avatar, flag, badge…).
+ */
+export type DropdownSlot =
+  | { kind: 'icon'; name: IconName; color?: string }
+  | { kind: 'iconButton'; name: IconName; onPress: () => void; color?: string; accessibilityLabel?: string }
+  | { kind: 'checkbox'; checked: boolean; onChange: (checked: boolean) => void; indeterminate?: boolean }
+  | { kind: 'switch'; value: boolean; onChange: (value: boolean) => void; size?: SwitchSize }
+  | { kind: 'radio'; selected: boolean; onChange: () => void }
+  | { kind: 'custom'; node: ReactNode };
+
+export interface DropdownItemProps {
+  /** Primary text. */
+  label: string;
+  /** Optional secondary line under the label. */
+  description?: string;
+  /** Slot before the text (icon / control / custom). */
+  leading?: DropdownSlot;
+  /** Slot after the text (icon / control / custom). */
+  trailing?: DropdownSlot;
+  /** Row press. If omitted, tapping the row toggles the trailing (then leading) control when it is a checkbox / switch / radio. */
+  onPress?: () => void;
+  /** Highlight the row as selected. */
+  selected?: boolean;
+  /** Dim and block the row. */
+  disabled?: boolean;
+  /** Render the label (and icon slots) in the error color — for "Delete" etc. */
+  destructive?: boolean;
+  /** Minimum row height. Defaults to 58 (Figma). */
+  height?: number;
+  /** Horizontal padding. Defaults to 16 (Figma). */
+  paddingHorizontal?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Checkbox/Switch/Radio wrap their control in `Labeled`, which defaults to
+ * `alignSelf: 'flex-start'`. Inside a row we want them vertically centered, so we
+ * override that (their `style` prop wins over the Labeled default).
+ */
+const CONTROL_ALIGN: ViewStyle = { alignSelf: 'center' };
+
+/** Returns the toggle a control slot performs when the row itself is pressed. */
+function slotToggle(slot?: DropdownSlot): (() => void) | undefined {
+  if (!slot) return undefined;
+  switch (slot.kind) {
+    case 'checkbox':
+      return () => slot.onChange(!slot.checked);
+    case 'switch':
+      return () => slot.onChange(!slot.value);
+    case 'radio':
+      return () => slot.onChange();
+    default:
+      return undefined;
+  }
+}
+
+function Slot({
+  slot,
+  disabled,
+  destructive,
+}: {
+  slot?: DropdownSlot;
+  disabled: boolean;
+  destructive: boolean;
+}) {
+  const theme = useTheme();
+  if (!slot) return null;
+  const iconColor = destructive ? theme.colors.feedback.error : 'secondary';
+  switch (slot.kind) {
+    case 'icon':
+      return <Icon name={slot.name} size={24} color={slot.color ?? iconColor} />;
+    case 'iconButton':
+      return (
+        <Pressable
+          onPress={slot.onPress}
+          disabled={disabled}
+          hitSlop={8}
+          accessibilityRole="button"
+          accessibilityLabel={slot.accessibilityLabel}
+          style={{ opacity: disabled ? 0.5 : 1 }}
+        >
+          <Icon name={slot.name} size={24} color={slot.color ?? iconColor} />
+        </Pressable>
+      );
+    case 'checkbox':
+      return (
+        <Checkbox
+          checked={slot.checked}
+          onChange={slot.onChange}
+          indeterminate={slot.indeterminate}
+          disabled={disabled}
+          style={CONTROL_ALIGN}
+        />
+      );
+    case 'switch':
+      return (
+        <Switch
+          value={slot.value}
+          onValueChange={slot.onChange}
+          size={slot.size ?? 'sm'}
+          disabled={disabled}
+          style={CONTROL_ALIGN}
+        />
+      );
+    case 'radio':
+      return (
+        <Radio selected={slot.selected} onChange={slot.onChange} disabled={disabled} style={CONTROL_ALIGN} />
+      );
+    case 'custom':
+      return <>{slot.node}</>;
+  }
+}
+
+/**
+ * A single dropdown / menu row: text with optional leading and trailing slots
+ * (icon, icon button, checkbox, switch, radio, or a custom node). Used on its
+ * own or, more commonly, inside `Dropdown`.
+ */
+export function DropdownItem({
+  label,
+  description,
+  leading,
+  trailing,
+  onPress,
+  selected = false,
+  disabled = false,
+  destructive = false,
+  height = 58,
+  paddingHorizontal = 16,
+  style,
+}: DropdownItemProps) {
+  const theme = useTheme();
+  const rowPress = onPress ?? slotToggle(trailing) ?? slotToggle(leading);
+
+  const labelColor = disabled
+    ? 'tertiary'
+    : destructive
+      ? theme.colors.feedback.error
+      : 'primary';
+
+  return (
+    <Pressable
+      onPress={rowPress}
+      disabled={disabled || !rowPress}
+      accessibilityRole="menuitem"
+      accessibilityState={{ selected, disabled }}
+      style={({ pressed }) => [
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 10,
+          minHeight: height,
+          paddingHorizontal,
+          paddingVertical: description ? 8 : 0,
+          backgroundColor: selected
+            ? theme.colors.background.subtle
+            : pressed && rowPress
+              ? theme.colors.background.muted
+              : 'transparent',
+          opacity: disabled ? 0.6 : 1,
+        },
+        style,
+      ]}
+    >
+      <Slot slot={leading} disabled={disabled} destructive={destructive} />
+
+      <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+        <Text variant="bodyLarge" color={labelColor} numberOfLines={1}>
+          {label}
+        </Text>
+        {description ? (
+          <Text variant="bodySmall" color="tertiary" numberOfLines={2}>
+            {description}
+          </Text>
+        ) : null}
+      </View>
+
+      <Slot slot={trailing} disabled={disabled} destructive={destructive} />
+    </Pressable>
+  );
+}
+
+/** An entry in a `Dropdown`: an item, a section header, or a divider. */
+export type DropdownEntry =
+  | (DropdownItemProps & { key: string; type?: 'item' })
+  | { key: string; type: 'header'; label: string }
+  | { key: string; type: 'divider' };
+
+export interface DropdownProps {
+  /** The rows to render (dynamic length). Mix items, headers and dividers. */
+  options: DropdownEntry[];
+  /** Called with the key of the pressed item (after its own `onPress`). */
+  onSelect?: (key: string) => void;
+  /** Panel width. Defaults to 350 (Figma). Pass a style with `width: '100%'` to fill a parent/trigger instead. */
+  width?: number;
+  /** Minimum panel width. */
+  minWidth?: number;
+  /** Max panel height; content scrolls beyond it. */
+  maxHeight?: number;
+  /** Draw hairline dividers between items. Defaults to true (Figma). */
+  showDividers?: boolean;
+  /** Vertical padding inside the panel. Defaults to 0 (rows meet the rounded edges, Figma). */
+  paddingVertical?: number;
+  /** Corner radius token. Defaults to `xl` (16). */
+  radius?: RadiusToken;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * Dropdown / menu panel — an elevated surface listing a dynamic set of options.
+ * Meant to be shown from a trigger (an Input select, an IconButton, …). Each row
+ * is a `DropdownItem`, so options can carry icons, checkboxes, switches, radios
+ * or custom nodes on either side. Supports section headers, dividers and scroll.
+ */
+export function Dropdown({
+  options,
+  onSelect,
+  width = 350,
+  minWidth,
+  maxHeight,
+  showDividers = true,
+  paddingVertical = 0,
+  radius = 'xl',
+  style,
+}: DropdownProps) {
+  const theme = useTheme();
+
+  const itemEntries = options.filter((o) => o.type !== 'header' && o.type !== 'divider');
+  const lastItemKey = itemEntries[itemEntries.length - 1]?.key;
+
+  const rows = options.map((entry) => {
+    if (entry.type === 'divider') {
+      return (
+        <View
+          key={entry.key}
+          style={{ height: 1, backgroundColor: theme.colors.border.subtle, marginVertical: 4 }}
+        />
+      );
+    }
+    if (entry.type === 'header') {
+      return (
+        <Text
+          key={entry.key}
+          variant="caption"
+          weight="medium"
+          color="tertiary"
+          style={{ paddingHorizontal: 16, paddingTop: 8, paddingBottom: 4 }}
+        >
+          {entry.label}
+        </Text>
+      );
+    }
+    const { key, type: _type, onPress, ...itemProps } = entry;
+    return (
+      <Fragment key={key}>
+        <DropdownItem
+          {...itemProps}
+          onPress={
+            onPress || onSelect
+              ? () => {
+                  onPress?.();
+                  onSelect?.(key);
+                }
+              : undefined
+          }
+        />
+        {showDividers && key !== lastItemKey ? (
+          <View style={{ height: 1, backgroundColor: theme.colors.border.subtle }} />
+        ) : null}
+      </Fragment>
+    );
+  });
+
+  const body = <View style={{ paddingVertical }}>{rows}</View>;
+
+  return (
+    <View
+      style={[
+        {
+          width,
+          minWidth,
+          borderRadius: theme.radii[radius],
+          borderWidth: 1,
+          borderColor: theme.colors.border.default,
+          backgroundColor: theme.colors.background.default,
+          overflow: 'hidden',
+          // Figma "shadow-5".
+          boxShadow: [
+            { offsetX: 0, offsetY: 8, blurRadius: 10, spreadDistance: -6, color: 'rgba(0, 0, 0, 0.04)' },
+            { offsetX: 0, offsetY: 20, blurRadius: 25, spreadDistance: -5, color: 'rgba(0, 0, 0, 0.04)' },
+          ] as ViewStyle['boxShadow'],
+        },
+        style,
+      ]}
+    >
+      {maxHeight ? (
+        <ScrollArea style={{ maxHeight }} indicatorColor={theme.colors.border.strong}>
+          {body}
+        </ScrollArea>
+      ) : (
+        body
+      )}
+    </View>
+  );
+}

package/src/components/Dropdown/index.ts

@@ -0,0 +1,2 @@
+export { Dropdown, DropdownItem } from './Dropdown';
+export type { DropdownProps, DropdownItemProps, DropdownEntry, DropdownSlot } from './Dropdown';