@cdx-ui/components 0.0.1-beta.57 → 0.0.1-beta.58

package/lib/typescript/figma/ListItem.SectionHeader.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=ListItem.SectionHeader.figma.d.ts.map

package/lib/typescript/figma/ListItem.SectionHeader.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.SectionHeader.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/ListItem.SectionHeader.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAa1B,wBAIE"}

package/lib/typescript/figma/ListItem.Title.figma.d.ts

@@ -0,0 +1,11 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+    };
+};
+export default _default;
+//# sourceMappingURL=ListItem.Title.figma.d.ts.map

package/lib/typescript/figma/ListItem.Title.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.Title.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/ListItem.Title.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;AAM1B,wBAKE"}

package/lib/typescript/figma/ListItem.TrailingSlot.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=ListItem.TrailingSlot.figma.d.ts.map

package/lib/typescript/figma/ListItem.TrailingSlot.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.TrailingSlot.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/ListItem.TrailingSlot.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAS1B,wBAIE"}

package/lib/typescript/figma/ListItem.figma.d.ts

@@ -0,0 +1,8 @@
+import figma from 'figma';
+declare const _default: {
+    id: string;
+    imports: string[];
+    example: figma.TemplateStringResult;
+};
+export default _default;
+//# sourceMappingURL=ListItem.figma.d.ts.map

package/lib/typescript/figma/ListItem.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/ListItem.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AA0C1B,wBASE"}

package/lib/typescript/figma/Text.figma.d.ts

@@ -3,6 +3,9 @@ declare const _default: {
     id: string;
     imports: string[];
     example: figma.TemplateStringResult;
+    metadata: {
+        nestable: boolean;
+    };
 };
 export default _default;
 //# sourceMappingURL=Text.figma.d.ts.map

