@kushagradhawan/kookie-ui 0.1.128 → 0.1.129

package/components.css

@@ -2190,10 +2190,25 @@
 .rt-AvatarImage {
     width: 100%;
     height: 100%;
-    -o-object-fit: cover;
-       object-fit: cover;
+    -o-object-fit: var(--avatar-object-fit, cover);
+       object-fit: var(--avatar-object-fit, cover);
     border-radius: inherit;
 }
+.rt-AvatarRoot:where(.rt-r-fit-cover) {
+    --avatar-object-fit: cover;
+}
+.rt-AvatarRoot:where(.rt-r-fit-contain) {
+    --avatar-object-fit: contain;
+}
+.rt-AvatarRoot:where(.rt-r-fit-fill) {
+    --avatar-object-fit: fill;
+}
+.rt-AvatarRoot:where(.rt-r-fit-scale-down) {
+    --avatar-object-fit: scale-down;
+}
+.rt-AvatarRoot:where(.rt-r-fit-none) {
+    --avatar-object-fit: none;
+}
 .rt-AvatarFallback {
     font-family: var(--default-font-family);
     font-weight: var(--font-weight-medium);

package/dist/cjs/components/avatar.props.d.ts

@@ -34,6 +34,18 @@ declare const avatarPropDefs: {
         type: "ReactNode";
         default: undefined;
     };
+    /**
+     * Controls how the avatar image should be resized to fit its container.
+     * Defaults to 'cover' which crops the image to fill the avatar.
+     * Use 'contain' to show the full image without cropping.
+     */
+    fit: {
+        type: "enum";
+        className: string;
+        values: readonly ["cover", "contain", "fill", "scale-down", "none"];
+        default: "cover";
+        responsive: true;
+    };
     radius: {
         type: "enum";
         values: readonly ["none", "small", "medium", "large", "full"];

package/dist/cjs/components/avatar.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.props.d.ts","sourceRoot":"","sources":["../../../src/components/avatar.props.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAW1E,QAAA,MAAM,cAAc;;;;;;;;;;IASlB;;OAEG;;;;;;IAEH;;;OAGG;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;kBAdmB,mBAAmB;;;;;;;;;;;;;;;;;;CAwB1C,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"avatar.props.d.ts","sourceRoot":"","sources":["../../../src/components/avatar.props.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAY1E,QAAA,MAAM,cAAc;;;;;;;;;;IASlB;;OAEG;;;;;;IAEH;;;OAGG;;;;;;IAEH;;;OAGG;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;kBAvBK,mBACN;;;;;;;;;;;;;;;;;;CAiCH,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/cjs/components/avatar.props.js

@@ -1,2 +1,2 @@
-"use strict";var r=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var m=(a,e)=>{for(var o in e)r(a,o,{get:e[o],enumerable:!0})},y=(a,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of l(e))!c.call(a,t)&&t!==o&&r(a,t,{get:()=>e[t],enumerable:!(n=d(e,t))||n.enumerable});return a};var D=a=>y(r({},"__esModule",{value:!0}),a);var k={};m(k,{avatarPropDefs:()=>i});module.exports=D(k);var f=require("../props/as-child.prop.js"),s=require("../props/color.prop.js"),u=require("../props/high-contrast.prop.js"),p=require("../props/radius.prop.js");const P=["1","2","3","4","5","6","7","8","9","10","11","12"],v=["classic","solid","soft","surface","outline"],b=["solid","translucent"],g=["solid","translucent"],i={...f.asChildPropDef,size:{type:"enum",className:"rt-r-size",values:P,default:"3",responsive:!0},variant:{type:"enum",className:"rt-variant",values:v,default:"soft"},...s.accentColorPropDef,...u.highContrastPropDef,...p.radiusPropDef,fallback:{type:"ReactNode",required:!0},material:{type:"enum",values:g,default:void 0},panelBackground:{type:"enum",values:b,default:void 0},status:{type:"enum",values:s.accentColors,default:void 0},badge:{type:"ReactNode",default:void 0}};
+"use strict";var r=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var d=Object.prototype.hasOwnProperty;var m=(t,e)=>{for(var o in e)r(t,o,{get:e[o],enumerable:!0})},v=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of c(e))!d.call(t,a)&&a!==o&&r(t,a,{get:()=>e[a],enumerable:!(n=l(e,a))||n.enumerable});return t};var y=t=>v(r({},"__esModule",{value:!0}),t);var k={};m(k,{avatarPropDefs:()=>p});module.exports=y(k);var f=require("../props/as-child.prop.js"),s=require("../props/color.prop.js"),u=require("../props/high-contrast.prop.js"),i=require("../props/radius.prop.js");const D=["1","2","3","4","5","6","7","8","9","10","11","12"],P=["classic","solid","soft","surface","outline"],b=["solid","translucent"],g=["solid","translucent"],N=["cover","contain","fill","scale-down","none"],p={...f.asChildPropDef,size:{type:"enum",className:"rt-r-size",values:D,default:"3",responsive:!0},variant:{type:"enum",className:"rt-variant",values:P,default:"soft"},...s.accentColorPropDef,...u.highContrastPropDef,...i.radiusPropDef,fallback:{type:"ReactNode",required:!0},material:{type:"enum",values:g,default:void 0},panelBackground:{type:"enum",values:b,default:void 0},status:{type:"enum",values:s.accentColors,default:void 0},badge:{type:"ReactNode",default:void 0},fit:{type:"enum",className:"rt-r-fit",values:N,default:"cover",responsive:!0}};
 //# sourceMappingURL=avatar.props.js.map

