@cdx-ui/components 0.1.3 → 0.1.5

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

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

package/lib/typescript/figma/Switch.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=Switch.figma.d.ts.map

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

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

package/lib/typescript/figma/Tabs.SegmentedControl.Segment.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=Tabs.SegmentedControl.Segment.figma.d.ts.map

package/lib/typescript/figma/Tabs.SegmentedControl.Segment.figma.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.SegmentedControl.Segment.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Tabs.SegmentedControl.Segment.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAgB1B,wBAQE"}

package/lib/typescript/figma/Tabs.SegmentedControl.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=Tabs.SegmentedControl.figma.d.ts.map

package/lib/typescript/figma/Tabs.SegmentedControl.figma.d.ts.map

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

package/lib/typescript/figma/Tabs.Tab.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=Tabs.Tab.figma.d.ts.map

package/lib/typescript/figma/Tabs.Tab.figma.d.ts.map

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

package/lib/typescript/figma/Tabs.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=Tabs.figma.d.ts.map

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

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

package/lib/typescript/figma/Tile.Description.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=Tile.Description.figma.d.ts.map

package/lib/typescript/figma/Tile.Description.figma.d.ts.map

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

package/lib/typescript/figma/Tile.Group.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=Tile.Group.figma.d.ts.map

package/lib/typescript/figma/Tile.Group.figma.d.ts.map

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

package/lib/typescript/figma/Tile.LeadingSlot.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=Tile.LeadingSlot.figma.d.ts.map

package/lib/typescript/figma/Tile.LeadingSlot.figma.d.ts.map

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

package/lib/typescript/figma/Tile.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=Tile.Title.figma.d.ts.map

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

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

package/lib/typescript/figma/Tile.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=Tile.TrailingSlot.figma.d.ts.map

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

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

package/lib/typescript/figma/Tile.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=Tile.figma.d.ts.map

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

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

package/lib/typescript/figma/Toast.Button.figma.d.ts

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

package/lib/typescript/figma/Toast.Button.figma.d.ts.map

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

package/lib/typescript/figma/Toast.Close.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=Toast.Close.figma.d.ts.map

package/lib/typescript/figma/Toast.Close.figma.d.ts.map

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

package/lib/typescript/figma/Toast.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=Toast.figma.d.ts.map

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

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

package/lib/typescript/figma/Tooltip.Content.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=Tooltip.Content.figma.d.ts.map

package/lib/typescript/figma/Tooltip.Content.figma.d.ts.map

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

package/lib/typescript/figma/Tooltip.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=Tooltip.figma.d.ts.map

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

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

package/lib/typescript/figma/VirtualizedList.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=VirtualizedList.figma.d.ts.map

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

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

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/dfh-candescent-ui/ui-component-framework",
+    "url": "https://github.com/dfh-candescent/forge-design-system",
     "directory": "packages/components"
   },
   "main": "lib/commonjs/index.js",
@@ -81,10 +81,10 @@
     "@marceloterreiro/flash-calendar": "2.0.0",
     "react-native-reanimated-carousel": "5.0.0-beta.5",
     "uniwind": "1.10.0",