package/lib/typescript/figma/Text.figma.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Text.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAe1B,wBAIE"}
+{"version":3,"file":"Text.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Text.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;AAe1B,wBAKE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-beta.57",
+  "version": "0.0.1-beta.58",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -67,9 +67,9 @@
     "@gorhom/bottom-sheet": "^5.2.6",
     "class-variance-authority": "^0.7.1",
     "uniwind": "1.6.1",
-    "@cdx-ui/primitives": "0.0.1-beta.57",
-    "@cdx-ui/icons": "0.0.1-beta.57",
-    "@cdx-ui/utils": "0.0.1-beta.57"
+    "@cdx-ui/utils": "0.0.1-beta.58",
+    "@cdx-ui/icons": "0.0.1-beta.58",
+    "@cdx-ui/primitives": "0.0.1-beta.58"
   },
   "devDependencies": {
     "@react-navigation/bottom-tabs": "*",

package/src/components/ListItem/index.tsx

@@ -38,9 +38,9 @@ const ListItemPrimitive = createListItem({
   SectionHeader: View,
 });
 
-const useListItemStyleContext = (): Pick<ListItemVariantProps, 'size' | 'crossAlign'> => {
+const useListItemStyleContext = (): Pick<ListItemVariantProps, 'crossAlign'> => {
   const ctx = useStyleContext(SCOPE) as ListItemVariantProps | undefined;
-  return { size: ctx?.size ?? 'default', crossAlign: ctx?.crossAlign ?? 'center' };
+  return { crossAlign: ctx?.crossAlign ?? 'center' };
 };
 
 // =============================================================================
@@ -53,19 +53,11 @@ export interface ListItemProps extends IListItemProps, WithStyleContextProps {
 
 const ListItemRoot = forwardRef<View, ListItemProps>(
   (
-    {
-      size = 'default',
-      surface = 'default',
-      showSeparator = true,
-      crossAlign = 'center',
-      className,
-      style,
-      ...props
-    },
+    { size = 'default', showSeparator = true, crossAlign = 'center', className, style, ...props },
     ref,
   ) => {
     const computedClassName = cn(
-      listItemRootVariants({ size, surface, showSeparator, crossAlign }),
+      listItemRootVariants({ size, showSeparator, crossAlign }),
       className,
     );
 
@@ -73,12 +65,11 @@ const ListItemRoot = forwardRef<View, ListItemProps>(
       <ListItemPrimitive
         ref={ref as never}
         className={computedClassName}
-        context={{ size, surface, showSeparator, crossAlign }}
+        context={{ crossAlign }}
         crossAlign={crossAlign}
         showSeparator={showSeparator}
         size={size}
         style={style}
-        surface={surface}
         {...props}
       />
     );
@@ -135,12 +126,10 @@ export interface ListItemTitleProps extends TextProps {
 
 const ListItemTitle = forwardRef<Text, ListItemTitleProps>(
   ({ className, numberOfLines = 1, style, ...props }, ref) => {
-    const { size } = useListItemStyleContext();
-
     return (
       <ListItemPrimitive.Title
         ref={ref as never}
-        className={cn(listItemTitleVariants({ size }), className)}
+        className={cn(listItemTitleVariants(), className)}
         numberOfLines={numberOfLines}
         style={style}
         {...props}
@@ -157,12 +146,10 @@ export interface ListItemDescriptionProps extends TextProps {
 
 const ListItemDescription = forwardRef<Text, ListItemDescriptionProps>(
   ({ className, style, ...props }, ref) => {
-    const { size } = useListItemStyleContext();
-
     return (
       <ListItemPrimitive.Description
         ref={ref as never}
-        className={cn(listItemDescriptionVariants({ size }), className)}
+        className={cn(listItemDescriptionVariants(), className)}
         style={style}
         {...props}
       />
@@ -178,12 +165,10 @@ export interface ListItemMetaProps extends TextProps {
 
 const ListItemMeta = forwardRef<Text, ListItemMetaProps>(
   ({ className, numberOfLines = 1, style, ...props }, ref) => {
-    const { size } = useListItemStyleContext();
-
     return (
       <ListItemPrimitive.Meta
         ref={ref as never}
-        className={cn(listItemMetaVariants({ size }), className)}
+        className={cn(listItemMetaVariants(), className)}
         numberOfLines={numberOfLines}
         style={style}
         {...props}

package/src/components/ListItem/styles.ts

@@ -2,36 +2,47 @@ import { Platform } from 'react-native';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { TRANSITION_COLORS } from '../../styles/primitives';
 
-// ── Root (row): density, surface, separator, interactive feedback ──────────
+// ── Root (row): density, separator, interactive feedback ───────────────────
+//
+// Web hover/active/focus paint an absolutely positioned bg-content-primary overlay at
+// --opacity-hover (8%) / --opacity-hover-overlay (20%) / --opacity-selected (12%), plus a focus
+// ring on focus-visible. State is driven by the data attributes the primitive root emits
+// (data-hover / data-active / data-focus-visible) — or by the composed child on `asChild`
+// (e.g. Link emits the same attributes). Native active uses a flat tint because ::before
+// pseudo-elements are web-only.
+//
+// TODO: Handle native background color hover/focus transitions
 
 export const listItemRootVariants = cva(
   [
-    'flex-row self-stretch w-full px-4',
-    'data-[disabled=true]:opacity-50 data-[disabled=true]:pointer-events-none',
-    'data-[active=true]:opacity-70',
+    'relative flex-row self-stretch w-full overflow-clip px-5 bg-transparent',
+    'data-[disabled=true]:opacity-[var(--opacity-disabled)] data-[disabled=true]:pointer-events-none',
     TRANSITION_COLORS,
     Platform.select({
       web: [
         'outline-none',
-        'web:data-[hover=true]:bg-slate-50',
-        'web:focus-visible:data-[disabled=false]:bg-slate-50',
-        'web:focus-visible:data-[disabled=false]:ring-2 web:focus-visible:data-[disabled=false]:ring-slate-400/40 web:focus-visible:data-[disabled=false]:ring-offset-2',
+        'before:pointer-events-none before:absolute before:inset-0 before:bg-content-primary before:opacity-0 before:content-[""]',
+        'before:transition-opacity before:duration-150 before:ease-out',
+        'data-[hover=true]:before:opacity-[var(--opacity-hover)]',
+        // Pressed wins over hover via the compound selector (higher specificity), mirroring Button.
+        'data-[active=true]:data-[hover=true]:before:opacity-[var(--opacity-hover-overlay)]',
+        'data-[focus-visible=true]:before:opacity-[var(--opacity-selected)]',
+        'data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-stroke-focus data-[focus-visible=true]:ring-offset-2',
       ].join(' '),
-      default: '',
+      default: 'data-[active=true]:bg-surface-primary-hover',
     }),
   ],
   {
     variants: {
       size: {
-        default: 'gap-3 py-4',
-        compact: 'gap-2 py-3',
-      },
-      surface: {
-        default: 'bg-white',
-        negative: 'bg-red-50',
+        default: 'gap-3 py-3 min-h-16',
+        compact: 'gap-3 py-2 min-h-12',
       },
       showSeparator: {
-        true: 'border-b border-solid border-stroke-secondary',
+        true: [
+          'border-b border-solid border-stroke-secondary',
+          Platform.select({ web: 'before:-bottom-px', default: '' }),
+        ].join(' '),
         false: 'border-b-0',
       },
       crossAlign: {
@@ -39,18 +50,8 @@ export const listItemRootVariants = cva(
         start: 'items-start',
       },
     },
-    compoundVariants: [
-      {
-        surface: 'negative',
-        className: Platform.select({
-          web: 'web:data-[hover=true]:bg-red-100/90',
-          default: '',
-        }),
-      },
-    ],
     defaultVariants: {
       size: 'default',
-      surface: 'default',
       showSeparator: true,
       crossAlign: 'center',
     },
@@ -59,23 +60,28 @@ export const listItemRootVariants = cva(
 
 // ── Leading / trailing slots ─────────────────────────────────────────────────
 
-export const listItemLeadingSlotVariants = cva(['flex shrink-0 items-center justify-center']);
+export const listItemLeadingSlotVariants = cva([
+  'relative z-10 flex shrink-0 items-center justify-center',
+]);
 
-export const listItemTrailingSlotVariants = cva(['flex shrink-0 flex-row justify-end gap-2'], {
-  variants: {
-    crossAlign: {
-      center: 'items-center',
-      start: 'items-start self-start',
+export const listItemTrailingSlotVariants = cva(
+  ['relative z-10 flex shrink-0 flex-row justify-end gap-2'],
+  {
+    variants: {
+      crossAlign: {
+        center: 'items-center',
+        start: 'items-start self-start',
+      },
+    },
+    defaultVariants: {
+      crossAlign: 'center',
     },
   },
-  defaultVariants: {
-    crossAlign: 'center',
-  },
-});
+);
 
 // ── Content stack (title / description / meta) ───────────────────────────────
 
-export const listItemContentVariants = cva('flex min-w-0 flex-1 flex-col gap-1', {
+export const listItemContentVariants = cva('relative z-10 flex min-w-0 flex-1 flex-col gap-1', {
   variants: {
     crossAlign: {
       center: 'justify-center',
@@ -89,41 +95,11 @@ export const listItemContentVariants = cva('flex min-w-0 flex-1 flex-col gap-1',
 
 // ── Typography ───────────────────────────────────────────────────────────────
 
-export const listItemTitleVariants = cva('text-content-primary font-medium', {
-  variants: {
-    size: {
-      default: 'text-base leading-snug',
-      compact: 'text-sm leading-snug',
-    },
-  },
-  defaultVariants: {
-    size: 'default',
-  },
-});
+export const listItemTitleVariants = cva('body-md font-medium text-content-primary');
 
-export const listItemDescriptionVariants = cva('text-content-secondary', {
-  variants: {
-    size: {
-      default: 'text-sm leading-normal',
-      compact: 'text-xs leading-normal',
-    },
-  },
-  defaultVariants: {
-    size: 'default',
-  },
-});
+export const listItemDescriptionVariants = cva('body-sm text-content-secondary');
 
-export const listItemMetaVariants = cva('text-content-tertiary', {
-  variants: {
-    size: {
-      default: 'text-xs leading-normal',
-      compact: 'text-[11px] leading-normal',
-    },
-  },
-  defaultVariants: {
-    size: 'default',
-  },
-});
+export const listItemMetaVariants = cva('body-sm text-content-tertiary');
 
 // ── Section header (group label row inside lists / cards) ───────────────────