package/dist/cjs/components/avatar.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/avatar.props.tsx"],
-  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { accentColorPropDef, accentColors } from '../props/color.prop.js';\nimport { highContrastPropDef } from '../props/high-contrast.prop.js';\nimport { radiusPropDef } from '../props/radius.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;\nconst variants = ['classic', 'solid', 'soft', 'surface', 'outline'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\nconst materials = ['solid', 'translucent'] as const;\n\nconst avatarPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '3', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },\n  ...accentColorPropDef,\n  ...highContrastPropDef,\n  ...radiusPropDef,\n  fallback: { type: 'ReactNode', required: true },\n  material: { type: 'enum', values: materials, default: undefined },\n  /**\n   * @deprecated Use `material` prop instead. This prop will be removed in a future version.\n   */\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },\n  /**\n   * Status indicator color. Renders a small colored dot at the bottom-right corner.\n   * Cannot be used together with `badge`.\n   */\n  status: { type: 'enum', values: accentColors, default: undefined },\n  /**\n   * Custom badge content. Renders at the bottom-right corner.\n   * Cannot be used together with `status`.\n   */\n  badge: { type: 'ReactNode', default: undefined },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  fallback: PropDef<React.ReactNode>;\n  material: PropDef<(typeof materials)[number] | undefined>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n  status: PropDef<(typeof accentColors)[number] | undefined>;\n  badge: PropDef<React.ReactNode>;\n};\n\nexport { avatarPropDefs };\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,oBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA+B,qCAC/BC,EAAiD,kCACjDC,EAAoC,0CACpCC,EAA8B,mCAI9B,MAAMC,EAAQ,CAAC,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,KAAM,KAAM,IAAI,EACtEC,EAAW,CAAC,UAAW,QAAS,OAAQ,UAAW,SAAS,EAC5DC,EAAmB,CAAC,QAAS,aAAa,EAC1CC,EAAY,CAAC,QAAS,aAAa,EAEnCT,EAAiB,CACrB,GAAG,iBACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQM,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,MAAO,EACpF,GAAG,qBACH,GAAG,sBACH,GAAG,gBACH,SAAU,CAAE,KAAM,YAAa,SAAU,EAAK,EAC9C,SAAU,CAAE,KAAM,OAAQ,OAAQE,EAAW,QAAS,MAAU,EAIhE,gBAAiB,CAAE,KAAM,OAAQ,OAAQD,EAAkB,QAAS,MAAU,EAK9E,OAAQ,CAAE,KAAM,OAAQ,OAAQ,eAAc,QAAS,MAAU,EAKjE,MAAO,CAAE,KAAM,YAAa,QAAS,MAAU,CACjD",
-  "names": ["avatar_props_exports", "__export", "avatarPropDefs", "__toCommonJS", "import_as_child_prop", "import_color_prop", "import_high_contrast_prop", "import_radius_prop", "sizes", "variants", "panelBackgrounds", "materials"]
+  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { accentColorPropDef, accentColors } from '../props/color.prop.js';\nimport { highContrastPropDef } from '../props/high-contrast.prop.js';\nimport { radiusPropDef } from '../props/radius.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;\nconst variants = ['classic', 'solid', 'soft', 'surface', 'outline'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\nconst materials = ['solid', 'translucent'] as const;\nconst objectFitValues = ['cover', 'contain', 'fill', 'scale-down', 'none'] as const;\n\nconst avatarPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '3', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },\n  ...accentColorPropDef,\n  ...highContrastPropDef,\n  ...radiusPropDef,\n  fallback: { type: 'ReactNode', required: true },\n  material: { type: 'enum', values: materials, default: undefined },\n  /**\n   * @deprecated Use `material` prop instead. This prop will be removed in a future version.\n   */\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },\n  /**\n   * Status indicator color. Renders a small colored dot at the bottom-right corner.\n   * Cannot be used together with `badge`.\n   */\n  status: { type: 'enum', values: accentColors, default: undefined },\n  /**\n   * Custom badge content. Renders at the bottom-right corner.\n   * Cannot be used together with `status`.\n   */\n  badge: { type: 'ReactNode', default: undefined },\n  /**\n   * Controls how the avatar image should be resized to fit its container.\n   * Defaults to 'cover' which crops the image to fill the avatar.\n   * Use 'contain' to show the full image without cropping.\n   */\n  fit: { type: 'enum', className: 'rt-r-fit', values: objectFitValues, default: 'cover', responsive: true },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  fallback: PropDef<React.ReactNode>;\n  material: PropDef<(typeof materials)[number] | undefined>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n  status: PropDef<(typeof accentColors)[number] | undefined>;\n  badge: PropDef<React.ReactNode>;\n  fit: PropDef<(typeof objectFitValues)[number]>;\n};\n\nexport { avatarPropDefs };\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,oBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA+B,qCAC/BC,EAAiD,kCACjDC,EAAoC,0CACpCC,EAA8B,mCAI9B,MAAMC,EAAQ,CAAC,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,KAAM,KAAM,IAAI,EACtEC,EAAW,CAAC,UAAW,QAAS,OAAQ,UAAW,SAAS,EAC5DC,EAAmB,CAAC,QAAS,aAAa,EAC1CC,EAAY,CAAC,QAAS,aAAa,EACnCC,EAAkB,CAAC,QAAS,UAAW,OAAQ,aAAc,MAAM,EAEnEV,EAAiB,CACrB,GAAG,iBACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQM,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,MAAO,EACpF,GAAG,qBACH,GAAG,sBACH,GAAG,gBACH,SAAU,CAAE,KAAM,YAAa,SAAU,EAAK,EAC9C,SAAU,CAAE,KAAM,OAAQ,OAAQE,EAAW,QAAS,MAAU,EAIhE,gBAAiB,CAAE,KAAM,OAAQ,OAAQD,EAAkB,QAAS,MAAU,EAK9E,OAAQ,CAAE,KAAM,OAAQ,OAAQ,eAAc,QAAS,MAAU,EAKjE,MAAO,CAAE,KAAM,YAAa,QAAS,MAAU,EAM/C,IAAK,CAAE,KAAM,OAAQ,UAAW,WAAY,OAAQE,EAAiB,QAAS,QAAS,WAAY,EAAK,CAC1G",
+  "names": ["avatar_props_exports", "__export", "avatarPropDefs", "__toCommonJS", "import_as_child_prop", "import_color_prop", "import_high_contrast_prop", "import_radius_prop", "sizes", "variants", "panelBackgrounds", "materials", "objectFitValues"]
 }