-    "@cdx-ui/formatters": "0.1.3",
-    "@cdx-ui/utils": "0.1.3",
-    "@cdx-ui/primitives": "0.1.3",
-    "@cdx-ui/icons": "0.1.3"
+    "@cdx-ui/formatters": "0.1.5",
+    "@cdx-ui/primitives": "0.1.5",
+    "@cdx-ui/utils": "0.1.5",
+    "@cdx-ui/icons": "0.1.5"
   },
   "devDependencies": {
     "@react-navigation/bottom-tabs": "*",

package/src/components/Avatar/index.tsx

@@ -50,17 +50,52 @@ function getInitials(name: string): string {
 // AVATAR ROOT
 // =============================================================================
 
-export interface AvatarProps extends ViewProps, IAvatarProps, AvatarVariantProps {
+export type AvatarColor = NonNullable<AvatarVariantProps['color']>;
+export type AvatarVariant = NonNullable<AvatarVariantProps['variant']>;
+export type AvatarShape = NonNullable<AvatarVariantProps['shape']>;
+
+export interface AvatarProps
+  extends ViewProps, IAvatarProps, Omit<AvatarVariantProps, 'color' | 'variant' | 'shape'> {
+  /**
+   * Color theme applied to the avatar surface and fallback content.
+   * @default 'brand'
+   */
+  color?: AvatarColor;
+  /**
+   * Visual style variant.
+   * @default 'subtle'
+   */
+  variant?: AvatarVariant;
+  /**
+   * Geometry of the avatar root and loaded image.
+   * @default 'circle'
+   */
+  shape?: AvatarShape;
   className?: string;
   children?: ReactNode;
 }
 
 const AvatarRoot = forwardRef<View, AvatarProps>(
-  ({ size = 'md', className, children, style, ...props }, ref) => {
-    const computedClassName = cn(avatarRootVariants({ size }), className);
+  (
+    {
+      size = 'md',
+      variant = 'subtle',
+      color = 'brand',
+      shape = 'circle',
+      className,
+      children,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const computedClassName = cn(avatarRootVariants({ size, variant, color, shape }), className);
 
     const parent = useParentContext();
-    const ctx = useMemo(() => ({ ...parent, [SCOPE]: { size } }), [parent, size]);
+    const ctx = useMemo(
+      () => ({ ...parent, [SCOPE]: { size, variant, color, shape } }),
+      [parent, size, variant, color, shape],
+    );
 
     return (
       <ParentContext.Provider value={ctx}>
@@ -92,7 +127,8 @@ export interface AvatarImageProps extends Omit<ImageProps, 'source'>, IAvatarIma
 const AvatarImage = forwardRef<Image, AvatarImageProps>(
   ({ asChild, className, style, src, source, onLoad, onError, ...props }, ref) => {
     const { imageError, setImageLoaded, setImageError } = useAvatarContext();
-    const computedClassName = cn(avatarImageVariants(), className);
+    const { shape } = useAvatarStyleContext();
+    const computedClassName = cn(avatarImageVariants({ shape }), className);
 
     const resolvedSource = useMemo(() => (src ? { uri: src } : source), [src, source]);
 
@@ -146,10 +182,10 @@ export interface AvatarTextProps extends TextProps {
 
 const AvatarText = forwardRef<Text, AvatarTextProps>(
   ({ asChild, className, children, style, ...props }, ref) => {
-    const { size } = useAvatarStyleContext();
+    const { size, color, variant } = useAvatarStyleContext();
     const { imageLoaded, imageError } = useAvatarContext();
     const visible = !imageLoaded || imageError;
-    const computedClassName = cn(avatarTextVariants({ size }), className);
+    const computedClassName = cn(avatarTextVariants({ size, color, variant }), className);
 
     const text = typeof children === 'string' ? getInitials(children) : children;
 
@@ -181,10 +217,10 @@ export interface AvatarIconProps extends Omit<IconProps, 'children'> {
 }
 
 const AvatarIcon = ({ asChild, className, style, ...props }: AvatarIconProps) => {
-  const { size } = useAvatarStyleContext();
+  const { size, color, variant } = useAvatarStyleContext();
   const { imageLoaded, imageError } = useAvatarContext();
   const visible = !imageLoaded || imageError;
-  const computedClassName = cn(avatarIconVariants({ size }), className);
+  const computedClassName = cn(avatarIconVariants({ size, color, variant }), className);
 
   if (asChild) {
     return (

package/src/components/Avatar/styles.ts

@@ -2,42 +2,81 @@ import { cva, type VariantProps } from '@cdx-ui/utils';
 
 // ── Root ─────────────────────────────────────────────────
 
-export const avatarRootVariants = cva(
+export const avatarRootVariants = cva(['relative items-center justify-center'], {
+  variants: {
+    size: {
+      '2xs': 'w-3 h-3',
+      xs: 'w-[18px] h-[18px]',
+      sm: 'w-6 h-6',
+      md: 'w-8 h-8',
+      lg: 'w-10 h-10',
+      xl: 'w-12 h-12',
+      '2xl': 'w-14 h-14',
+    },
+    variant: {
+      subtle: [],
+      solid: [],
+    },
+    color: {
+      neutral: [],
+      brand: [],
+      danger: [],
+      warning: [],
+      success: [],
+      info: [],
+    },
+    shape: {
+      circle: 'rounded-[var(--border-radius-round)]',
+      rounded: 'rounded-[var(--border-radius-default)]',
+    },
+  },
+  compoundVariants: [
+    { variant: 'subtle', color: 'brand', className: 'bg-surface-brand-subtle' },
+    { variant: 'subtle', color: 'neutral', className: 'bg-surface-neutral-subtle' },
+    { variant: 'subtle', color: 'danger', className: 'bg-surface-danger-subtle' },
+    { variant: 'subtle', color: 'warning', className: 'bg-surface-warning-subtle' },
+    { variant: 'subtle', color: 'success', className: 'bg-surface-success-subtle' },
+    { variant: 'subtle', color: 'info', className: 'bg-surface-info-subtle' },
+    { variant: 'solid', color: 'brand', className: 'bg-surface-brand-strong' },
+    { variant: 'solid', color: 'neutral', className: 'bg-surface-neutral-strong' },
+    { variant: 'solid', color: 'danger', className: 'bg-surface-danger-strong' },
+    { variant: 'solid', color: 'warning', className: 'bg-surface-warning-strong' },
+    { variant: 'solid', color: 'success', className: 'bg-surface-success-strong' },
+    { variant: 'solid', color: 'info', className: 'bg-surface-info-strong' },
+  ],
+  defaultVariants: {
+    size: 'md',
+    variant: 'subtle',
+    color: 'brand',
+    shape: 'circle',
+  },
+});
+
+// ── Image ────────────────────────────────────────────────
+
+export const avatarImageVariants = cva(
   [
-    'rounded-[var(--border-radius-round)]',
-    'relative items-center justify-center',
+    'absolute top-0 left-0 w-full h-full',
+    'overflow-hidden',
     'bg-surface-tertiary',
+    'border border-stroke-secondary',
   ],
   {
     variants: {
-      size: {
-        '2xs': 'w-3 h-3',
-        xs: 'w-[18px] h-[18px]',
-        sm: 'w-6 h-6',
-        md: 'w-8 h-8',
-        lg: 'w-10 h-10',
-        xl: 'w-12 h-12',
-        '2xl': 'w-14 h-14',
+      shape: {
+        circle: 'rounded-[var(--border-radius-round)]',
+        rounded: 'rounded-[var(--border-radius-default)]',
       },
     },
     defaultVariants: {
-      size: 'md',
+      shape: 'circle',
     },
   },
 );
 
-// ── Image ────────────────────────────────────────────────
-
-export const avatarImageVariants = cva([
-  'absolute top-0 left-0 w-full h-full',
-  'rounded-[var(--border-radius-round)]',
-  'overflow-hidden',
-  'border border-stroke-secondary',
-]);
-
 // ── Text ─────────────────────────────────────────────────
 
-export const avatarTextVariants = cva(['text-content-primary', 'font-medium'], {
+export const avatarTextVariants = cva(['font-medium'], {
   variants: {
     size: {
       '2xs': 'text-[6px]',
@@ -48,15 +87,37 @@ export const avatarTextVariants = cva(['text-content-primary', 'font-medium'], {
       xl: 'text-2xl',
       '2xl': 'text-[28px]',
     },
+    variant: {
+      subtle: 'text-content-primary',
+      solid: [],
+    },
+    color: {
+      neutral: [],
+      brand: [],
+      danger: [],
+      warning: [],
+      success: [],
+      info: [],
+    },
   },
+  compoundVariants: [
+    { variant: 'solid', color: 'brand', className: 'text-content-brand-on-strong' },
+    { variant: 'solid', color: 'neutral', className: 'text-content-neutral-on-strong' },
+    { variant: 'solid', color: 'danger', className: 'text-content-danger-on-strong' },
+    { variant: 'solid', color: 'warning', className: 'text-content-warning-on-strong' },
+    { variant: 'solid', color: 'success', className: 'text-content-success-on-strong' },
+    { variant: 'solid', color: 'info', className: 'text-content-info-on-strong' },
+  ],
   defaultVariants: {
     size: 'md',
+    variant: 'subtle',
+    color: 'brand',
   },
 });
 
 // ── Icon ─────────────────────────────────────────────────
 
-export const avatarIconVariants = cva(['text-content-primary'], {
+export const avatarIconVariants = cva([], {
   variants: {
     size: {
       '2xs': 'size-1.5',
@@ -67,9 +128,31 @@ export const avatarIconVariants = cva(['text-content-primary'], {
       xl: 'size-6',
       '2xl': 'size-7',
     },
+    variant: {
+      subtle: 'text-content-primary',
+      solid: [],
+    },
+    color: {
+      neutral: [],
+      brand: [],
+      danger: [],
+      warning: [],
+      success: [],
+      info: [],
+    },
   },
+  compoundVariants: [
+    { variant: 'solid', color: 'brand', className: 'text-content-brand-on-strong' },
+    { variant: 'solid', color: 'neutral', className: 'text-content-neutral-on-strong' },
+    { variant: 'solid', color: 'danger', className: 'text-content-danger-on-strong' },
+    { variant: 'solid', color: 'warning', className: 'text-content-warning-on-strong' },
+    { variant: 'solid', color: 'success', className: 'text-content-success-on-strong' },
+    { variant: 'solid', color: 'info', className: 'text-content-info-on-strong' },
+  ],
   defaultVariants: {
     size: 'md',
+    variant: 'subtle',
+    color: 'brand',
   },
 });
 

package/src/components/CLAUDE.md

@@ -9,7 +9,7 @@ styled component files (`index.tsx`) and their co-located CVA variant files (`st
 
 Styled components in `@cdx-ui/components` follow a consistent pattern. Read the full guides before making changes:
 
-- `docs/internal/practices/composition.md` — compound component pattern, naming conventions
+- `docs/internal/practices/composition.md` — compound component pattern, naming conventions, layout partition (when a parent may sort its children into regions)
 - `docs/internal/practices/types.md` — prop types, `I*Props` vs `*Props`, exporting
 - `docs/internal/practices/styling.md` — `cn()`, CVA, token classes, `Platform.select()`
 - `docs/internal/practices/state.md` — `useControllableState`, `composeEventHandlers`
@@ -140,6 +140,7 @@ Each component follows this structure (see `Button/index.tsx`):
 - **`data-slot`** emitted on every styled slot via `dataAttributes({ slot: '<component>-<part>' })`
 - **`asChild`** supported on every styled slot — `const Comp = asChild ? Slot : DefaultElement`
 - **`position`** prop on icon/spinner-style slots maps to `data-icon="inline-start|inline-end"`
+- **Layout partition** — a parent sorts its direct children into regions only for a fixed row of two or three known slots (Alert, `Drawer.Header`). Match `child.type` identity, never `displayName`; keep the shared wrapper unexported with no `data-slot`; never add a public grandchild layout slot. `memo()`/HOC wrappers are not recognized, extra slotted children are dropped, `asChild` skips the split, and tests must assert region, not presence. See `composition.md` § Layout Partition
 
 ---
 

package/src/components/Chip/styles.ts

@@ -238,7 +238,7 @@ export const chipIconVariants = cva(['shrink-0'], {
   },
 });
 
-export const chipAvatarVariants = cva(['shrink-0 rounded-full overflow-hidden'], {
+export const chipAvatarVariants = cva(['shrink-0 overflow-hidden'], {
   variants: {
     size: {
       default: 'size-5 -ms-1.5',

package/src/components/Drawer/animation.ts

@@ -0,0 +1,11 @@
+import type { SharedValue } from 'react-native-reanimated';
+import { createContext } from '@cdx-ui/utils';
+
+export interface DrawerAnimationContextValue {
+  progress: SharedValue<number>;
+}
+
+export const [DrawerAnimationProvider, useDrawerAnimation] =
+  createContext<DrawerAnimationContextValue>('DrawerAnimationContext', {
+    strict: false,
+  });