Socket
Socket
Sign inDemoInstall

@zag-js/avatar

Package Overview
Dependencies
Maintainers
1
Versions
622
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@zag-js/avatar - npm Package Compare versions

Comparing version 0.10.2 to 0.10.3

9

dist/avatar.anatomy.d.ts

@@ -1,6 +0,3 @@

import * as _zag_js_anatomy from '@zag-js/anatomy';
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "image" | "fallback">;
declare const parts: Record<"root" | "image" | "fallback", _zag_js_anatomy.AnatomyPart>;
export { anatomy, parts };
import type { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
export declare const anatomy: AnatomyInstance<"image" | "root" | "fallback">;
export declare const parts: Record<"image" | "root" | "fallback", AnatomyPart>;

@@ -1,34 +0,11 @@

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
'use strict';
// src/avatar.anatomy.ts
var avatar_anatomy_exports = {};
__export(avatar_anatomy_exports, {
anatomy: () => anatomy,
parts: () => parts
});
module.exports = __toCommonJS(avatar_anatomy_exports);
var import_anatomy = require("@zag-js/anatomy");
var anatomy = (0, import_anatomy.createAnatomy)("avatar").parts("root", "image", "fallback");
var parts = anatomy.build();
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
anatomy,
parts
});
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const anatomy$1 = require('@zag-js/anatomy');
const anatomy = anatomy$1.createAnatomy("avatar").parts("root", "image", "fallback");
const parts = anatomy.build();
exports.anatomy = anatomy;
exports.parts = parts;

@@ -1,6 +0,4 @@

