@cdx-ui/components 0.3.11 → 0.3.13

package/src/components/DateRangePicker/index.tsx

@@ -20,6 +20,7 @@ import {
   PickerDialogSurface,
   PickerPopoverSurface,
 } from '../picker/surfaces';
+import { PICKER_CALENDAR_POPOVER_MIN_WIDTH } from '../picker/styles';
 
 export type { DateRangeValue } from '@cdx-ui/primitives';
 
@@ -202,6 +203,7 @@ function DateRangePickerPopover({
       registerSurface={ctx.registerSurface}
       anchorRef={ctx.anchorRef}
       triggerRef={ctx.triggerRef}
+      minWidth={PICKER_CALENDAR_POPOVER_MIN_WIDTH}
       className={className}
     >
       <DateRangePickerContext.Provider value={ctx}>{children}</DateRangePickerContext.Provider>

package/src/components/Icon/index.tsx

@@ -30,14 +30,11 @@ function IconImpl({ as: IconComponent, ...props }: IconImplProps) {
   return <IconComponent {...props} />;
 }
 
-// Double-wrap: the inner `withUniwind` (auto mapping) resolves general
-// `className` utilities (margin, padding, positioning, etc.) into the `style`
-// prop so they reach the SVG on native. The outer `withUniwind` (custom mapping)
-// extracts `size` and `color` from the same `className`. Without the inner
-// wrapper, a custom mapping alone skips the `className` → `style` merge, so
-// layout classes like `mt-3` are dropped on native (they still apply on web,
-// where RNW keeps `className` as a real CSS class).
-const StyledIcon = withUniwind(withUniwind(IconImpl), {
+// `size` and `color` are extracted from `className`; the `style` mapping carries
+// the remaining utilities (margin, positioning, etc.) to the SVG. A manual
+// mapping consumes `className` on web, so placement must be mapped here rather
+// than left to a nested auto `withUniwind`.
+const StyledIcon = withUniwind(IconImpl, {
   size: {
     fromClassName: 'className',
     styleProperty: 'width',
@@ -46,6 +43,9 @@ const StyledIcon = withUniwind(withUniwind(IconImpl), {
     fromClassName: 'className',
     styleProperty: 'color',
   },
+  style: {
+    fromClassName: 'className',
+  },
 });
 
 /**

package/src/components/ListItem/index.tsx

@@ -521,8 +521,8 @@ export interface ListItemSectionHeaderProps extends ViewProps {
   /** Optional right-aligned adornment (e.g. section Chip). */
   trailing?: ReactNode;
   /**
-   * Background treatment. `ghost` has no fill and a bottom border; `subtle` adds a neutral fill
-   * (matching `subtle` on Avatar, Chip, and IconButton) and drops the bottom border. `gradient`
+   * Background treatment. `ghost` has no fill and a bottom border; `subtle` adds a light neutral
+   * fill (`surface-neutral-tint`) and drops the bottom border. `gradient`
    * fades from the primary surface into a brand tint, left to right, and keeps the bottom border.
    * Label typography is the same for all three.
    * @default 'ghost'

package/src/components/ListItem/styles.ts

@@ -153,7 +153,7 @@ export const listItemSectionHeaderVariants = cva(
       variant: {
         ghost: [],
         // The fill separates the header from its rows, so the bottom border is dropped.
-        subtle: 'bg-surface-neutral-subtle border-b-0',
+        subtle: 'bg-surface-neutral-tint border-b-0',
         gradient: 'bg-gradient-to-r from-surface-primary to-surface-brand-tint',
       },
       showDivider: {

package/src/components/SystemAlert/styles.ts

@@ -121,14 +121,20 @@ export const systemAlertIconVariants = cva(['size-5 shrink-0 mt-3 me-3'], {
 
 // ── Description ──────────────────────────────────────────────────────────────
 
-export const systemAlertDescriptionVariants = cva(['flex-1 min-w-0 py-3 body-md font-medium'], {
-  variants: {
-    color: ON_STRONG_CONTENT,
-  },
-  defaultVariants: {
-    color: 'info',
+// Web: react-native-web clamps `numberOfLines` with `overflow: clip` on this element, which
+// clips at the padding edge, so the next line would show through bottom padding. Margin
+// keeps the same box outside the clip.
+export const systemAlertDescriptionVariants = cva(
+  ['flex-1 min-w-0 py-3 web:py-0 web:my-3 body-md font-medium'],
+  {
+    variants: {
+      color: ON_STRONG_CONTENT,
+    },
+    defaultVariants: {
+      color: 'info',
+    },
   },
-});
+);
 
 // ── Actions ──────────────────────────────────────────────────────────────────
 

package/src/components/picker/styles.ts

@@ -8,6 +8,13 @@ import { cva } from '@cdx-ui/utils';
  */
 export const PICKER_POPOVER_Z_INDEX = MODAL_OVERLAY_Z_INDEX;
 
+/**
+ * Narrowest calendar popover that fits seven day columns, weekday labels, and the month
+ * header. The calendar grid has no intrinsic width, so an anchor-width popover on a narrow
+ * field would otherwise squeeze it.
+ */
+export const PICKER_CALENDAR_POPOVER_MIN_WIDTH = 320;
+
 export const pickerPopoverContentVariants = cva([
   'bg-surface-primary',
   'border border-stroke-secondary',

package/src/components/picker/surfaces.tsx

@@ -142,6 +142,7 @@ interface PickerPopoverSurfaceProps {
   contentClassName?: string;
   dataSlot?: string;
   width?: OverlayWidthPolicy;
+  minWidth?: number;
 }
 
 export function PickerPopoverSurface({
@@ -155,6 +156,7 @@ export function PickerPopoverSurface({
   contentClassName,
   dataSlot,
   width = 'anchor',
+  minWidth,
 }: PickerPopoverSurfaceProps) {
   const contentRef = useRef<View>(null);
   const [dismissEnabled, setDismissEnabled] = useState(false);
@@ -183,6 +185,7 @@ export function PickerPopoverSurface({
     offset: 4,
     collisionBehavior: 'flip-shift',
     width,
+    minWidth,
   });
 
   const excludeRefs = triggerRef ? [anchorRef, triggerRef] : [anchorRef];