@cdx-ui/components 0.3.10 → 0.3.12

package/src/components/DatePicker/index.tsx

@@ -20,6 +20,7 @@ import {
   PickerDialogSurface,
   PickerPopoverSurface,
 } from '../picker/surfaces';
+import { PICKER_CALENDAR_POPOVER_MIN_WIDTH } from '../picker/styles';
 
 export interface DatePickerProps extends DatePickerRootPrimitiveProps, Omit<ViewProps, 'children'> {
   className?: string;
@@ -171,6 +172,7 @@ function DatePickerPopover({ children, className }: { children: ReactNode; class
       registerSurface={ctx.registerSurface}
       anchorRef={ctx.anchorRef}
       triggerRef={ctx.triggerRef}
+      minWidth={PICKER_CALENDAR_POPOVER_MIN_WIDTH}
       className={className}
     >
       <DatePickerContext.Provider value={ctx}>{children}</DatePickerContext.Provider>

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/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];