@cdx-ui/components 0.3.7 → 0.3.9

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

@@ -0,0 +1,47 @@
+import { type FlagCode } from '@cdx-ui/icons/flags';
+import { type IconProps } from '../Icon';
+export interface CurrencyFlagProps extends Omit<IconProps, 'as' | 'filled' | 'color'> {
+    /** ISO 4217 alphabetic currency code, such as `USD` or `EUR`. */
+    code: string;
+}
+/**
+ * Returns the flag code for the country or union that issues an ISO 4217 currency.
+ *
+ * National codes start with the issuer's ISO 3166-1 alpha-2 code (`DKK` → `DK`), so a
+ * currency shared by several countries resolves to its issuer. `EUR` resolves to `EU`.
+ * `X` codes (`XOF`, `XCD`, `XAU`) have no single issuer and resolve to `undefined`, as
+ * do malformed codes.
+ */
+export declare function currencyFlagCode(code: string): FlagCode | undefined;
+/**
+ * Renders the flag of the country or union that issues an ISO 4217 currency.
+ *
+ * The flag shows the issuer, not the user's country: `DKK` renders Denmark's flag for
+ * accounts in Greenland too. Use `CountryFlag` with a country code when the flag should
+ * show where the user is. Codes with no single issuer, such as `XOF` and `XCD`, render
+ * nothing and log a warning in development.
+ *
+ * The flag is drawn through `Icon`, so `className` sizing and `asChild` icon slots
+ * apply. Flag artwork keeps its own colors. The flag is decorative unless
+ * `accessibilityLabel` is set.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { CurrencyFlag } from '@cdx-ui/components';
+ *
+ * <CurrencyFlag code="USD" />
+ * <CurrencyFlag code="EUR" className="size-6" accessibilityLabel="Euro" />
+ * ```
+ *
+ * @param {string} code - ISO 4217 alphabetic currency code.
+ * @param {string} className - Utility classes for size and placement, merged after the default `size-5` box.
+ * @param {string} accessibilityLabel - When set, the flag is announced as an image with this name.
+ * @param {object} style - Style overrides passed through to the icon.
+ * @param {string} data-testid - Test identifier forwarded to the rendered icon.
+ */
+export declare function CurrencyFlag({ code, className, ...props }: CurrencyFlagProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace CurrencyFlag {
+    var displayName: string;
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/CurrencyFlag/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAG3D,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,SAAS,EAAE,IAAI,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnF,iEAAiE;IACjE,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAOnE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,kDAc5E;yBAde,YAAY"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/CurrencyInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACzF,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,KAAK,yBAAyB,EAI/B,MAAM,UAAU,CAAC;AAqBlB,MAAM,WAAW,kBACf,SACE,gBAAgB,EAChB,yBAAyB,EACzB,IAAI,CACF,cAAc,EACd,oBAAoB,GAAG,mBAAmB,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,eAAe,CAC/F;IACH,wGAAwG;IACxG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uGAAuG;IACvG,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,0GA+JzB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/CurrencyInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AACzF,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EACL,KAAK,yBAAyB,EAI/B,MAAM,UAAU,CAAC;AAqBlB,MAAM,WAAW,kBACf,SACE,gBAAgB,EAChB,yBAAyB,EACzB,IAAI,CACF,cAAc,EACd,oBAAoB,GAAG,mBAAmB,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,eAAe,CAC/F;IACH,wGAAwG;IACxG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uGAAuG;IACvG,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,0GAgKzB,CAAC"}

package/lib/typescript/components/CurrencyInput/styles.d.ts

@@ -11,9 +11,14 @@ export interface CurrencyInputVariantProps {
      * @default 'default'
      */
     size?: 'default' | 'small';
+    /**
+     * Horizontal alignment of the amount. Defaults to `center` on `ghost`. On `outline`, the amount
+     * stays at the start of the field until `align` is set.
+     */
+    align?: 'center' | 'end';
 }
 export declare const currencyInputRootVariants: ({ variant, size, }?: CurrencyInputVariantProps) => string;
-export declare const currencyInputFieldVariants: ({ variant, size, }?: CurrencyInputVariantProps) => string;
+export declare const currencyInputFieldVariants: ({ variant, size, align, }?: CurrencyInputVariantProps) => string;
 export declare const currencyInputPrefixVariants: (props?: ({
     size?: "small" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/lib/typescript/components/CurrencyInput/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CurrencyInput/styles.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,yBAAyB;IACxC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC5B;AA6CD,eAAO,MAAM,yBAAyB,GAAI,qBAGvC,yBAA8B,KAAG,MAGU,CAAC;AAE/C,eAAO,MAAM,0BAA0B,GAAI,qBAGxC,yBAA8B,KAAG,MAC8D,CAAC;AAGnG,eAAO,MAAM,2BAA2B;;8EAavC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CurrencyInput/styles.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,yBAAyB;IACxC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC1B;AAwDD,eAAO,MAAM,yBAAyB,GAAI,qBAGvC,yBAA8B,KAAG,MAGU,CAAC;AAE/C,eAAO,MAAM,0BAA0B,GAAI,4BAIxC,yBAA8B,KAAG,MASnC,CAAC;AAGF,eAAO,MAAM,2BAA2B;;8EAavC,CAAC"}

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

@@ -1,6 +1,7 @@
 import { type ReactNode } from 'react';
 import { View, type ViewProps } from 'react-native';
 import { type DateRangePickerRootProps as DateRangePickerRootPrimitiveProps } from '@cdx-ui/primitives';
+import type { BottomSheetModalProps } from '../BottomSheet';
 import { type RangeCalendarProps } from '../RangeCalendar';
 import { type PickerTriggerProps } from '../picker/PickerTrigger';
 export type { DateRangeValue } from '@cdx-ui/primitives';
@@ -25,9 +26,32 @@ declare const DateRangePickerCalendar: import("react").ForwardRefExoticComponent
 declare function DateRangePickerDialog({ children }: {
     children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-declare function DateRangePickerBottomSheet({ children }: {
+export interface DateRangePickerBottomSheetProps {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+    /**
+     * Heights the sheet snaps to, as percentages of the screen or pixel values.
+     * @default ['70%', '90%']
+     */
+    snapPoints?: BottomSheetModalProps['snapPoints'];
+    /**
+     * Sizes the sheet to its content and adds that height as a snap point.
+     * @default false
+     */
+    enableDynamicSizing?: BottomSheetModalProps['enableDynamicSizing'];
+    /**
+     * How the sheet opens over a sheet that is already presented: `push` keeps that sheet
+     * underneath, `switch` minimizes it until this sheet closes, and `replace` dismisses it.
+     * @default 'switch'
+     */
+    stackBehavior?: BottomSheetModalProps['stackBehavior'];
+    /**
+     * Lays the children out in a container that fills the sheet, so a fixed header can sit above a
+     * `BottomSheet.ScrollView`. By default the children size a `BottomSheet.View`.
+     * @default false
+     */
+    fill?: boolean;
+}
+declare function DateRangePickerBottomSheet({ children, ...sheetProps }: DateRangePickerBottomSheetProps): import("react/jsx-runtime").JSX.Element;
 declare function DateRangePickerPopover({ children, className, }: {
     children: ReactNode;
     className?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAQ,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1D,OAAO,EAML,KAAK,wBAAwB,IAAI,iCAAiC,EACnE,MAAM,oBAAoB,CAAC;AAI5B,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAOjF,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,MAAM,WAAW,oBACf,SAAQ,iCAAiC,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAID,QAAA,MAAM,mBAAmB,uGAyBxB,CAAC;AAWF,QAAA,MAAM,sBAAsB;yBAHL,MAAM;wCAkB5B,CAAC;AAIF,QAAA,MAAM,+BAA+B;;;CAEpC,CAAC;AAIF,QAAA,MAAM,6BAA6B;;;CAGlC,CAAC;AAIF,KAAK,4BAA4B,GAAG,IAAI,CACtC,kBAAkB,EAClB,YAAY,GAAG,UAAU,GAAG,eAAe,GAAG,cAAc,GAAG,sBAAsB,CACtF,CAAC;AAEF,QAAA,MAAM,uBAAuB,+GAwB5B,CAAC;AAIF,iBAAS,qBAAqB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAanE;AAED,iBAAS,0BAA0B,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAWxE;AAED,iBAAS,sBAAsB,CAAC,EAC9B,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAcA;AAED,KAAK,uBAAuB,GAAG,OAAO,mBAAmB,GAAG;IAC1D,OAAO,EAAE,OAAO,sBAAsB,CAAC;IACvC,gBAAgB,EAAE,OAAO,+BAA+B,CAAC;IACzD,cAAc,EAAE,OAAO,6BAA6B,CAAC;IACrD,QAAQ,EAAE,OAAO,uBAAuB,CAAC;IACzC,OAAO,EAAE,OAAO,sBAAsB,CAAC;IACvC,MAAM,EAAE,OAAO,qBAAqB,CAAC;IACrC,WAAW,EAAE,OAAO,0BAA0B,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,eAAe,EAQtB,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DateRangePicker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAQ,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1D,OAAO,EAML,KAAK,wBAAwB,IAAI,iCAAiC,EACnE,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAG5D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAOjF,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,MAAM,WAAW,oBACf,SAAQ,iCAAiC,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAID,QAAA,MAAM,mBAAmB,uGAyBxB,CAAC;AAWF,QAAA,MAAM,sBAAsB;yBAHL,MAAM;wCAkB5B,CAAC;AAIF,QAAA,MAAM,+BAA+B;;;CAEpC,CAAC;AAIF,QAAA,MAAM,6BAA6B;;;CAGlC,CAAC;AAIF,KAAK,4BAA4B,GAAG,IAAI,CACtC,kBAAkB,EAClB,YAAY,GAAG,UAAU,GAAG,eAAe,GAAG,cAAc,GAAG,sBAAsB,CACtF,CAAC;AAEF,QAAA,MAAM,uBAAuB,+GAwB5B,CAAC;AAIF,iBAAS,qBAAqB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAanE;AAED,MAAM,WAAW,+BAA+B;IAC9C,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAC;IACjD;;;OAGG;IACH,mBAAmB,CAAC,EAAE,qBAAqB,CAAC,qBAAqB,CAAC,CAAC;IACnE;;;;OAIG;IACH,aAAa,CAAC,EAAE,qBAAqB,CAAC,eAAe,CAAC,CAAC;IACvD;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,iBAAS,0BAA0B,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAAE,+BAA+B,2CAY/F;AAED,iBAAS,sBAAsB,CAAC,EAC9B,QAAQ,EACR,SAAS,GACV,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAcA;AAED,KAAK,uBAAuB,GAAG,OAAO,mBAAmB,GAAG;IAC1D,OAAO,EAAE,OAAO,sBAAsB,CAAC;IACvC,gBAAgB,EAAE,OAAO,+BAA+B,CAAC;IACzD,cAAc,EAAE,OAAO,6BAA6B,CAAC;IACrD,QAAQ,EAAE,OAAO,uBAAuB,CAAC;IACzC,OAAO,EAAE,OAAO,sBAAsB,CAAC;IACvC,MAAM,EAAE,OAAO,qBAAqB,CAAC;IACrC,WAAW,EAAE,OAAO,0BAA0B,CAAC;CAChD,CAAC;AAEF,eAAO,MAAM,eAAe,EAQtB,uBAAuB,CAAC"}

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

@@ -73,6 +73,7 @@ export * from './Heading';
 export * from './Text';
 export * from './Icon';
 export * from './CountryFlag';
+export * from './CurrencyFlag';
 export * from './IconButton';
 export * from './QuickActionButton';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,uBAAuB,EAAE,MAAM,eAAe,CAAC;AACjG,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,YAAY,EACV,qBAAqB,EACrB,oBAAoB,EACpB,6BAA6B,GAC9B,MAAM,yBAAyB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,uBAAuB,EAAE,MAAM,eAAe,CAAC;AACjG,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,qBAAqB,CAAC;AACpC,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,YAAY,EACV,qBAAqB,EACrB,oBAAoB,EACpB,6BAA6B,GAC9B,MAAM,yBAAyB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC"}

package/lib/typescript/components/picker/surfaces.d.ts

@@ -18,7 +18,7 @@ type PickerBottomSheetSurfaceProps = {
      */
     fill?: boolean;
     children: ReactNode;
-} & Pick<BottomSheetModalProps, 'snapPoints' | 'enableDynamicSizing' | 'keyboardBehavior' | 'keyboardBlurBehavior' | 'accessible'>;
+} & Pick<BottomSheetModalProps, 'snapPoints' | 'enableDynamicSizing' | 'stackBehavior' | 'keyboardBehavior' | 'keyboardBlurBehavior' | 'accessible'>;
 /**
  * Text input for a picker sheet. It registers with the sheet's keyboard handling, which moves
  * the sheet for a focused `BottomSheetTextInput` only; a plain `TextInput` stays under the

package/lib/typescript/components/picker/surfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"surfaces.d.ts","sourceRoot":"","sources":["../../../../src/components/picker/surfaces.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4C,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjG,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAGhD,OAAO,EAML,KAAK,kBAAkB,EACxB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAA+B,KAAK,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAKzF,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,OAAO,EACP,eAAe,EACf,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAUA;AAED,KAAK,6BAA6B,GAAG;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CACN,qBAAqB,EACrB,YAAY,GAAG,qBAAqB,GAAG,kBAAkB,GAAG,sBAAsB,GAAG,YAAY,CAClG,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,uRAAuB,CAAC;AAEzD,wBAAgB,wBAAwB,CAAC,EACvC,IAAI,EACJ,OAAO,EACP,eAAe,EACf,IAAY,EACZ,QAAQ,EACR,UAA2B,EAC3B,mBAA2B,EAC3B,GAAG,UAAU,EACd,EAAE,6BAA6B,2CAsD/B;AAED,UAAU,yBAAyB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B;AAED,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,OAAO,EACP,eAAe,EACf,SAAS,EACT,UAAU,EACV,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,KAAgB,GACjB,EAAE,yBAAyB,kDA+D3B"}
+{"version":3,"file":"surfaces.d.ts","sourceRoot":"","sources":["../../../../src/components/picker/surfaces.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4C,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjG,OAAO,EAAc,IAAI,EAAE,MAAM,cAAc,CAAC;AAGhD,OAAO,EAML,KAAK,kBAAkB,EACxB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAA+B,KAAK,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAKzF,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,OAAO,EACP,eAAe,EACf,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAUA;AAED,KAAK,6BAA6B,GAAG;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CACN,qBAAqB,EACnB,YAAY,GACZ,qBAAqB,GACrB,eAAe,GACf,kBAAkB,GAClB,sBAAsB,GACtB,YAAY,CACf,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,uRAAuB,CAAC;AAEzD,wBAAgB,wBAAwB,CAAC,EACvC,IAAI,EACJ,OAAO,EACP,eAAe,EACf,IAAY,EACZ,QAAQ,EACR,UAA2B,EAC3B,mBAA2B,EAC3B,GAAG,UAAU,EACd,EAAE,6BAA6B,2CAsD/B;AAED,UAAU,yBAAyB;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,eAAe,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAClC,UAAU,CAAC,EAAE,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B;AAED,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,OAAO,EACP,eAAe,EACf,SAAS,EACT,UAAU,EACV,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,KAAgB,GACjB,EAAE,yBAAyB,kDA+D3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -106,10 +106,10 @@
     "@marceloterreiro/flash-calendar": "2.0.0",
     "react-native-reanimated-carousel": "5.0.0-beta.5",
     "uniwind": "1.10.0",
-    "@cdx-ui/formatters": "0.3.7",
-    "@cdx-ui/icons": "0.3.7",
-    "@cdx-ui/utils": "0.3.7",
-    "@cdx-ui/primitives": "0.3.7"
+    "@cdx-ui/formatters": "0.3.9",
+    "@cdx-ui/icons": "0.3.9",
+    "@cdx-ui/primitives": "0.3.9",
+    "@cdx-ui/utils": "0.3.9"
   },
   "devDependencies": {
     "@dnd-kit/core": "6.3.1",

package/src/components/CountryFlag/index.tsx

@@ -6,12 +6,17 @@ import { Icon, type IconProps } from '../Icon';
 export type { FlagCode };
 
 export interface CountryFlagProps extends Omit<IconProps, 'as' | 'filled' | 'color'> {
-  /** ISO 3166-1 alpha-2 country code. */
+  /**
+   * Code from the country-flag-icons 3x2 set. Includes officially assigned
+   * ISO 3166-1 alpha-2 codes, the unofficial codes that package ships for
+   * libphonenumber-js, and its subdivision codes. Subdivision codes keep
+   * their hyphen (`GB-ENG`).
+   */
   code: FlagCode;
 }
 
 /**
- * Renders the country flag for an ISO 3166-1 alpha-2 code.
+ * Renders the flag for a country-flag-icons code, including unofficial libphonenumber-js codes.
  *
  * The flag is drawn through `Icon`, so `className` sizing and `asChild` icon slots
  * apply. Flag artwork keeps its own colors. The flag is decorative unless
@@ -27,7 +32,7 @@ export interface CountryFlagProps extends Omit<IconProps, 'as' | 'filled' | 'col
  * <CountryFlag code="US" className="size-6" accessibilityLabel="United States" />
  * ```
  *
- * @param {FlagCode} code - ISO 3166-1 alpha-2 country code.
+ * @param {FlagCode} code - Code from the country-flag-icons 3x2 set. Subdivision codes keep their hyphen (`GB-ENG`).
  * @param {string} className - Utility classes for size and placement, merged after the default `size-5` box.
  * @param {string} accessibilityLabel - When set, the flag is announced as an image with this name.
  * @param {object} style - Style overrides passed through to the icon.

package/src/components/CurrencyFlag/index.tsx

@@ -0,0 +1,71 @@
+import { flags, type FlagCode } from '@cdx-ui/icons/flags';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { Icon, type IconProps } from '../Icon';
+
+export interface CurrencyFlagProps extends Omit<IconProps, 'as' | 'filled' | 'color'> {
+  /** ISO 4217 alphabetic currency code, such as `USD` or `EUR`. */
+  code: string;
+}
+
+/**
+ * Returns the flag code for the country or union that issues an ISO 4217 currency.
+ *
+ * National codes start with the issuer's ISO 3166-1 alpha-2 code (`DKK` → `DK`), so a
+ * currency shared by several countries resolves to its issuer. `EUR` resolves to `EU`.
+ * `X` codes (`XOF`, `XCD`, `XAU`) have no single issuer and resolve to `undefined`, as
+ * do malformed codes.
+ */
+export function currencyFlagCode(code: string): FlagCode | undefined {
+  if (!/^[A-Z]{3}$/.test(code)) return undefined;
+  if (code === 'EUR') return 'EU';
+  // `X` prefixes would otherwise hit user-assigned flags (`XAF` → `XA`, `XCD` → `XC`).
+  if (code.startsWith('X')) return undefined;
+  const region = code.slice(0, 2);
+  return Object.prototype.hasOwnProperty.call(flags, region) ? (region as FlagCode) : undefined;
+}
+
+/**
+ * Renders the flag of the country or union that issues an ISO 4217 currency.
+ *
+ * The flag shows the issuer, not the user's country: `DKK` renders Denmark's flag for
+ * accounts in Greenland too. Use `CountryFlag` with a country code when the flag should
+ * show where the user is. Codes with no single issuer, such as `XOF` and `XCD`, render
+ * nothing and log a warning in development.
+ *
+ * The flag is drawn through `Icon`, so `className` sizing and `asChild` icon slots
+ * apply. Flag artwork keeps its own colors. The flag is decorative unless
+ * `accessibilityLabel` is set.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { CurrencyFlag } from '@cdx-ui/components';
+ *
+ * <CurrencyFlag code="USD" />
+ * <CurrencyFlag code="EUR" className="size-6" accessibilityLabel="Euro" />
+ * ```
+ *
+ * @param {string} code - ISO 4217 alphabetic currency code.
+ * @param {string} className - Utility classes for size and placement, merged after the default `size-5` box.
+ * @param {string} accessibilityLabel - When set, the flag is announced as an image with this name.
+ * @param {object} style - Style overrides passed through to the icon.
+ * @param {string} data-testid - Test identifier forwarded to the rendered icon.
+ */
+export function CurrencyFlag({ code, className, ...props }: CurrencyFlagProps) {
+  const flagCode = currencyFlagCode(code);
+  if (!flagCode) {
+    if (__DEV__) console.warn(`CurrencyFlag: no flag for currency "${code}"`);
+    return null;
+  }
+  return (
+    <Icon
+      as={flags[flagCode]}
+      className={cn('size-5', className)}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'currency-flag' }))}
+    />
+  );
+}
+
+CurrencyFlag.displayName = 'CurrencyFlag';

package/src/components/CurrencyInput/index.tsx

@@ -62,6 +62,7 @@ export const CurrencyInput = forwardRef<TextInput, CurrencyInputProps>(
       currencySymbol = '$',
       variant = 'ghost',
       size = 'default',
+      align,
       isDisabled,
       isInvalid,
       isReadOnly,
@@ -206,7 +207,7 @@ export const CurrencyInput = forwardRef<TextInput, CurrencyInputProps>(
           onFocus={handleFocus}
           onBlur={handleBlur}
           className={cn(
-            currencyInputFieldVariants({ variant, size }),
+            currencyInputFieldVariants({ variant, size, align }),
             isEmpty ? 'text-content-tertiary' : 'text-content-primary',
           )}
         />

package/src/components/CurrencyInput/styles.ts

@@ -1,3 +1,4 @@
+import { Platform } from 'react-native';
 import { cn, cva } from '@cdx-ui/utils';
 import { DISABLED_CURSOR } from '../../styles/constants';
 import { inputFieldVariants, inputRootVariants } from '../Input/styles';
@@ -15,6 +16,11 @@ export interface CurrencyInputVariantProps {
    * @default 'default'
    */
   size?: 'default' | 'small';
+  /**
+   * Horizontal alignment of the amount. Defaults to `center` on `ghost`. On `outline`, the amount
+   * stays at the start of the field until `align` is set.
+   */
+  align?: 'center' | 'end';
 }
 
 const currencyInputGhostRootVariants = cva(
@@ -37,9 +43,20 @@ const currencyInputGhostRootVariants = cva(
   },
 );
 
+// TextInput only accepts textAlign left, center, and right. `text-end` is valid CSS, so web
+// uses it, but native ignores it and the amount stays at the start in LTR. Direction
+// variants compile to left/right, matching Table's native text alignment.
+const currencyInputAlignClass = {
+  center: 'text-center',
+  end: Platform.select({
+    web: 'text-end',
+    default: 'ltr:text-right rtl:text-left',
+  }),
+} as const;
+
 const currencyInputGhostFieldVariants = cva(
   [
-    'w-full bg-transparent p-0 text-center',
+    'w-full bg-transparent p-0',
     'placeholder:text-content-tertiary',
     'web:outline-none',
     'data-[invalid=true]:text-content-danger',
@@ -71,8 +88,17 @@ export const currencyInputRootVariants = ({
 export const currencyInputFieldVariants = ({
   variant = 'ghost',
   size = 'default',
-}: CurrencyInputVariantProps = {}): string =>
-  variant === 'outline' ? inputFieldVariants({ size }) : currencyInputGhostFieldVariants({ size });
+  align,
+}: CurrencyInputVariantProps = {}): string => {
+  const resolvedAlign = align ?? (variant === 'outline' ? undefined : 'center');
+
+  return cn(
+    variant === 'outline'
+      ? inputFieldVariants({ size })
+      : currencyInputGhostFieldVariants({ size }),
+    resolvedAlign ? currencyInputAlignClass[resolvedAlign] : undefined,
+  );
+};
 
 // Figma keeps the symbol at body-md on every viewport; only the amount grows to 16px on web <600px.
 export const currencyInputPrefixVariants = cva(

package/src/components/DateRangePicker/index.tsx

@@ -10,6 +10,7 @@ import {
   type DateRangePickerRootProps as DateRangePickerRootPrimitiveProps,
 } from '@cdx-ui/primitives';
 import { cn, ParentContext, useParentContext } from '@cdx-ui/utils';
+import type { BottomSheetModalProps } from '../BottomSheet';
 import { Dialog } from '../Dialog';
 import { Icon } from '../Icon';
 import { RangeCalendar, type RangeCalendarProps } from '../RangeCalendar';
@@ -146,13 +147,40 @@ function DateRangePickerDialog({ children }: { children: ReactNode }) {
   );
 }
 
-function DateRangePickerBottomSheet({ children }: { children: ReactNode }) {
+export interface DateRangePickerBottomSheetProps {
+  children: ReactNode;
+  /**
+   * Heights the sheet snaps to, as percentages of the screen or pixel values.
+   * @default ['70%', '90%']
+   */
+  snapPoints?: BottomSheetModalProps['snapPoints'];
+  /**
+   * Sizes the sheet to its content and adds that height as a snap point.
+   * @default false
+   */
+  enableDynamicSizing?: BottomSheetModalProps['enableDynamicSizing'];
+  /**
+   * How the sheet opens over a sheet that is already presented: `push` keeps that sheet
+   * underneath, `switch` minimizes it until this sheet closes, and `replace` dismisses it.
+   * @default 'switch'
+   */
+  stackBehavior?: BottomSheetModalProps['stackBehavior'];
+  /**
+   * Lays the children out in a container that fills the sheet, so a fixed header can sit above a
+   * `BottomSheet.ScrollView`. By default the children size a `BottomSheet.View`.
+   * @default false
+   */
+  fill?: boolean;
+}
+
+function DateRangePickerBottomSheet({ children, ...sheetProps }: DateRangePickerBottomSheetProps) {
   const ctx = useDateRangePickerContext();
   return (
     <PickerBottomSheetSurface
       open={ctx.open}
       setOpen={ctx.setOpen}
       registerSurface={ctx.registerSurface}
+      {...sheetProps}
     >
       <DateRangePickerContext.Provider value={ctx}>{children}</DateRangePickerContext.Provider>
     </PickerBottomSheetSurface>

package/src/components/index.ts

@@ -77,5 +77,6 @@ export * from './Heading';
 export * from './Text';
 export * from './Icon';
 export * from './CountryFlag';
+export * from './CurrencyFlag';
 export * from './IconButton';
 export * from './QuickActionButton';

package/src/components/picker/surfaces.tsx

@@ -51,7 +51,12 @@ type PickerBottomSheetSurfaceProps = {
   children: ReactNode;
 } & Pick<
   BottomSheetModalProps,
-  'snapPoints' | 'enableDynamicSizing' | 'keyboardBehavior' | 'keyboardBlurBehavior' | 'accessible'
+  | 'snapPoints'
+  | 'enableDynamicSizing'
+  | 'stackBehavior'
+  | 'keyboardBehavior'
+  | 'keyboardBlurBehavior'
+  | 'accessible'
 >;
 
 /**