@cdx-ui/components 0.0.1-beta.36 → 0.0.1-beta.37

package/lib/commonjs/components/Avatar/index.js

@@ -27,7 +27,7 @@ const AvatarPrimitive = (0, _primitives.createAvatar)({
 // =============================================================================
 
 const AvatarRoot = /*#__PURE__*/(0, _react.forwardRef)(({
-  size = 'lg',
+  size = 'md',
   className,
   children,
   style,

package/lib/commonjs/components/Avatar/styles.js

@@ -5,76 +5,83 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.avatarTextVariants = exports.avatarRootVariants = exports.avatarImageVariants = exports.avatarIconVariants = exports.avatarBadgeVariants = void 0;
 var _classVarianceAuthority = require("class-variance-authority");
-var _primitives = require("../../styles/primitives");
 // ── Root ─────────────────────────────────────────────────
 
-const avatarRootVariants = exports.avatarRootVariants = (0, _classVarianceAuthority.cva)([_primitives.RADIUS_FULL, 'relative items-center justify-center', _primitives.COLOR_BG_MUTED], {
+const avatarRootVariants = exports.avatarRootVariants = (0, _classVarianceAuthority.cva)(['rounded-[var(--border-radius-round)]', 'relative items-center justify-center', 'bg-surface-tertiary'], {
   variants: {
     size: {
-      sm: 'w-8 h-8',
-      md: 'w-10 h-10',
-      lg: 'w-12 h-12',
-      xl: 'w-16 h-16',
-      '2xl': 'w-20 h-20'
+      '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'
     }
   },
   defaultVariants: {
-    size: 'lg'
+    size: 'md'
   }
 });
 
 // ── Image ────────────────────────────────────────────────
 
-const avatarImageVariants = exports.avatarImageVariants = (0, _classVarianceAuthority.cva)(['absolute top-0 left-0 w-full h-full', _primitives.RADIUS_FULL, 'overflow-hidden']);
+const avatarImageVariants = exports.avatarImageVariants = (0, _classVarianceAuthority.cva)(['absolute top-0 left-0 w-full h-full', 'rounded-[var(--border-radius-round)]', 'overflow-hidden', 'border border-stroke-secondary']);
 
 // ── Text ─────────────────────────────────────────────────
 
-const avatarTextVariants = exports.avatarTextVariants = (0, _classVarianceAuthority.cva)([_primitives.COLOR_TEXT_SECONDARY, 'font-semibold'], {
+const avatarTextVariants = exports.avatarTextVariants = (0, _classVarianceAuthority.cva)(['text-content-primary', 'font-medium'], {
   variants: {
     size: {
+      '2xs': 'text-[6px]',
+      xs: 'text-[9px]',
       sm: 'text-xs',
-      md: 'text-sm',
-      lg: 'text-base',
-      xl: 'text-xl',
-      '2xl': 'text-2xl'
+      md: 'text-base',
+      lg: 'text-xl',
+      xl: 'text-2xl',
+      '2xl': 'text-[28px]'
     }
   },
   defaultVariants: {
-    size: 'lg'
+    size: 'md'
   }
 });
 
 // ── Icon ─────────────────────────────────────────────────
 
-const avatarIconVariants = exports.avatarIconVariants = (0, _classVarianceAuthority.cva)([_primitives.COLOR_TEXT_SECONDARY], {
+const avatarIconVariants = exports.avatarIconVariants = (0, _classVarianceAuthority.cva)(['text-content-primary'], {
   variants: {
     size: {
-      sm: 'size-4',
-      md: 'size-5',
-      lg: 'size-6',
-      xl: 'size-8',
-      '2xl': 'size-10'
+      '2xs': 'size-1.5',
+      xs: 'size-[9px]',
+      sm: 'size-3',
+      md: 'size-4',
+      lg: 'size-5',
+      xl: 'size-6',
+      '2xl': 'size-7'
     }
   },
   defaultVariants: {
-    size: 'lg'
+    size: 'md'
   }
 });
 
 // ── Badge ────────────────────────────────────────────────
 
-const avatarBadgeVariants = exports.avatarBadgeVariants = (0, _classVarianceAuthority.cva)(['absolute border-2 border-white', _primitives.RADIUS_FULL], {
+const avatarBadgeVariants = exports.avatarBadgeVariants = (0, _classVarianceAuthority.cva)(['absolute border-white', 'rounded-[var(--border-radius-round)]', 'bottom-0 right-0'], {
   variants: {
     size: {
-      sm: 'w-2.5 h-2.5 bottom-0 right-0',
-      md: 'w-3 h-3 bottom-0 right-0',
-      lg: 'w-3.5 h-3.5 bottom-0 right-0',
-      xl: 'w-4 h-4 bottom-0.5 right-0.5',
-      '2xl': 'w-5 h-5 bottom-0.5 right-0.5'
+      '2xs': 'w-1.5 h-1.5 border translate-x-[21%] translate-y-[21%]',
+      xs: 'w-2 h-2 border translate-x-[17%] translate-y-[17%]',
+      sm: 'w-2.5 h-2.5 border-2 translate-x-[15%] translate-y-[15%]',
+      md: 'w-3 h-3 border-2 translate-x-[11%] translate-y-[11%]',
+      lg: 'w-3.5 h-3.5 border-2 translate-x-[8%] translate-y-[8%]',
+      xl: 'w-4 h-4 border-2 translate-x-[6%] translate-y-[6%]',
+      '2xl': 'w-5 h-5 border-2 translate-x-[9%] translate-y-[9%]'
     }
   },
   defaultVariants: {
-    size: 'lg'
+    size: 'md'
   }
 });
 //# sourceMappingURL=styles.js.map

package/lib/commonjs/components/Avatar/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classVarianceAuthority","require","_primitives","avatarRootVariants","exports","cva","RADIUS_FULL","COLOR_BG_MUTED","variants","size","sm","md","lg","xl","defaultVariants","avatarImageVariants","avatarTextVariants","COLOR_TEXT_SECONDARY","avatarIconVariants","avatarBadgeVariants"],"sourceRoot":"../../../../src","sources":["components/Avatar/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,uBAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAEA;;AAEO,MAAME,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAG,IAAAE,2BAAG,EACnC,CAACC,uBAAW,EAAE,sCAAsC,EAAEC,0BAAc,CAAC,EACrE;EACEC,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACf,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,IAAI,EAAE;EACR;AACF,CACF,CAAC;;AAED;;AAEO,MAAMM,mBAAmB,GAAAX,OAAA,CAAAW,mBAAA,GAAG,IAAAV,2BAAG,EAAC,CACrC,qCAAqC,EACrCC,uBAAW,EACX,iBAAiB,CAClB,CAAC;;AAEF;;AAEO,MAAMU,kBAAkB,GAAAZ,OAAA,CAAAY,kBAAA,GAAG,IAAAX,2BAAG,EAAC,CAACY,gCAAoB,EAAE,eAAe,CAAC,EAAE;EAC7ET,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,SAAS;MACb,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,IAAI,EAAE;EACR;AACF,CAAC,CAAC;;AAEF;;AAEO,MAAMS,kBAAkB,GAAAd,OAAA,CAAAc,kBAAA,GAAG,IAAAb,2BAAG,EAAC,CAACY,gCAAoB,CAAC,EAAE;EAC5DT,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,EAAE,EAAE,QAAQ;MACZC,EAAE,EAAE,QAAQ;MACZC,EAAE,EAAE,QAAQ;MACZC,EAAE,EAAE,QAAQ;MACZ,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,IAAI,EAAE;EACR;AACF,CAAC,CAAC;;AAEF;;AAEO,MAAMU,mBAAmB,GAAAf,OAAA,CAAAe,mBAAA,GAAG,IAAAd,2BAAG,EAAC,CAAC,gCAAgC,EAAEC,uBAAW,CAAC,EAAE;EACtFE,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,EAAE,EAAE,8BAA8B;MAClCC,EAAE,EAAE,0BAA0B;MAC9BC,EAAE,EAAE,8BAA8B;MAClCC,EAAE,EAAE,8BAA8B;MAClC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_classVarianceAuthority","require","avatarRootVariants","exports","cva","variants","size","xs","sm","md","lg","xl","defaultVariants","avatarImageVariants","avatarTextVariants","avatarIconVariants","avatarBadgeVariants"],"sourceRoot":"../../../../src","sources":["components/Avatar/styles.ts"],"mappings":";;;;;;AAAA,IAAAA,uBAAA,GAAAC,OAAA;AAEA;;AAEO,MAAMC,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAG,IAAAE,2BAAG,EACnC,CACE,sCAAsC,EACtC,sCAAsC,EACtC,qBAAqB,CACtB,EACD;EACEC,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJ,KAAK,EAAE,SAAS;MAChBC,EAAE,EAAE,mBAAmB;MACvBC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACf,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfN,IAAI,EAAE;EACR;AACF,CACF,CAAC;;AAED;;AAEO,MAAMO,mBAAmB,GAAAV,OAAA,CAAAU,mBAAA,GAAG,IAAAT,2BAAG,EAAC,CACrC,qCAAqC,EACrC,sCAAsC,EACtC,iBAAiB,EACjB,gCAAgC,CACjC,CAAC;;AAEF;;AAEO,MAAMU,kBAAkB,GAAAX,OAAA,CAAAW,kBAAA,GAAG,IAAAV,2BAAG,EAAC,CAAC,sBAAsB,EAAE,aAAa,CAAC,EAAE;EAC7EC,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJ,KAAK,EAAE,YAAY;MACnBC,EAAE,EAAE,YAAY;MAChBC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,UAAU;MACd,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfN,IAAI,EAAE;EACR;AACF,CAAC,CAAC;;AAEF;;AAEO,MAAMS,kBAAkB,GAAAZ,OAAA,CAAAY,kBAAA,GAAG,IAAAX,2BAAG,EAAC,CAAC,sBAAsB,CAAC,EAAE;EAC9DC,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJ,KAAK,EAAE,UAAU;MACjBC,EAAE,EAAE,YAAY;MAChBC,EAAE,EAAE,QAAQ;MACZC,EAAE,EAAE,QAAQ;MACZC,EAAE,EAAE,QAAQ;MACZC,EAAE,EAAE,QAAQ;MACZ,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfN,IAAI,EAAE;EACR;AACF,CAAC,CAAC;;AAEF;;AAEO,MAAMU,mBAAmB,GAAAb,OAAA,CAAAa,mBAAA,GAAG,IAAAZ,2BAAG,EACpC,CAAC,uBAAuB,EAAE,sCAAsC,EAAE,kBAAkB,CAAC,EACrF;EACEC,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJ,KAAK,EAAE,wDAAwD;MAC/DC,EAAE,EAAE,oDAAoD;MACxDC,EAAE,EAAE,0DAA0D;MAC9DC,EAAE,EAAE,sDAAsD;MAC1DC,EAAE,EAAE,wDAAwD;MAC5DC,EAAE,EAAE,oDAAoD;MACxD,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfN,IAAI,EAAE;EACR;AACF,CACF,CAAC","ignoreList":[]}

package/lib/commonjs/figma/Avatar.figma.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _figma = _interopRequireDefault(require("figma"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=449-377
+// source=packages/components/src/components/Avatar/index.tsx
+// component=Avatar
+
+const instance = _figma.default.selectedInstance;
+
+// size: 1:1 mapping between Figma and code values
+const size = instance.getEnum('size', {
+  '2xs': '2xs',
+  xs: 'xs',
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+  xl: 'xl',
+  '2xl': '2xl'
+});
+
+// type: VARIANT — determines which Avatar sub-component to render.
+// Not a code prop; used only to choose Avatar.Image, Avatar.Text, or Avatar.Icon.
+const type = instance.getEnum('type', {
+  image: 'image',
+  text: 'text',
+  icon: 'icon'
+});
+
+// icon: INSTANCE_SWAP → Avatar.Icon `as` prop (CdxIcon identifier).
+// Prefer metadata.props.componentName exposed by icon Code Connect templates.
+// Falls back to executeTemplate().example (placeholder pill) when the icon lacks Code Connect.
+const iconResult = instance.getInstanceSwap('icon')?.executeTemplate();
+const iconName = iconResult?.metadata?.props?.componentName;
+const iconSnippet = iconName ?? iconResult?.example;
+const iconImports = iconName ? [`import { ${iconName} } from '@cdx-ui/icons'`] : [];
+
+// text: TEXT property — the initials or label rendered inside Avatar.Text
+const textContent = instance.getString('text');
+var _default = exports.default = {
+  id: 'avatar',
+  imports: ["import { Avatar } from '@cdx-ui/components'", ...iconImports],
+  example: _figma.default.code`
+<Avatar size="${size}">
+  ${type === 'image' ? _figma.default.code`<Avatar.Image src="..." />` : null}
+  ${type === 'text' ? _figma.default.code`<Avatar.Text>${textContent}</Avatar.Text>` : null}
+  ${type === 'icon' ? _figma.default.code`<Avatar.Icon as={${iconSnippet}} />` : null}
+</Avatar>`
+};
+//# sourceMappingURL=Avatar.figma.js.map

package/lib/commonjs/figma/Avatar.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_figma","_interopRequireDefault","require","e","__esModule","default","instance","figma","selectedInstance","size","getEnum","xs","sm","md","lg","xl","type","image","text","icon","iconResult","getInstanceSwap","executeTemplate","iconName","metadata","props","componentName","iconSnippet","example","iconImports","textContent","getString","_default","exports","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Avatar.figma.ts"],"mappings":";;;;;;AAGA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA0B,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAH1B;AACA;AACA;;AAGA,MAAMG,QAAQ,GAAGC,cAAK,CAACC,gBAAgB;;AAEvC;AACA,MAAMC,IAAI,GAAGH,QAAQ,CAACI,OAAO,CAAC,MAAM,EAAE;EACpC,KAAK,EAAE,KAAK;EACZC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE,IAAI;EACR,KAAK,EAAE;AACT,CAAC,CAAC;;AAEF;AACA;AACA,MAAMC,IAAI,GAAGV,QAAQ,CAACI,OAAO,CAAC,MAAM,EAAE;EACpCO,KAAK,EAAE,OAAO;EACdC,IAAI,EAAE,MAAM;EACZC,IAAI,EAAE;AACR,CAAC,CAAC;;AAEF;AACA;AACA;AACA,MAAMC,UAAU,GAAGd,QAAQ,CAACe,eAAe,CAAC,MAAM,CAAC,EAAEC,eAAe,CAAC,CAAC;AACtE,MAAMC,QAAQ,GAAGH,UAAU,EAAEI,QAAQ,EAAEC,KAAK,EAAEC,aAAmC;AACjF,MAAMC,WAAW,GAAGJ,QAAQ,IAAIH,UAAU,EAAEQ,OAAO;AAEnD,MAAMC,WAAW,GAAGN,QAAQ,GAAG,CAAC,YAAYA,QAAQ,yBAAyB,CAAC,GAAG,EAAE;;AAEnF;AACA,MAAMO,WAAW,GAAGxB,QAAQ,CAACyB,SAAS,CAAC,MAAM,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA5B,OAAA,GAEhC;EACb6B,EAAE,EAAE,QAAQ;EACZC,OAAO,EAAE,CAAC,6CAA6C,EAAE,GAAGN,WAAW,CAAC;EACxED,OAAO,EAAErB,cAAK,CAAC6B,IAAI;AACrB,gBAAgB3B,IAAI;AACpB,IAAIO,IAAI,KAAK,OAAO,GAAGT,cAAK,CAAC6B,IAAI,4BAA4B,GAAG,IAAI;AACpE,IAAIpB,IAAI,KAAK,MAAM,GAAGT,cAAK,CAAC6B,IAAI,gBAAgBN,WAAW,gBAAgB,GAAG,IAAI;AAClF,IAAId,IAAI,KAAK,MAAM,GAAGT,cAAK,CAAC6B,IAAI,oBAAoBT,WAAW,MAAM,GAAG,IAAI;AAC5E;AACA,CAAC","ignoreList":[]}

package/lib/module/components/Avatar/index.js

@@ -23,7 +23,7 @@ const AvatarPrimitive = createAvatar({
 // =============================================================================
 
 const AvatarRoot = /*#__PURE__*/forwardRef(({
-  size = 'lg',
+  size = 'md',
   className,
   children,
   style,

package/lib/module/components/Avatar/styles.js

@@ -1,77 +1,84 @@
 "use strict";
 
 import { cva } from 'class-variance-authority';
-import { COLOR_BG_MUTED, COLOR_TEXT_SECONDARY, RADIUS_FULL } from '../../styles/primitives';
 
 // ── Root ─────────────────────────────────────────────────
 
-export const avatarRootVariants = cva([RADIUS_FULL, 'relative items-center justify-center', COLOR_BG_MUTED], {
+export const avatarRootVariants = cva(['rounded-[var(--border-radius-round)]', 'relative items-center justify-center', 'bg-surface-tertiary'], {
   variants: {
     size: {
-      sm: 'w-8 h-8',
-      md: 'w-10 h-10',
-      lg: 'w-12 h-12',
-      xl: 'w-16 h-16',
-      '2xl': 'w-20 h-20'
+      '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'
     }
   },
   defaultVariants: {
-    size: 'lg'
+    size: 'md'
   }
 });
 
 // ── Image ────────────────────────────────────────────────
 
-export const avatarImageVariants = cva(['absolute top-0 left-0 w-full h-full', RADIUS_FULL, 'overflow-hidden']);
+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([COLOR_TEXT_SECONDARY, 'font-semibold'], {
+export const avatarTextVariants = cva(['text-content-primary', 'font-medium'], {
   variants: {
     size: {
+      '2xs': 'text-[6px]',
+      xs: 'text-[9px]',
       sm: 'text-xs',
-      md: 'text-sm',
-      lg: 'text-base',
-      xl: 'text-xl',
-      '2xl': 'text-2xl'
+      md: 'text-base',
+      lg: 'text-xl',
+      xl: 'text-2xl',
+      '2xl': 'text-[28px]'
     }
   },
   defaultVariants: {
-    size: 'lg'
+    size: 'md'
   }
 });
 
 // ── Icon ─────────────────────────────────────────────────
 
-export const avatarIconVariants = cva([COLOR_TEXT_SECONDARY], {
+export const avatarIconVariants = cva(['text-content-primary'], {
   variants: {
     size: {
-      sm: 'size-4',
-      md: 'size-5',
-      lg: 'size-6',
-      xl: 'size-8',
-      '2xl': 'size-10'
+      '2xs': 'size-1.5',
+      xs: 'size-[9px]',
+      sm: 'size-3',
+      md: 'size-4',
+      lg: 'size-5',
+      xl: 'size-6',
+      '2xl': 'size-7'
     }
   },
   defaultVariants: {
-    size: 'lg'
+    size: 'md'
   }
 });
 
 // ── Badge ────────────────────────────────────────────────
 
-export const avatarBadgeVariants = cva(['absolute border-2 border-white', RADIUS_FULL], {
+export const avatarBadgeVariants = cva(['absolute border-white', 'rounded-[var(--border-radius-round)]', 'bottom-0 right-0'], {
   variants: {
     size: {
-      sm: 'w-2.5 h-2.5 bottom-0 right-0',
-      md: 'w-3 h-3 bottom-0 right-0',
-      lg: 'w-3.5 h-3.5 bottom-0 right-0',
-      xl: 'w-4 h-4 bottom-0.5 right-0.5',
-      '2xl': 'w-5 h-5 bottom-0.5 right-0.5'
+      '2xs': 'w-1.5 h-1.5 border translate-x-[21%] translate-y-[21%]',
+      xs: 'w-2 h-2 border translate-x-[17%] translate-y-[17%]',
+      sm: 'w-2.5 h-2.5 border-2 translate-x-[15%] translate-y-[15%]',
+      md: 'w-3 h-3 border-2 translate-x-[11%] translate-y-[11%]',
+      lg: 'w-3.5 h-3.5 border-2 translate-x-[8%] translate-y-[8%]',
+      xl: 'w-4 h-4 border-2 translate-x-[6%] translate-y-[6%]',
+      '2xl': 'w-5 h-5 border-2 translate-x-[9%] translate-y-[9%]'
     }
   },
   defaultVariants: {
-    size: 'lg'
+    size: 'md'
   }
 });
 //# sourceMappingURL=styles.js.map

package/lib/module/components/Avatar/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["cva","COLOR_BG_MUTED","COLOR_TEXT_SECONDARY","RADIUS_FULL","avatarRootVariants","variants","size","sm","md","lg","xl","defaultVariants","avatarImageVariants","avatarTextVariants","avatarIconVariants","avatarBadgeVariants"],"sourceRoot":"../../../../src","sources":["components/Avatar/styles.ts"],"mappings":";;AAAA,SAASA,GAAG,QAA2B,0BAA0B;AACjE,SAASC,cAAc,EAAEC,oBAAoB,EAAEC,WAAW,QAAQ,yBAAyB;;AAE3F;;AAEA,OAAO,MAAMC,kBAAkB,GAAGJ,GAAG,CACnC,CAACG,WAAW,EAAE,sCAAsC,EAAEF,cAAc,CAAC,EACrE;EACEI,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACf,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,IAAI,EAAE;EACR;AACF,CACF,CAAC;;AAED;;AAEA,OAAO,MAAMM,mBAAmB,GAAGZ,GAAG,CAAC,CACrC,qCAAqC,EACrCG,WAAW,EACX,iBAAiB,CAClB,CAAC;;AAEF;;AAEA,OAAO,MAAMU,kBAAkB,GAAGb,GAAG,CAAC,CAACE,oBAAoB,EAAE,eAAe,CAAC,EAAE;EAC7EG,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,SAAS;MACb,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,IAAI,EAAE;EACR;AACF,CAAC,CAAC;;AAEF;;AAEA,OAAO,MAAMQ,kBAAkB,GAAGd,GAAG,CAAC,CAACE,oBAAoB,CAAC,EAAE;EAC5DG,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,EAAE,EAAE,QAAQ;MACZC,EAAE,EAAE,QAAQ;MACZC,EAAE,EAAE,QAAQ;MACZC,EAAE,EAAE,QAAQ;MACZ,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,IAAI,EAAE;EACR;AACF,CAAC,CAAC;;AAEF;;AAEA,OAAO,MAAMS,mBAAmB,GAAGf,GAAG,CAAC,CAAC,gCAAgC,EAAEG,WAAW,CAAC,EAAE;EACtFE,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,EAAE,EAAE,8BAA8B;MAClCC,EAAE,EAAE,0BAA0B;MAC9BC,EAAE,EAAE,8BAA8B;MAClCC,EAAE,EAAE,8BAA8B;MAClC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["cva","avatarRootVariants","variants","size","xs","sm","md","lg","xl","defaultVariants","avatarImageVariants","avatarTextVariants","avatarIconVariants","avatarBadgeVariants"],"sourceRoot":"../../../../src","sources":["components/Avatar/styles.ts"],"mappings":";;AAAA,SAASA,GAAG,QAA2B,0BAA0B;;AAEjE;;AAEA,OAAO,MAAMC,kBAAkB,GAAGD,GAAG,CACnC,CACE,sCAAsC,EACtC,sCAAsC,EACtC,qBAAqB,CACtB,EACD;EACEE,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJ,KAAK,EAAE,SAAS;MAChBC,EAAE,EAAE,mBAAmB;MACvBC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACf,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfN,IAAI,EAAE;EACR;AACF,CACF,CAAC;;AAED;;AAEA,OAAO,MAAMO,mBAAmB,GAAGV,GAAG,CAAC,CACrC,qCAAqC,EACrC,sCAAsC,EACtC,iBAAiB,EACjB,gCAAgC,CACjC,CAAC;;AAEF;;AAEA,OAAO,MAAMW,kBAAkB,GAAGX,GAAG,CAAC,CAAC,sBAAsB,EAAE,aAAa,CAAC,EAAE;EAC7EE,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJ,KAAK,EAAE,YAAY;MACnBC,EAAE,EAAE,YAAY;MAChBC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,UAAU;MACd,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfN,IAAI,EAAE;EACR;AACF,CAAC,CAAC;;AAEF;;AAEA,OAAO,MAAMS,kBAAkB,GAAGZ,GAAG,CAAC,CAAC,sBAAsB,CAAC,EAAE;EAC9DE,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJ,KAAK,EAAE,UAAU;MACjBC,EAAE,EAAE,YAAY;MAChBC,EAAE,EAAE,QAAQ;MACZC,EAAE,EAAE,QAAQ;MACZC,EAAE,EAAE,QAAQ;MACZC,EAAE,EAAE,QAAQ;MACZ,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfN,IAAI,EAAE;EACR;AACF,CAAC,CAAC;;AAEF;;AAEA,OAAO,MAAMU,mBAAmB,GAAGb,GAAG,CACpC,CAAC,uBAAuB,EAAE,sCAAsC,EAAE,kBAAkB,CAAC,EACrF;EACEE,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJ,KAAK,EAAE,wDAAwD;MAC/DC,EAAE,EAAE,oDAAoD;MACxDC,EAAE,EAAE,0DAA0D;MAC9DC,EAAE,EAAE,sDAAsD;MAC1DC,EAAE,EAAE,wDAAwD;MAC5DC,EAAE,EAAE,oDAAoD;MACxD,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfN,IAAI,EAAE;EACR;AACF,CACF,CAAC","ignoreList":[]}

package/lib/module/figma/Avatar.figma.js

@@ -0,0 +1,48 @@
+"use strict";
+
+// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=449-377
+// source=packages/components/src/components/Avatar/index.tsx
+// component=Avatar
+import figma from 'figma';
+const instance = figma.selectedInstance;
+
+// size: 1:1 mapping between Figma and code values
+const size = instance.getEnum('size', {
+  '2xs': '2xs',
+  xs: 'xs',
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+  xl: 'xl',
+  '2xl': '2xl'
+});
+
+// type: VARIANT — determines which Avatar sub-component to render.
+// Not a code prop; used only to choose Avatar.Image, Avatar.Text, or Avatar.Icon.
+const type = instance.getEnum('type', {
+  image: 'image',
+  text: 'text',
+  icon: 'icon'
+});
+
+// icon: INSTANCE_SWAP → Avatar.Icon `as` prop (CdxIcon identifier).
+// Prefer metadata.props.componentName exposed by icon Code Connect templates.
+// Falls back to executeTemplate().example (placeholder pill) when the icon lacks Code Connect.
+const iconResult = instance.getInstanceSwap('icon')?.executeTemplate();
+const iconName = iconResult?.metadata?.props?.componentName;
+const iconSnippet = iconName ?? iconResult?.example;
+const iconImports = iconName ? [`import { ${iconName} } from '@cdx-ui/icons'`] : [];
+
+// text: TEXT property — the initials or label rendered inside Avatar.Text
+const textContent = instance.getString('text');
+export default {
+  id: 'avatar',
+  imports: ["import { Avatar } from '@cdx-ui/components'", ...iconImports],
+  example: figma.code`
+<Avatar size="${size}">
+  ${type === 'image' ? figma.code`<Avatar.Image src="..." />` : null}
+  ${type === 'text' ? figma.code`<Avatar.Text>${textContent}</Avatar.Text>` : null}
+  ${type === 'icon' ? figma.code`<Avatar.Icon as={${iconSnippet}} />` : null}
+</Avatar>`
+};
+//# sourceMappingURL=Avatar.figma.js.map

package/lib/module/figma/Avatar.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","instance","selectedInstance","size","getEnum","xs","sm","md","lg","xl","type","image","text","icon","iconResult","getInstanceSwap","executeTemplate","iconName","metadata","props","componentName","iconSnippet","example","iconImports","textContent","getString","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Avatar.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA,MAAMC,IAAI,GAAGF,QAAQ,CAACG,OAAO,CAAC,MAAM,EAAE;EACpC,KAAK,EAAE,KAAK;EACZC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE,IAAI;EACR,KAAK,EAAE;AACT,CAAC,CAAC;;AAEF;AACA;AACA,MAAMC,IAAI,GAAGT,QAAQ,CAACG,OAAO,CAAC,MAAM,EAAE;EACpCO,KAAK,EAAE,OAAO;EACdC,IAAI,EAAE,MAAM;EACZC,IAAI,EAAE;AACR,CAAC,CAAC;;AAEF;AACA;AACA;AACA,MAAMC,UAAU,GAAGb,QAAQ,CAACc,eAAe,CAAC,MAAM,CAAC,EAAEC,eAAe,CAAC,CAAC;AACtE,MAAMC,QAAQ,GAAGH,UAAU,EAAEI,QAAQ,EAAEC,KAAK,EAAEC,aAAmC;AACjF,MAAMC,WAAW,GAAGJ,QAAQ,IAAIH,UAAU,EAAEQ,OAAO;AAEnD,MAAMC,WAAW,GAAGN,QAAQ,GAAG,CAAC,YAAYA,QAAQ,yBAAyB,CAAC,GAAG,EAAE;;AAEnF;AACA,MAAMO,WAAW,GAAGvB,QAAQ,CAACwB,SAAS,CAAC,MAAM,CAAC;AAE9C,eAAe;EACbC,EAAE,EAAE,QAAQ;EACZC,OAAO,EAAE,CAAC,6CAA6C,EAAE,GAAGJ,WAAW,CAAC;EACxED,OAAO,EAAEtB,KAAK,CAAC4B,IAAI;AACrB,gBAAgBzB,IAAI;AACpB,IAAIO,IAAI,KAAK,OAAO,GAAGV,KAAK,CAAC4B,IAAI,4BAA4B,GAAG,IAAI;AACpE,IAAIlB,IAAI,KAAK,MAAM,GAAGV,KAAK,CAAC4B,IAAI,gBAAgBJ,WAAW,gBAAgB,GAAG,IAAI;AAClF,IAAId,IAAI,KAAK,MAAM,GAAGV,KAAK,CAAC4B,IAAI,oBAAoBP,WAAW,MAAM,GAAG,IAAI;AAC5E;AACA,CAAC","ignoreList":[]}

package/lib/typescript/components/Avatar/styles.d.ts

@@ -1,16 +1,16 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const avatarRootVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+    size?: "sm" | "md" | "lg" | "2xs" | "xs" | "xl" | "2xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const avatarImageVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const avatarTextVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+    size?: "sm" | "md" | "lg" | "2xs" | "xs" | "xl" | "2xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const avatarIconVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+    size?: "sm" | "md" | "lg" | "2xs" | "xs" | "xl" | "2xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const avatarBadgeVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+    size?: "sm" | "md" | "lg" | "2xs" | "xs" | "xl" | "2xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type AvatarVariantProps = VariantProps<typeof avatarRootVariants>;
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/Avatar/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,eAAO,MAAM,kBAAkB;;8EAgB9B,CAAC;AAIF,eAAO,MAAM,mBAAmB,oFAI9B,CAAC;AAIH,eAAO,MAAM,kBAAkB;;8EAa7B,CAAC;AAIH,eAAO,MAAM,kBAAkB;;8EAa7B,CAAC;AAIH,eAAO,MAAM,mBAAmB;;8EAa9B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Avatar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,eAAO,MAAM,kBAAkB;;8EAsB9B,CAAC;AAIF,eAAO,MAAM,mBAAmB,oFAK9B,CAAC;AAIH,eAAO,MAAM,kBAAkB;;8EAe7B,CAAC;AAIH,eAAO,MAAM,kBAAkB;;8EAe7B,CAAC;AAIH,eAAO,MAAM,mBAAmB;;8EAkB/B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/lib/typescript/components/Heading/styles.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const headingStyle: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type HeadingVariantProps = VariantProps<typeof headingStyle>;
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/Stack/styles.d.ts

@@ -13,11 +13,11 @@ declare const spaceMap: {
 export type StackSpace = keyof typeof spaceMap;
 export declare const hStackRootVariants: (props?: ({
     reversed?: boolean | null | undefined;
-    space?: "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    space?: "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const vStackRootVariants: (props?: ({
     reversed?: boolean | null | undefined;
-    space?: "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
+    space?: "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export {};
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/Text/styles.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const textStyle: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type TextVariantProps = VariantProps<typeof textStyle>;
 //# sourceMappingURL=styles.d.ts.map

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-beta.36",
+  "version": "0.0.1-beta.37",
   "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.36",
-    "@cdx-ui/utils": "0.0.1-beta.36",
-    "@cdx-ui/icons": "0.0.1-beta.36"
+    "@cdx-ui/primitives": "0.0.1-beta.37",
+    "@cdx-ui/utils": "0.0.1-beta.37",
+    "@cdx-ui/icons": "0.0.1-beta.37"
   },
   "devDependencies": {
     "@types/react": "*",

package/src/components/Avatar/index.tsx

@@ -36,7 +36,7 @@ export interface AvatarProps extends ViewProps, IAvatarProps, AvatarVariantProps
 }
 
 const AvatarRoot = forwardRef<View, AvatarProps>(
-  ({ size = 'lg', className, children, style, ...props }, ref) => {
+  ({ size = 'md', className, children, style, ...props }, ref) => {
     const computedClassName = cn(avatarRootVariants({ size }), className);
 
     return (

package/src/components/Avatar/styles.ts

@@ -1,22 +1,27 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import { COLOR_BG_MUTED, COLOR_TEXT_SECONDARY, RADIUS_FULL } from '../../styles/primitives';
 
 // ── Root ─────────────────────────────────────────────────
 
 export const avatarRootVariants = cva(
-  [RADIUS_FULL, 'relative items-center justify-center', COLOR_BG_MUTED],
+  [
+    'rounded-[var(--border-radius-round)]',
+    'relative items-center justify-center',
+    'bg-surface-tertiary',
+  ],
   {
     variants: {
       size: {
-        sm: 'w-8 h-8',
-        md: 'w-10 h-10',
-        lg: 'w-12 h-12',
-        xl: 'w-16 h-16',
-        '2xl': 'w-20 h-20',
+        '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',
       },
     },
     defaultVariants: {
-      size: 'lg',
+      size: 'md',
     },
   },
 );
@@ -25,59 +30,69 @@ export const avatarRootVariants = cva(
 
 export const avatarImageVariants = cva([
   'absolute top-0 left-0 w-full h-full',
-  RADIUS_FULL,
+  'rounded-[var(--border-radius-round)]',
   'overflow-hidden',
+  'border border-stroke-secondary',
 ]);
 
 // ── Text ─────────────────────────────────────────────────
 
-export const avatarTextVariants = cva([COLOR_TEXT_SECONDARY, 'font-semibold'], {
+export const avatarTextVariants = cva(['text-content-primary', 'font-medium'], {
   variants: {
     size: {
+      '2xs': 'text-[6px]',
+      xs: 'text-[9px]',
       sm: 'text-xs',
-      md: 'text-sm',
-      lg: 'text-base',
-      xl: 'text-xl',
-      '2xl': 'text-2xl',
+      md: 'text-base',
+      lg: 'text-xl',
+      xl: 'text-2xl',
+      '2xl': 'text-[28px]',
     },
   },
   defaultVariants: {
-    size: 'lg',
+    size: 'md',
   },
 });
 
 // ── Icon ─────────────────────────────────────────────────
 
-export const avatarIconVariants = cva([COLOR_TEXT_SECONDARY], {
+export const avatarIconVariants = cva(['text-content-primary'], {
   variants: {
     size: {
-      sm: 'size-4',
-      md: 'size-5',
-      lg: 'size-6',
-      xl: 'size-8',
-      '2xl': 'size-10',
+      '2xs': 'size-1.5',
+      xs: 'size-[9px]',
+      sm: 'size-3',
+      md: 'size-4',
+      lg: 'size-5',
+      xl: 'size-6',
+      '2xl': 'size-7',
     },
   },
   defaultVariants: {
-    size: 'lg',
+    size: 'md',
   },
 });
 
 // ── Badge ────────────────────────────────────────────────
 
-export const avatarBadgeVariants = cva(['absolute border-2 border-white', RADIUS_FULL], {
-  variants: {
-    size: {
-      sm: 'w-2.5 h-2.5 bottom-0 right-0',
-      md: 'w-3 h-3 bottom-0 right-0',
-      lg: 'w-3.5 h-3.5 bottom-0 right-0',
-      xl: 'w-4 h-4 bottom-0.5 right-0.5',
-      '2xl': 'w-5 h-5 bottom-0.5 right-0.5',
+export const avatarBadgeVariants = cva(
+  ['absolute border-white', 'rounded-[var(--border-radius-round)]', 'bottom-0 right-0'],
+  {
+    variants: {
+      size: {
+        '2xs': 'w-1.5 h-1.5 border translate-x-[21%] translate-y-[21%]',
+        xs: 'w-2 h-2 border translate-x-[17%] translate-y-[17%]',
+        sm: 'w-2.5 h-2.5 border-2 translate-x-[15%] translate-y-[15%]',
+        md: 'w-3 h-3 border-2 translate-x-[11%] translate-y-[11%]',
+        lg: 'w-3.5 h-3.5 border-2 translate-x-[8%] translate-y-[8%]',
+        xl: 'w-4 h-4 border-2 translate-x-[6%] translate-y-[6%]',
+        '2xl': 'w-5 h-5 border-2 translate-x-[9%] translate-y-[9%]',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
     },
   },
-  defaultVariants: {
-    size: 'lg',
-  },
-});
+);
 
 export type AvatarVariantProps = VariantProps<typeof avatarRootVariants>;