package/dist/esm/components/avatar.props.d.ts

@@ -34,6 +34,18 @@ declare const avatarPropDefs: {
         type: "ReactNode";
         default: undefined;
     };
+    /**
+     * Controls how the avatar image should be resized to fit its container.
+     * Defaults to 'cover' which crops the image to fill the avatar.
+     * Use 'contain' to show the full image without cropping.
+     */
+    fit: {
+        type: "enum";
+        className: string;
+        values: readonly ["cover", "contain", "fill", "scale-down", "none"];
+        default: "cover";
+        responsive: true;
+    };
     radius: {
         type: "enum";
         values: readonly ["none", "small", "medium", "large", "full"];

package/dist/esm/components/avatar.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.props.d.ts","sourceRoot":"","sources":["../../../src/components/avatar.props.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAW1E,QAAA,MAAM,cAAc;;;;;;;;;;IASlB;;OAEG;;;;;;IAEH;;;OAGG;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;kBAdmB,mBAAmB;;;;;;;;;;;;;;;;;;CAwB1C,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"avatar.props.d.ts","sourceRoot":"","sources":["../../../src/components/avatar.props.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsB,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAY1E,QAAA,MAAM,cAAc;;;;;;;;;;IASlB;;OAEG;;;;;;IAEH;;;OAGG;;;;;;IAEH;;;OAGG;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;kBAvBK,mBACN;;;;;;;;;;;;;;;;;;CAiCH,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/esm/components/avatar.props.js

@@ -1,2 +1,2 @@
-import{asChildPropDef as e}from"../props/as-child.prop.js";import{accentColorPropDef as a,accentColors as t}from"../props/color.prop.js";import{highContrastPropDef as o}from"../props/high-contrast.prop.js";import{radiusPropDef as s}from"../props/radius.prop.js";const r=["1","2","3","4","5","6","7","8","9","10","11","12"],n=["classic","solid","soft","surface","outline"],f=["solid","translucent"],u=["solid","translucent"],p={...e,size:{type:"enum",className:"rt-r-size",values:r,default:"3",responsive:!0},variant:{type:"enum",className:"rt-variant",values:n,default:"soft"},...a,...o,...s,fallback:{type:"ReactNode",required:!0},material:{type:"enum",values:u,default:void 0},panelBackground:{type:"enum",values:f,default:void 0},status:{type:"enum",values:t,default:void 0},badge:{type:"ReactNode",default:void 0}};export{p as avatarPropDefs};
+import{asChildPropDef as e}from"../props/as-child.prop.js";import{accentColorPropDef as t,accentColors as a}from"../props/color.prop.js";import{highContrastPropDef as o}from"../props/high-contrast.prop.js";import{radiusPropDef as s}from"../props/radius.prop.js";const r=["1","2","3","4","5","6","7","8","9","10","11","12"],n=["classic","solid","soft","surface","outline"],f=["solid","translucent"],u=["solid","translucent"],i=["cover","contain","fill","scale-down","none"],p={...e,size:{type:"enum",className:"rt-r-size",values:r,default:"3",responsive:!0},variant:{type:"enum",className:"rt-variant",values:n,default:"soft"},...t,...o,...s,fallback:{type:"ReactNode",required:!0},material:{type:"enum",values:u,default:void 0},panelBackground:{type:"enum",values:f,default:void 0},status:{type:"enum",values:a,default:void 0},badge:{type:"ReactNode",default:void 0},fit:{type:"enum",className:"rt-r-fit",values:i,default:"cover",responsive:!0}};export{p as avatarPropDefs};
 //# sourceMappingURL=avatar.props.js.map

package/dist/esm/components/avatar.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/avatar.props.tsx"],
-  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { accentColorPropDef, accentColors } from '../props/color.prop.js';\nimport { highContrastPropDef } from '../props/high-contrast.prop.js';\nimport { radiusPropDef } from '../props/radius.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;\nconst variants = ['classic', 'solid', 'soft', 'surface', 'outline'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\nconst materials = ['solid', 'translucent'] as const;\n\nconst avatarPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '3', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },\n  ...accentColorPropDef,\n  ...highContrastPropDef,\n  ...radiusPropDef,\n  fallback: { type: 'ReactNode', required: true },\n  material: { type: 'enum', values: materials, default: undefined },\n  /**\n   * @deprecated Use `material` prop instead. This prop will be removed in a future version.\n   */\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },\n  /**\n   * Status indicator color. Renders a small colored dot at the bottom-right corner.\n   * Cannot be used together with `badge`.\n   */\n  status: { type: 'enum', values: accentColors, default: undefined },\n  /**\n   * Custom badge content. Renders at the bottom-right corner.\n   * Cannot be used together with `status`.\n   */\n  badge: { type: 'ReactNode', default: undefined },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  fallback: PropDef<React.ReactNode>;\n  material: PropDef<(typeof materials)[number] | undefined>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n  status: PropDef<(typeof accentColors)[number] | undefined>;\n  badge: PropDef<React.ReactNode>;\n};\n\nexport { avatarPropDefs };\n"],
-  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,4BAC/B,OAAS,sBAAAC,EAAoB,gBAAAC,MAAoB,yBACjD,OAAS,uBAAAC,MAA2B,iCACpC,OAAS,iBAAAC,MAAqB,0BAI9B,MAAMC,EAAQ,CAAC,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,KAAM,KAAM,IAAI,EACtEC,EAAW,CAAC,UAAW,QAAS,OAAQ,UAAW,SAAS,EAC5DC,EAAmB,CAAC,QAAS,aAAa,EAC1CC,EAAY,CAAC,QAAS,aAAa,EAEnCC,EAAiB,CACrB,GAAGT,EACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQK,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,MAAO,EACpF,GAAGL,EACH,GAAGE,EACH,GAAGC,EACH,SAAU,CAAE,KAAM,YAAa,SAAU,EAAK,EAC9C,SAAU,CAAE,KAAM,OAAQ,OAAQI,EAAW,QAAS,MAAU,EAIhE,gBAAiB,CAAE,KAAM,OAAQ,OAAQD,EAAkB,QAAS,MAAU,EAK9E,OAAQ,CAAE,KAAM,OAAQ,OAAQL,EAAc,QAAS,MAAU,EAKjE,MAAO,CAAE,KAAM,YAAa,QAAS,MAAU,CACjD",
-  "names": ["asChildPropDef", "accentColorPropDef", "accentColors", "highContrastPropDef", "radiusPropDef", "sizes", "variants", "panelBackgrounds", "materials", "avatarPropDefs"]
+  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\nimport { accentColorPropDef, accentColors } from '../props/color.prop.js';\nimport { highContrastPropDef } from '../props/high-contrast.prop.js';\nimport { radiusPropDef } from '../props/radius.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;\nconst variants = ['classic', 'solid', 'soft', 'surface', 'outline'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\nconst materials = ['solid', 'translucent'] as const;\nconst objectFitValues = ['cover', 'contain', 'fill', 'scale-down', 'none'] as const;\n\nconst avatarPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '3', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },\n  ...accentColorPropDef,\n  ...highContrastPropDef,\n  ...radiusPropDef,\n  fallback: { type: 'ReactNode', required: true },\n  material: { type: 'enum', values: materials, default: undefined },\n  /**\n   * @deprecated Use `material` prop instead. This prop will be removed in a future version.\n   */\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },\n  /**\n   * Status indicator color. Renders a small colored dot at the bottom-right corner.\n   * Cannot be used together with `badge`.\n   */\n  status: { type: 'enum', values: accentColors, default: undefined },\n  /**\n   * Custom badge content. Renders at the bottom-right corner.\n   * Cannot be used together with `status`.\n   */\n  badge: { type: 'ReactNode', default: undefined },\n  /**\n   * Controls how the avatar image should be resized to fit its container.\n   * Defaults to 'cover' which crops the image to fill the avatar.\n   * Use 'contain' to show the full image without cropping.\n   */\n  fit: { type: 'enum', className: 'rt-r-fit', values: objectFitValues, default: 'cover', responsive: true },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  fallback: PropDef<React.ReactNode>;\n  material: PropDef<(typeof materials)[number] | undefined>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n  status: PropDef<(typeof accentColors)[number] | undefined>;\n  badge: PropDef<React.ReactNode>;\n  fit: PropDef<(typeof objectFitValues)[number]>;\n};\n\nexport { avatarPropDefs };\n"],
+  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,4BAC/B,OAAS,sBAAAC,EAAoB,gBAAAC,MAAoB,yBACjD,OAAS,uBAAAC,MAA2B,iCACpC,OAAS,iBAAAC,MAAqB,0BAI9B,MAAMC,EAAQ,CAAC,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,IAAK,KAAM,KAAM,IAAI,EACtEC,EAAW,CAAC,UAAW,QAAS,OAAQ,UAAW,SAAS,EAC5DC,EAAmB,CAAC,QAAS,aAAa,EAC1CC,EAAY,CAAC,QAAS,aAAa,EACnCC,EAAkB,CAAC,QAAS,UAAW,OAAQ,aAAc,MAAM,EAEnEC,EAAiB,CACrB,GAAGV,EACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQK,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,MAAO,EACpF,GAAGL,EACH,GAAGE,EACH,GAAGC,EACH,SAAU,CAAE,KAAM,YAAa,SAAU,EAAK,EAC9C,SAAU,CAAE,KAAM,OAAQ,OAAQI,EAAW,QAAS,MAAU,EAIhE,gBAAiB,CAAE,KAAM,OAAQ,OAAQD,EAAkB,QAAS,MAAU,EAK9E,OAAQ,CAAE,KAAM,OAAQ,OAAQL,EAAc,QAAS,MAAU,EAKjE,MAAO,CAAE,KAAM,YAAa,QAAS,MAAU,EAM/C,IAAK,CAAE,KAAM,OAAQ,UAAW,WAAY,OAAQO,EAAiB,QAAS,QAAS,WAAY,EAAK,CAC1G",
+  "names": ["asChildPropDef", "accentColorPropDef", "accentColors", "highContrastPropDef", "radiusPropDef", "sizes", "variants", "panelBackgrounds", "materials", "objectFitValues", "avatarPropDefs"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kushagradhawan/kookie-ui",
-  "version": "0.1.128",
+  "version": "0.1.129",
   "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive documentation",
   "keywords": [
     "react",

package/schemas/base-button.json

@@ -279,6 +279,6 @@
   "title": "Base-button Component Props",
   "description": "Props schema for the base-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-01-13T06:25:06.869Z",
+  "generatedAt": "2026-01-13T07:07:55.568Z",
   "source": "Zod schema"
 }

package/schemas/button.json

@@ -530,6 +530,6 @@
   "title": "Button Component Props",
   "description": "Props schema for the button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-01-13T06:25:06.875Z",
+  "generatedAt": "2026-01-13T07:07:55.575Z",
   "source": "Zod schema"
 }

package/schemas/icon-button.json

@@ -313,6 +313,6 @@
   "title": "Icon-button Component Props",
   "description": "Props schema for the icon-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-01-13T06:25:06.876Z",
+  "generatedAt": "2026-01-13T07:07:55.575Z",
   "source": "Zod schema"
 }

package/schemas/index.json

@@ -3,7 +3,7 @@
   "title": "Kookie UI Button Components",
   "description": "Complete JSON Schema collection for all button components in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-01-13T06:25:06.879Z",
+  "generatedAt": "2026-01-13T07:07:55.578Z",
   "source": "Zod schemas",
   "components": {
     "base-button": {
@@ -287,7 +287,7 @@
       "title": "Base-button Component Props",
       "description": "Props schema for the base-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2026-01-13T06:25:06.869Z",
+      "generatedAt": "2026-01-13T07:07:55.568Z",
       "source": "Zod schema"
     },
     "button": {
@@ -822,7 +822,7 @@
       "title": "Button Component Props",
       "description": "Props schema for the button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2026-01-13T06:25:06.875Z",
+      "generatedAt": "2026-01-13T07:07:55.575Z",
       "source": "Zod schema"
     },
     "icon-button": {
@@ -1140,7 +1140,7 @@
       "title": "Icon-button Component Props",
       "description": "Props schema for the icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2026-01-13T06:25:06.876Z",
+      "generatedAt": "2026-01-13T07:07:55.575Z",
       "source": "Zod schema"
     },
     "toggle-button": {
@@ -1683,7 +1683,7 @@
       "title": "Toggle-button Component Props",
       "description": "Props schema for the toggle-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2026-01-13T06:25:06.877Z",
+      "generatedAt": "2026-01-13T07:07:55.577Z",
       "source": "Zod schema"
     },
     "toggle-icon-button": {
@@ -2009,7 +2009,7 @@
       "title": "Toggle-icon-button Component Props",
       "description": "Props schema for the toggle-icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2026-01-13T06:25:06.878Z",
+      "generatedAt": "2026-01-13T07:07:55.578Z",
       "source": "Zod schema"
     }
   }

package/schemas/toggle-button.json

@@ -538,6 +538,6 @@
   "title": "Toggle-button Component Props",
   "description": "Props schema for the toggle-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-01-13T06:25:06.877Z",
+  "generatedAt": "2026-01-13T07:07:55.577Z",
   "source": "Zod schema"
 }