import { PropTypes, NormalizeProps } from '@zag-js/types';
import { State, Send } from './avatar.types.js';
import '@zag-js/core';
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
import { NormalizeProps, type PropTypes } from "@zag-js/types";
import { Send, State } from "./avatar.types";
export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
/**

@@ -30,3 +28,1 @@ * Whether the image is loaded.

};
export { connect };

@@ -1,44 +0,9 @@

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
'use strict';
// src/avatar.connect.ts
var avatar_connect_exports = {};
__export(avatar_connect_exports, {
connect: () => connect
});
module.exports = __toCommonJS(avatar_connect_exports);
var import_dom_query2 = require("@zag-js/dom-query");
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
// src/avatar.anatomy.ts
var import_anatomy = require("@zag-js/anatomy");
var anatomy = (0, import_anatomy.createAnatomy)("avatar").parts("root", "image", "fallback");
var parts = anatomy.build();
const domQuery = require('@zag-js/dom-query');
const avatar_anatomy = require('./avatar.anatomy.js');
const avatar_dom = require('./avatar.dom.js');
// src/avatar.dom.ts
var import_dom_query = require("@zag-js/dom-query");
var dom = (0, import_dom_query.createScope)({
getRootId: (ctx) => `avatar:${ctx.id}`,
getImageId: (ctx) => `avatar:${ctx.id}:image`,
getFallbackId: (ctx) => `avatar:${ctx.id}:fallback`,
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
getImageEl: (ctx) => dom.getById(ctx, dom.getImageId(ctx))
});
// src/avatar.connect.ts
function connect(state, send, normalize) {

@@ -75,4 +40,4 @@ const isLoaded = state.matches("loaded");

rootProps: normalize.element({
...parts.root.attrs,
id: dom.getRootId(state.context),
...avatar_anatomy.parts.root.attrs,
id: avatar_dom.dom.getRootId(state.context),
style: {

@@ -85,5 +50,5 @@ display: "grid",

imageProps: normalize.img({
...parts.image.attrs,
id: dom.getImageId(state.context),
"data-loaded": (0, import_dom_query2.dataAttr)(isLoaded),
...avatar_anatomy.parts.image.attrs,
id: avatar_dom.dom.getImageId(state.context),
"data-loaded": domQuery.dataAttr(isLoaded),
onLoad() {

@@ -101,4 +66,4 @@ send({ type: "IMG.LOADED", src: "element" });

fallbackProps: normalize.element({
...parts.fallback.attrs,
id: dom.getFallbackId(state.context),
...avatar_anatomy.parts.fallback.attrs,
id: avatar_dom.dom.getFallbackId(state.context),
hidden: !showFallback,

@@ -111,5 +76,3 @@ style: {

}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
connect
});
exports.connect = connect;

@@ -1,32 +0,27 @@

import { MachineContext } from './avatar.types.js';
import '@zag-js/core';
import '@zag-js/types';
declare const dom: {
import type { MachineContext as Ctx } from "./avatar.types";
export declare const dom: {
getRootNode: (ctx: {
getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
}) => Document | ShadowRoot;
getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
}) => ShadowRoot | Document;
getDoc: (ctx: {
getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
}) => Document;
getWin: (ctx: {
getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
}) => Window & typeof globalThis;
getActiveElement: (ctx: {
getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
}) => HTMLElement | null;
getById: <T extends HTMLElement = HTMLElement>(ctx: {
getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
}, id: string) => T | null;
queryById: <T_1 extends HTMLElement = HTMLElement>(ctx: {
getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
}, id: string) => T_1;
} & {
getRootId: (ctx: MachineContext) => string;
getImageId: (ctx: MachineContext) => string;
getFallbackId: (ctx: MachineContext) => string;
getRootEl: (ctx: MachineContext) => HTMLElement | null;
getImageEl: (ctx: MachineContext) => HTMLImageElement | null;
getRootId: (ctx: Ctx) => string;
getImageId: (ctx: Ctx) => string;
getFallbackId: (ctx: Ctx) => string;
getRootEl: (ctx: Ctx) => HTMLElement | null;
getImageEl: (ctx: Ctx) => HTMLImageElement | null;
};
export { dom };

@@ -1,28 +0,8 @@

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
'use strict';
// src/avatar.dom.ts
var avatar_dom_exports = {};
__export(avatar_dom_exports, {
dom: () => dom
});
module.exports = __toCommonJS(avatar_dom_exports);
var import_dom_query = require("@zag-js/dom-query");
var dom = (0, import_dom_query.createScope)({
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
const domQuery = require('@zag-js/dom-query');
const dom = domQuery.createScope({
getRootId: (ctx) => `avatar:${ctx.id}`,

@@ -34,5 +14,3 @@ getImageId: (ctx) => `avatar:${ctx.id}:image`,

});
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
dom
});
exports.dom = dom;

@@ -1,7 +0,3 @@

import * as _zag_js_core from '@zag-js/core';
import { UserDefinedContext, MachineContext, MachineState } from './avatar.types.js';
import '@zag-js/types';
declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
export { machine };
import type { Machine, StateMachine } from '@zag-js/core';
import { MachineContext, MachineState, UserDefinedContext } from "./avatar.types";
export declare function machine(userContext: UserDefinedContext): Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;

@@ -1,44 +0,13 @@

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
'use strict';
// src/avatar.machine.ts
var avatar_machine_exports = {};
__export(avatar_machine_exports, {
machine: () => machine
});
module.exports = __toCommonJS(avatar_machine_exports);
var import_core = require("@zag-js/core");
var import_utils = require("@zag-js/utils");
var import_mutation_observer = require("@zag-js/mutation-observer");
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
// src/avatar.dom.ts
var import_dom_query = require("@zag-js/dom-query");
var dom = (0, import_dom_query.createScope)({
getRootId: (ctx) => `avatar:${ctx.id}`,
getImageId: (ctx) => `avatar:${ctx.id}:image`,
getFallbackId: (ctx) => `avatar:${ctx.id}:fallback`,
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
getImageEl: (ctx) => dom.getById(ctx, dom.getImageId(ctx))
});
const core = require('@zag-js/core');
const utils = require('@zag-js/utils');
const mutationObserver = require('@zag-js/mutation-observer');
const avatar_dom = require('./avatar.dom.js');
// src/avatar.machine.ts
function machine(userContext) {
const ctx = (0, import_utils.compact)(userContext);
return (0, import_core.createMachine)(
const ctx = utils.compact(userContext);
return core.createMachine(
{

@@ -89,4 +58,4 @@ id: "avatar",

trackSrcChange(ctx2, _evt, { send }) {
const img = dom.getImageEl(ctx2);
return (0, import_mutation_observer.observeAttributes)(img, ["src", "srcset"], () => {
const img = avatar_dom.dom.getImageEl(ctx2);
return mutationObserver.observeAttributes(img, ["src", "srcset"], () => {
send({ type: "SRC.CHANGE" });

@@ -96,4 +65,4 @@ });

trackImageRemoval(ctx2, _evt, { send }) {
const rootEl = dom.getRootEl(ctx2);
return (0, import_mutation_observer.observeChildren)(rootEl, (records) => {
const rootEl = avatar_dom.dom.getRootEl(ctx2);
return mutationObserver.observeChildren(rootEl, (records) => {
const removedNodes = Array.from(records[0].removedNodes);

@@ -115,3 +84,3 @@ const removed = removedNodes.find((node) => node.matches("[data-scope=avatar][data-part=image]"));

checkImgStatus(ctx2, _evt, { send }) {
const img = dom.getImageEl(ctx2);
const img = avatar_dom.dom.getImageEl(ctx2);
if (img?.complete) {

@@ -125,5 +94,3 @@ send({ type: "IMG.LOADED", src: "ssr" });

}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
machine
});
exports.machine = machine;

@@ -1,4 +0,3 @@

import { StateMachine } from '@zag-js/core';
import { RequiredBy, CommonProperties, Context } from '@zag-js/types';
import type { StateMachine as S } from "@zag-js/core";
import type { CommonProperties, Context, RequiredBy } from "@zag-js/types";
type PublicContext = CommonProperties & {

@@ -10,10 +9,9 @@ onLoad?: () => void;

type ComputedContext = Readonly<{}>;
type UserDefinedContext = RequiredBy<PublicContext, "id">;
type MachineContext = PublicContext & PrivateContext & ComputedContext;
type MachineState = {
export type UserDefinedContext = RequiredBy<PublicContext, "id">;
export type MachineContext = PublicContext & PrivateContext & ComputedContext;
export type MachineState = {
value: "loading" | "error" | "loaded";
};
type State = StateMachine.State<MachineContext, MachineState>;
type Send = StateMachine.Send<StateMachine.AnyEventObject>;
export { MachineContext, MachineState, Send, State, UserDefinedContext };
export type State = S.State<MachineContext, MachineState>;
export type Send = S.Send<S.AnyEventObject>;
export {};

@@ -1,7 +0,4 @@

export { anatomy } from './avatar.anatomy.js';
export { connect } from './avatar.connect.js';
export { machine } from './avatar.machine.js';
export { UserDefinedContext as Context } from './avatar.types.js';
import '@zag-js/anatomy';
import '@zag-js/types';
import '@zag-js/core';
export { anatomy } from "./avatar.anatomy";
export { connect } from "./avatar.connect";
export { machine } from "./avatar.machine";
export type { UserDefinedContext as Context } from "./avatar.types";

@@ -1,203 +0,13 @@

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
'use strict';
// src/index.ts
var src_exports = {};
__export(src_exports, {
anatomy: () => anatomy,
connect: () => connect,
machine: () => machine
});
module.exports = __toCommonJS(src_exports);
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
// src/avatar.anatomy.ts
var import_anatomy = require("@zag-js/anatomy");
var anatomy = (0, import_anatomy.createAnatomy)("avatar").parts("root", "image", "fallback");
var parts = anatomy.build();
const avatar_anatomy = require('./avatar.anatomy.js');
const avatar_connect = require('./avatar.connect.js');
const avatar_machine = require('./avatar.machine.js');
// src/avatar.connect.ts
var import_dom_query2 = require("@zag-js/dom-query");
// src/avatar.dom.ts
var import_dom_query = require("@zag-js/dom-query");
var dom = (0, import_dom_query.createScope)({
getRootId: (ctx) => `avatar:${ctx.id}`,
getImageId: (ctx) => `avatar:${ctx.id}:image`,
getFallbackId: (ctx) => `avatar:${ctx.id}:fallback`,
getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
getImageEl: (ctx) => dom.getById(ctx, dom.getImageId(ctx))
});
// src/avatar.connect.ts
function connect(state, send, normalize) {
const isLoaded = state.matches("loaded");
const showFallback = !isLoaded;
return {
/**
* Whether the image is loaded.
*/
isLoaded,
/**
* Whether the fallback is shown.
*/
showFallback,
/**
* Function to set new src.
*/
setSrc(src) {
send({ type: "SRC.SET", src });
},
/**
* Function to set loaded state.
*/
setLoaded() {
send({ type: "IMG.LOADED", src: "api" });
},
/**
* Function to set error state.
*/
setError() {
send({ type: "IMG.ERROR", src: "api" });
},
rootProps: normalize.element({
...parts.root.attrs,
id: dom.getRootId(state.context),
style: {
display: "grid",
gridTemplateRows: "1fr 1fr",
overflow: "hidden"
}
}),
imageProps: normalize.img({
...parts.image.attrs,
id: dom.getImageId(state.context),
"data-loaded": (0, import_dom_query2.dataAttr)(isLoaded),
onLoad() {
send({ type: "IMG.LOADED", src: "element" });
},
onError() {
send({ type: "IMG.ERROR", src: "element" });
},
style: {
gridArea: "1 / 1 / 2 / 2",
visibility: !isLoaded ? "hidden" : void 0
}
}),
fallbackProps: normalize.element({
...parts.fallback.attrs,
id: dom.getFallbackId(state.context),
hidden: !showFallback,
style: {
gridArea: "1 / 1 / 2 / 2"
}
})
};
}
// src/avatar.machine.ts
var import_core = require("@zag-js/core");
var import_utils = require("@zag-js/utils");
var import_mutation_observer = require("@zag-js/mutation-observer");
function machine(userContext) {
const ctx = (0, import_utils.compact)(userContext);
return (0, import_core.createMachine)(
{
id: "avatar",
initial: "loading",
activities: ["trackImageRemoval"],
context: ctx,
on: {
"SRC.CHANGE": {
target: "loading"
},
"IMG.UNMOUNT": {
target: "error"
}
},
states: {
loading: {
activities: ["trackSrcChange"],
entry: ["checkImgStatus"],
on: {
"IMG.LOADED": {
target: "loaded",
actions: ["invokeOnLoad"]
},
"IMG.ERROR": {
target: "error",
actions: ["invokeOnError"]
}
}
},
error: {
activities: ["trackSrcChange"],
on: {
"IMG.LOADED": {
target: "loaded",
actions: ["invokeOnLoad"]
}
}
},
loaded: {
activities: ["trackSrcChange"]
}
}
},
{
activities: {
trackSrcChange(ctx2, _evt, { send }) {
const img = dom.getImageEl(ctx2);
return (0, import_mutation_observer.observeAttributes)(img, ["src", "srcset"], () => {
send({ type: "SRC.CHANGE" });
});
},
trackImageRemoval(ctx2, _evt, { send }) {
const rootEl = dom.getRootEl(ctx2);
return (0, import_mutation_observer.observeChildren)(rootEl, (records) => {
const removedNodes = Array.from(records[0].removedNodes);
const removed = removedNodes.find((node) => node.matches("[data-scope=avatar][data-part=image]"));
if (removed) {
send({ type: "IMG.UNMOUNT" });
}
});
}
},
actions: {
invokeOnLoad(ctx2) {
ctx2.onLoad?.();
},
invokeOnError(ctx2) {
ctx2.onError?.();
},
checkImgStatus(ctx2, _evt, { send }) {
const img = dom.getImageEl(ctx2);
if (img?.complete) {
send({ type: "IMG.LOADED", src: "ssr" });
}
}
}
}
);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
anatomy,
connect,
machine
});
exports.anatomy = avatar_anatomy.anatomy;
exports.connect = avatar_connect.connect;
exports.machine = avatar_machine.machine;
{
"name": "@zag-js/avatar",
"version": "0.10.2",
"version": "0.10.3",
"description": "Core logic for the avatar widget implemented as a state machine",

@@ -31,8 +31,8 @@ "keywords": [

"dependencies": {
"@zag-js/anatomy": "0.10.2",
"@zag-js/mutation-observer": "0.10.2",
"@zag-js/core": "0.10.2",
"@zag-js/dom-query": "0.10.2",
"@zag-js/utils": "0.10.2",
"@zag-js/types": "0.10.2"
"@zag-js/anatomy": "0.10.3",
"@zag-js/mutation-observer": "0.10.3",
"@zag-js/core": "0.10.3",
"@zag-js/dom-query": "0.10.3",
"@zag-js/utils": "0.10.3",
"@zag-js/types": "0.10.3"
},

@@ -54,11 +54,6 @@ "devDependencies": {

"scripts": {
"build-fast": "tsup src",
"start": "pnpm build --watch",
"build": "tsup src --dts",
"test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
"build": "vite build -c ../../../vite.config.ts",
"lint": "eslint src --ext .ts,.tsx",
"test-ci": "pnpm test --ci --runInBand",
"test-watch": "pnpm test --watch -u",
"typecheck": "tsc --noEmit"
}
}

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc