@cdx-ui/components 0.1.3 → 0.1.4

package/src/components/Menu/styles.ts

@@ -28,7 +28,6 @@ export const menuRootVariants = cva(
 export const menuItemVariants = cva(
   [
     'flex-row items-center gap-2',
-    'min-h-9',
     'rounded-lg',
     TRANSITION_COLORS,
     'data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none',
@@ -36,80 +35,63 @@ export const menuItemVariants = cva(
     'data-[state=checked]:bg-surface-action-tint data-[state=checked]:font-medium',
     Platform.select({
       default: 'data-[active=true]:bg-surface-action-tint-active',
-      web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active data-[highlighted=true]:bg-surface-action-tint-hover',
+      // Pointer clicks set `data-highlighted` for the roving tab stop. That must not
+      // keep the hover fill after the pointer leaves an unchecked item. Keyboard
+      // focus paints the fill via `data-focus-visible`.
+      web: 'data-[hover=true]:bg-surface-action-tint-hover data-[active=true]:data-[hover=true]:bg-surface-action-tint-active data-[focus-visible=true]:bg-surface-action-tint-hover',
     }),
   ],
   {
     variants: {
       color: {
         neutral: 'text-content-primary',
-        danger:
-          'text-content-danger data-[hover=true]:bg-surface-danger-tint-hover data-[highlighted=true]:bg-surface-danger-tint-hover',
+        danger: [
+          'text-content-danger',
+          'data-[hover=true]:bg-surface-danger-tint-hover',
+          Platform.select({
+            default: 'data-[highlighted=true]:bg-surface-danger-tint-hover',
+            web: 'data-[focus-visible=true]:bg-surface-danger-tint-hover',
+          }),
+        ].join(' '),
       },
       inset: {
-        true: '',
-        false: '',
+        // Label lines up with icon items: px-3 + size-5 icon + gap-2.
+        true: 'ps-8 pe-3 py-2',
+        false: 'px-3 py-2',
       },
-      size: {
-        default: 'px-3 py-2',
-        small: 'px-2.5 py-1.5',
+      layout: {
+        default: 'min-h-9',
+        // Filter padding overrides inset so filter chrome stays compact.
+        filter: 'min-h-0 px-2 py-1.5',
       },
     },
-    compoundVariants: [
-      {
-        inset: true,
-        size: 'default',
-        class: 'ps-8 pe-3 py-2',
-      },
-      {
-        inset: true,
-        size: 'small',
-        class: 'ps-8 pe-2.5 py-1.5',
-      },
-      {
-        inset: false,
-        size: 'default',
-        class: 'px-3 py-2',
-      },
-      {
-        inset: false,
-        size: 'small',
-        class: 'px-2.5 py-1.5',
-      },
-    ],
     defaultVariants: {
       color: 'neutral',
       inset: false,
-      size: 'default',
+      layout: 'default',
     },
   },
 );
 
-export const menuItemLabelVariants = cva(
-  [
-    'text-start',
-    Platform.select({
-      default: 'shrink-0',
-      web: 'min-w-0 flex-1',
-    }),
-  ],
-  {
-    variants: {
-      size: {
-        default: 'text-[0.875rem]',
-        small: 'text-[0.75rem]',
-      },
-      color: {
-        neutral: 'text-content-primary',
-        danger: 'text-content-danger',
-      },
+export const menuItemLabelVariants = cva(['text-start', 'text-[0.875rem]'], {
+  variants: {
+    color: {
+      neutral: 'text-content-primary',
+      danger: 'text-content-danger',
     },
-    defaultVariants: {
-      size: 'default',
-      color: 'neutral',
+    layout: {
+      default: Platform.select({
+        default: 'shrink-0',
+        web: 'min-w-0 flex-1',
+      }),
+      filter: 'min-w-0 flex-1 break-words',
     },
   },
-);
+  defaultVariants: {
+    color: 'neutral',
+    layout: 'default',
+  },
+});
 
 export const menuItemIconVariants = cva(['shrink-0', 'size-5'], {
   variants: {
@@ -149,5 +131,13 @@ export const menuSeparatorVariants = cva([
 
 export const menuSeparatorLineVariants = cva(['h-px w-full bg-stroke-secondary']);
 
+export const menuGroupHeaderVariants = cva(['flex-row items-center gap-2', 'px-2 py-1.5']);
+
+export const menuItemActionVariants = cva(['ms-auto shrink-0']);
+
+export const menuItemControlVariants = cva(['shrink-0']);
+
+export const menuItemCountVariants = cva(['shrink-0 text-content-secondary', 'text-[0.875rem]']);
+
 export type MenuRootVariantProps = VariantProps<typeof menuRootVariants>;
 export type MenuItemVariantProps = VariantProps<typeof menuItemVariants>;

package/src/components/Select/index.tsx

@@ -21,7 +21,7 @@ import {
 import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
 import { Icon, IconProps } from '../Icon';
 import { Menu } from '../Menu';
-import { menuItemLabelVariants, menuItemVariants } from '../Menu/styles';
+import { menuItemVariants } from '../Menu/styles';
 import { positionToDataIcon, type IconSlotPosition } from '../../utils/positionToDataIcon';
 import {
   type SelectVariantProps,
@@ -34,9 +34,6 @@ const SCOPE = 'SELECT';
 
 const useSelectStyleContext = () => useStyleContext(SCOPE) as SelectVariantProps;
 
-const toMenuItemSize = (size: SelectVariantProps['size'] | undefined) =>
-  size === 'small' ? 'small' : 'default';
-
 // =============================================================================
 // STYLED ROOT
 // =============================================================================
@@ -297,10 +294,13 @@ const SelectItem = forwardRef<View, SelectItemProps>(
   ({ asChild, indicator, className, children, style, value: itemValue, ...props }, ref) => {
     const { size } = useSelectStyleContext();
     const { value: selectedValue } = useSelectContext();
-    const menuSize = toMenuItemSize(size);
     const checked = selectedValue === itemValue;
 
-    const computedClassName = cn(menuItemVariants({ size: menuSize }), className);
+    const computedClassName = cn(
+      menuItemVariants(),
+      size === 'small' ? 'px-2.5 py-1.5' : undefined,
+      className,
+    );
     const selectedIndicator =
       indicator === undefined ? (
         <Menu.ItemIndicator isChecked={checked} />
@@ -351,15 +351,13 @@ const SelectItemLabel = forwardRef<Text, SelectItemLabelProps>(
   ({ asChild, className, style, children, ...props }, ref) => {
     const { size } = useSelectStyleContext();
     const { checked } = useSelectItemContext();
-    const menuSize = toMenuItemSize(size);
 
     return (
       <Menu.ItemLabel
         ref={ref}
         asChild={asChild}
         isChecked={checked}
-        size={menuSize}
-        className={cn(menuItemLabelVariants({ size: menuSize }), className)}
+        className={cn(size === 'small' ? 'text-[0.75rem]' : undefined, className)}
         style={style}
         {...props}
         {...mergeDataAttributes(

package/src/components/Tabs/styles.ts

@@ -321,16 +321,15 @@ export const tabsTabLabelVariants = cva('body-md', {
     state: {
       // Selection state is a CVA input (not a `data-[]` selector) so inactive/active
       // typography reconciles on native — `data-[state=active]:` on `Text` is unreliable
-      // there, and `font-sans-medium` / `font-sans-semibold` are the same family on iOS/Android
-      // so weight must come from `font-medium` / `font-semibold` instead.
-      inactive: Platform.select({
-        web: 'font-sans-medium text-content-secondary',
-        default: 'font-medium text-content-secondary',
-      }),
-      active: Platform.select({
-        web: 'font-sans-semibold text-content-primary',
-        default: 'font-semibold text-content-primary',
-      }),
+      // there.
+      //
+      // Weight comes from `font-medium` / `font-semibold` over the family `body-md`
+      // already sets, which is how every other component expresses weight and is
+      // correct on all three platforms. The `font-sans-medium` family tokens are a
+      // native concern (React Native needs a family per face) and are not authoring
+      // API — see packages/styles/src/webFonts.ts.
+      inactive: 'font-medium text-content-secondary',
+      active: 'font-semibold text-content-primary',
     },
   },
   defaultVariants: { state: 'inactive' },

package/src/components/Toast/styles.ts

@@ -132,7 +132,7 @@ export const toastWrapperVariants = cva(
   },
 );
 
-export const toastLabelVariants = cva(['text-base font-sans-medium'], {
+export const toastLabelVariants = cva(['text-base font-medium'], {
   variants: {
     color: {
       neutral: 'text-content-primary',

package/src/components/index.ts

@@ -23,6 +23,7 @@ export * from './DateTimeList';
 export * from './DateTimePicker';
 export * from './Dialog';
 export * from './Divider';
+export * from './Drawer';
 export * from './Field';
 export * from './Form';
 export * from './Image';