package/schemas/toggle-icon-button.json

@@ -321,6 +321,6 @@
   "title": "Toggle-icon-button Component Props",
   "description": "Props schema for the toggle-icon-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-01-13T06:25:06.878Z",
+  "generatedAt": "2026-01-13T07:07:55.578Z",
   "source": "Zod schema"
 }

package/src/components/avatar.css

@@ -392,10 +392,27 @@
 .rt-AvatarImage {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: var(--avatar-object-fit, cover);
   border-radius: inherit;
 }
 
+/* Object-fit variants */
+.rt-AvatarRoot:where(.rt-r-fit-cover) {
+  --avatar-object-fit: cover;
+}
+.rt-AvatarRoot:where(.rt-r-fit-contain) {
+  --avatar-object-fit: contain;
+}
+.rt-AvatarRoot:where(.rt-r-fit-fill) {
+  --avatar-object-fit: fill;
+}
+.rt-AvatarRoot:where(.rt-r-fit-scale-down) {
+  --avatar-object-fit: scale-down;
+}
+.rt-AvatarRoot:where(.rt-r-fit-none) {
+  --avatar-object-fit: none;
+}
+
 .rt-AvatarFallback {
   font-family: var(--default-font-family);
   font-weight: var(--font-weight-medium);

package/src/components/avatar.props.tsx

@@ -9,6 +9,7 @@ const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as
 const variants = ['classic', 'solid', 'soft', 'surface', 'outline'] as const;
 const panelBackgrounds = ['solid', 'translucent'] as const;
 const materials = ['solid', 'translucent'] as const;
+const objectFitValues = ['cover', 'contain', 'fill', 'scale-down', 'none'] as const;
 
 const avatarPropDefs = {
   ...asChildPropDef,
@@ -33,6 +34,12 @@ const avatarPropDefs = {
    * Cannot be used together with `status`.
    */
   badge: { type: 'ReactNode', default: undefined },
+  /**
+   * Controls how the avatar image should be resized to fit its container.
+   * Defaults to 'cover' which crops the image to fill the avatar.
+   * Use 'contain' to show the full image without cropping.
+   */
+  fit: { type: 'enum', className: 'rt-r-fit', values: objectFitValues, default: 'cover', responsive: true },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
@@ -41,6 +48,7 @@ const avatarPropDefs = {
   panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   status: PropDef<(typeof accentColors)[number] | undefined>;
   badge: PropDef<React.ReactNode>;
+  fit: PropDef<(typeof objectFitValues)[number]>;
 };
 
 export { avatarPropDefs };

package/styles.css

@@ -7244,10 +7244,25 @@
 .rt-AvatarImage{
   width: 100%;
   height: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  -o-object-fit: var(--avatar-object-fit, cover);
+     object-fit: var(--avatar-object-fit, cover);
   border-radius: inherit;
 }
+.rt-AvatarRoot:where(.rt-r-fit-cover){
+  --avatar-object-fit: cover;
+}
+.rt-AvatarRoot:where(.rt-r-fit-contain){
+  --avatar-object-fit: contain;
+}
+.rt-AvatarRoot:where(.rt-r-fit-fill){
+  --avatar-object-fit: fill;
+}
+.rt-AvatarRoot:where(.rt-r-fit-scale-down){
+  --avatar-object-fit: scale-down;
+}
+.rt-AvatarRoot:where(.rt-r-fit-none){
+  --avatar-object-fit: none;
+}
 .rt-AvatarFallback{
   font-family: var(--default-font-family);
   font-weight: var(--font-weight-medium);