@zag-js/avatar 0.36.3 → 0.37.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.mts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as _zag_js_anatomy from '@zag-js/anatomy';
2
- import { RequiredBy, PropTypes, CommonProperties, DirectionProperty, Context, NormalizeProps } from '@zag-js/types';
2
+ import { RequiredBy, PropTypes, CommonProperties, DirectionProperty, NormalizeProps } from '@zag-js/types';
3
3
  import * as _zag_js_core from '@zag-js/core';
4
4
  import { StateMachine } from '@zag-js/core';
5
5
 
@@ -14,7 +14,8 @@ interface PublicContext extends CommonProperties, DirectionProperty {
14
14
  */
15
15
  onLoadingStatusChange?: (details: StatusChangeDetails) => void;
16
16
  }
17
- type PrivateContext = Context<{}>;
17
+ interface PrivateContext {
18
+ }
18
19
  type ComputedContext = Readonly<{}>;
19
20
  type UserDefinedContext = RequiredBy<PublicContext, "id">;
20
21
  interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
@@ -54,4 +55,7 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
54
55
 
55
56
  declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
56
57
 
57
- export { type MachineApi as Api, type UserDefinedContext as Context, type StatusChangeDetails, anatomy, connect, machine };
58
+ declare const props: ("dir" | "id" | "onLoadingStatusChange" | "getRootNode")[];
59
+ declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "onLoadingStatusChange" | "getRootNode">];
60
+
61
+ export { type MachineApi as Api, type UserDefinedContext as Context, type StatusChangeDetails, anatomy, connect, machine, props, splitProps };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as _zag_js_anatomy from '@zag-js/anatomy';
2
- import { RequiredBy, PropTypes, CommonProperties, DirectionProperty, Context, NormalizeProps } from '@zag-js/types';
2
+ import { RequiredBy, PropTypes, CommonProperties, DirectionProperty, NormalizeProps } from '@zag-js/types';
3
3
  import * as _zag_js_core from '@zag-js/core';
4
4
  import { StateMachine } from '@zag-js/core';
5
5
 
@@ -14,7 +14,8 @@ interface PublicContext extends CommonProperties, DirectionProperty {
14
14
  */
15
15
  onLoadingStatusChange?: (details: StatusChangeDetails) => void;
16
16
  }
17
- type PrivateContext = Context<{}>;
17
+ interface PrivateContext {
18
+ }
18
19
  type ComputedContext = Readonly<{}>;
19
20
  type UserDefinedContext = RequiredBy<PublicContext, "id">;
20
21
  interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
@@ -54,4 +55,7 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
54
55
 
55
56
  declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
56
57
 
57
- export { type MachineApi as Api, type UserDefinedContext as Context, type StatusChangeDetails, anatomy, connect, machine };
58
+ declare const props: ("dir" | "id" | "onLoadingStatusChange" | "getRootNode")[];
59
+ declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "onLoadingStatusChange" | "getRootNode">];
60
+
61
+ export { type MachineApi as Api, type UserDefinedContext as Context, type StatusChangeDetails, anatomy, connect, machine, props, splitProps };
package/dist/index.js CHANGED
@@ -22,7 +22,9 @@ var src_exports = {};
22
22
  __export(src_exports, {
23
23
  anatomy: () => anatomy,
24
24
  connect: () => connect,
25
- machine: () => machine
25
+ machine: () => machine,
26
+ props: () => props,
27
+ splitProps: () => splitProps
26
28
  });
27
29
  module.exports = __toCommonJS(src_exports);
28
30
 
@@ -188,10 +190,18 @@ function machine(userContext) {
188
190
  }
189
191
  );
190
192
  }
193
+
194
+ // src/avatar.props.ts
195
+ var import_types = require("@zag-js/types");
196
+ var import_utils2 = require("@zag-js/utils");
197
+ var props = (0, import_types.createProps)()(["dir", "id", "onLoadingStatusChange", "getRootNode"]);
198
+ var splitProps = (0, import_utils2.createSplitProps)(props);
191
199
  // Annotate the CommonJS export names for ESM import in node:
192
200
  0 && (module.exports = {
193
201
  anatomy,
194
202
  connect,
195
- machine
203
+ machine,
204
+ props,
205
+ splitProps
196
206
  });
197
207
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/avatar.anatomy.ts","../src/avatar.dom.ts","../src/avatar.connect.ts","../src/avatar.machine.ts"],"sourcesContent":["export { anatomy } from \"./avatar.anatomy\"\nexport { connect } from \"./avatar.connect\"\nexport { machine } from \"./avatar.machine\"\nexport type { UserDefinedContext as Context, MachineApi as Api, StatusChangeDetails } from \"./avatar.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"avatar\").parts(\"root\", \"image\", \"fallback\")\n\nexport const parts = anatomy.build()\n","import { createScope } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./avatar.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => `avatar:${ctx.id}`,\n getImageId: (ctx: Ctx) => `avatar:${ctx.id}:image`,\n getFallbackId: (ctx: Ctx) => `avatar:${ctx.id}:fallback`,\n\n getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n getImageEl: (ctx: Ctx) => dom.getById<HTMLImageElement>(ctx, dom.getImageId(ctx)),\n})\n","import type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./avatar.anatomy\"\nimport { dom } from \"./avatar.dom\"\nimport type { MachineApi, Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const isLoaded = state.matches(\"loaded\")\n const showFallback = !isLoaded\n\n return {\n isLoaded,\n showFallback,\n setSrc(src: string) {\n send({ type: \"SRC.SET\", src })\n },\n\n setLoaded() {\n send({ type: \"IMG.LOADED\", src: \"api\" })\n },\n\n setError() {\n send({ type: \"IMG.ERROR\", src: \"api\" })\n },\n\n rootProps: normalize.element({\n ...parts.root.attrs,\n dir: state.context.dir,\n id: dom.getRootId(state.context),\n style: {\n display: \"grid\",\n gridTemplateRows: \"1fr 1fr\",\n overflow: \"hidden\",\n },\n }),\n\n imageProps: normalize.img({\n ...parts.image.attrs,\n dir: state.context.dir,\n id: dom.getImageId(state.context),\n \"data-state\": isLoaded ? \"visible\" : \"hidden\",\n onLoad() {\n send({ type: \"IMG.LOADED\", src: \"element\" })\n },\n onError() {\n send({ type: \"IMG.ERROR\", src: \"element\" })\n },\n style: {\n gridArea: \"1 / 1 / 2 / 2\",\n visibility: !isLoaded ? \"hidden\" : undefined,\n },\n }),\n\n fallbackProps: normalize.element({\n ...parts.fallback.attrs,\n dir: state.context.dir,\n id: dom.getFallbackId(state.context),\n hidden: !showFallback,\n \"data-state\": isLoaded ? \"hidden\" : \"visible\",\n style: {\n gridArea: \"1 / 1 / 2 / 2\",\n },\n }),\n }\n}\n","import { createMachine } from \"@zag-js/core\"\nimport { observeAttributes, observeChildren } from \"@zag-js/mutation-observer\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./avatar.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./avatar.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"avatar\",\n initial: \"loading\",\n activities: [\"trackImageRemoval\"],\n\n context: ctx,\n\n on: {\n \"SRC.CHANGE\": {\n target: \"loading\",\n },\n \"IMG.UNMOUNT\": {\n target: \"error\",\n },\n },\n\n states: {\n loading: {\n activities: [\"trackSrcChange\"],\n entry: [\"checkImgStatus\"],\n on: {\n \"IMG.LOADED\": {\n target: \"loaded\",\n actions: [\"invokeOnLoad\"],\n },\n \"IMG.ERROR\": {\n target: \"error\",\n actions: [\"invokeOnError\"],\n },\n },\n },\n error: {\n activities: [\"trackSrcChange\"],\n on: {\n \"IMG.LOADED\": {\n target: \"loaded\",\n actions: [\"invokeOnLoad\"],\n },\n },\n },\n loaded: {\n activities: [\"trackSrcChange\"],\n on: {\n \"IMG.ERROR\": {\n target: \"error\",\n actions: [\"invokeOnError\"],\n },\n },\n },\n },\n },\n {\n activities: {\n trackSrcChange(ctx, _evt, { send }) {\n const img = dom.getImageEl(ctx)\n return observeAttributes(img, [\"src\", \"srcset\"], () => {\n send({ type: \"SRC.CHANGE\" })\n })\n },\n trackImageRemoval(ctx, _evt, { send }) {\n const rootEl = dom.getRootEl(ctx)\n return observeChildren(rootEl, (records) => {\n const removedNodes = Array.from(records[0].removedNodes) as HTMLElement[]\n const removed = removedNodes.find((node) => node.matches(\"[data-scope=avatar][data-part=image]\"))\n if (removed) {\n send({ type: \"IMG.UNMOUNT\" })\n }\n })\n },\n },\n actions: {\n invokeOnLoad(ctx) {\n ctx.onLoadingStatusChange?.({ status: \"loaded\" })\n },\n invokeOnError(ctx) {\n ctx.onLoadingStatusChange?.({ status: \"error\" })\n },\n checkImgStatus(ctx, _evt, { send }) {\n const img = dom.getImageEl(ctx)\n if (img?.complete) {\n const type = img.currentSrc ? \"IMG.LOADED\" : \"IMG.ERROR\"\n send({ type, src: \"ssr\" })\n }\n },\n },\n },\n )\n}\n"],"mappings":"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","names":["ctx"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/avatar.anatomy.ts","../src/avatar.dom.ts","../src/avatar.connect.ts","../src/avatar.machine.ts","../src/avatar.props.ts"],"sourcesContent":["export { anatomy } from \"./avatar.anatomy\"\nexport { connect } from \"./avatar.connect\"\nexport { machine } from \"./avatar.machine\"\nexport * from \"./avatar.props\"\nexport type { MachineApi as Api, UserDefinedContext as Context, StatusChangeDetails } from \"./avatar.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"avatar\").parts(\"root\", \"image\", \"fallback\")\n\nexport const parts = anatomy.build()\n","import { createScope } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./avatar.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => `avatar:${ctx.id}`,\n getImageId: (ctx: Ctx) => `avatar:${ctx.id}:image`,\n getFallbackId: (ctx: Ctx) => `avatar:${ctx.id}:fallback`,\n\n getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n getImageEl: (ctx: Ctx) => dom.getById<HTMLImageElement>(ctx, dom.getImageId(ctx)),\n})\n","import type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./avatar.anatomy\"\nimport { dom } from \"./avatar.dom\"\nimport type { MachineApi, Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const isLoaded = state.matches(\"loaded\")\n const showFallback = !isLoaded\n\n return {\n isLoaded,\n showFallback,\n setSrc(src: string) {\n send({ type: \"SRC.SET\", src })\n },\n\n setLoaded() {\n send({ type: \"IMG.LOADED\", src: \"api\" })\n },\n\n setError() {\n send({ type: \"IMG.ERROR\", src: \"api\" })\n },\n\n rootProps: normalize.element({\n ...parts.root.attrs,\n dir: state.context.dir,\n id: dom.getRootId(state.context),\n style: {\n display: \"grid\",\n gridTemplateRows: \"1fr 1fr\",\n overflow: \"hidden\",\n },\n }),\n\n imageProps: normalize.img({\n ...parts.image.attrs,\n dir: state.context.dir,\n id: dom.getImageId(state.context),\n \"data-state\": isLoaded ? \"visible\" : \"hidden\",\n onLoad() {\n send({ type: \"IMG.LOADED\", src: \"element\" })\n },\n onError() {\n send({ type: \"IMG.ERROR\", src: \"element\" })\n },\n style: {\n gridArea: \"1 / 1 / 2 / 2\",\n visibility: !isLoaded ? \"hidden\" : undefined,\n },\n }),\n\n fallbackProps: normalize.element({\n ...parts.fallback.attrs,\n dir: state.context.dir,\n id: dom.getFallbackId(state.context),\n hidden: !showFallback,\n \"data-state\": isLoaded ? \"hidden\" : \"visible\",\n style: {\n gridArea: \"1 / 1 / 2 / 2\",\n },\n }),\n }\n}\n","import { createMachine } from \"@zag-js/core\"\nimport { observeAttributes, observeChildren } from \"@zag-js/mutation-observer\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./avatar.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./avatar.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"avatar\",\n initial: \"loading\",\n activities: [\"trackImageRemoval\"],\n\n context: ctx,\n\n on: {\n \"SRC.CHANGE\": {\n target: \"loading\",\n },\n \"IMG.UNMOUNT\": {\n target: \"error\",\n },\n },\n\n states: {\n loading: {\n activities: [\"trackSrcChange\"],\n entry: [\"checkImgStatus\"],\n on: {\n \"IMG.LOADED\": {\n target: \"loaded\",\n actions: [\"invokeOnLoad\"],\n },\n \"IMG.ERROR\": {\n target: \"error\",\n actions: [\"invokeOnError\"],\n },\n },\n },\n error: {\n activities: [\"trackSrcChange\"],\n on: {\n \"IMG.LOADED\": {\n target: \"loaded\",\n actions: [\"invokeOnLoad\"],\n },\n },\n },\n loaded: {\n activities: [\"trackSrcChange\"],\n on: {\n \"IMG.ERROR\": {\n target: \"error\",\n actions: [\"invokeOnError\"],\n },\n },\n },\n },\n },\n {\n activities: {\n trackSrcChange(ctx, _evt, { send }) {\n const img = dom.getImageEl(ctx)\n return observeAttributes(img, [\"src\", \"srcset\"], () => {\n send({ type: \"SRC.CHANGE\" })\n })\n },\n trackImageRemoval(ctx, _evt, { send }) {\n const rootEl = dom.getRootEl(ctx)\n return observeChildren(rootEl, (records) => {\n const removedNodes = Array.from(records[0].removedNodes) as HTMLElement[]\n const removed = removedNodes.find((node) => node.matches(\"[data-scope=avatar][data-part=image]\"))\n if (removed) {\n send({ type: \"IMG.UNMOUNT\" })\n }\n })\n },\n },\n actions: {\n invokeOnLoad(ctx) {\n ctx.onLoadingStatusChange?.({ status: \"loaded\" })\n },\n invokeOnError(ctx) {\n ctx.onLoadingStatusChange?.({ status: \"error\" })\n },\n checkImgStatus(ctx, _evt, { send }) {\n const img = dom.getImageEl(ctx)\n if (img?.complete) {\n const type = img.currentSrc ? \"IMG.LOADED\" : \"IMG.ERROR\"\n send({ type, src: \"ssr\" })\n }\n },\n },\n },\n )\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { UserDefinedContext } from \"./avatar.types\"\n\nexport const props = createProps<UserDefinedContext>()([\"dir\", \"id\", \"onLoadingStatusChange\", \"getRootNode\"])\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n"],"mappings":"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","names":["ctx","import_utils"]}
package/dist/index.mjs CHANGED
@@ -160,9 +160,17 @@ function machine(userContext) {
160
160
  }
161
161
  );
162
162
  }
163
+
164
+ // src/avatar.props.ts
165
+ import { createProps } from "@zag-js/types";
166
+ import { createSplitProps } from "@zag-js/utils";
167
+ var props = createProps()(["dir", "id", "onLoadingStatusChange", "getRootNode"]);
168
+ var splitProps = createSplitProps(props);
163
169
  export {
164
170
  anatomy,
165
171
  connect,
166
- machine
172
+ machine,
173
+ props,
174
+ splitProps
167
175
  };
168
176
  //# sourceMappingURL=index.mjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/avatar.anatomy.ts","../src/avatar.dom.ts","../src/avatar.connect.ts","../src/avatar.machine.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"avatar\").parts(\"root\", \"image\", \"fallback\")\n\nexport const parts = anatomy.build()\n","import { createScope } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./avatar.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => `avatar:${ctx.id}`,\n getImageId: (ctx: Ctx) => `avatar:${ctx.id}:image`,\n getFallbackId: (ctx: Ctx) => `avatar:${ctx.id}:fallback`,\n\n getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n getImageEl: (ctx: Ctx) => dom.getById<HTMLImageElement>(ctx, dom.getImageId(ctx)),\n})\n","import type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./avatar.anatomy\"\nimport { dom } from \"./avatar.dom\"\nimport type { MachineApi, Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const isLoaded = state.matches(\"loaded\")\n const showFallback = !isLoaded\n\n return {\n isLoaded,\n showFallback,\n setSrc(src: string) {\n send({ type: \"SRC.SET\", src })\n },\n\n setLoaded() {\n send({ type: \"IMG.LOADED\", src: \"api\" })\n },\n\n setError() {\n send({ type: \"IMG.ERROR\", src: \"api\" })\n },\n\n rootProps: normalize.element({\n ...parts.root.attrs,\n dir: state.context.dir,\n id: dom.getRootId(state.context),\n style: {\n display: \"grid\",\n gridTemplateRows: \"1fr 1fr\",\n overflow: \"hidden\",\n },\n }),\n\n imageProps: normalize.img({\n ...parts.image.attrs,\n dir: state.context.dir,\n id: dom.getImageId(state.context),\n \"data-state\": isLoaded ? \"visible\" : \"hidden\",\n onLoad() {\n send({ type: \"IMG.LOADED\", src: \"element\" })\n },\n onError() {\n send({ type: \"IMG.ERROR\", src: \"element\" })\n },\n style: {\n gridArea: \"1 / 1 / 2 / 2\",\n visibility: !isLoaded ? \"hidden\" : undefined,\n },\n }),\n\n fallbackProps: normalize.element({\n ...parts.fallback.attrs,\n dir: state.context.dir,\n id: dom.getFallbackId(state.context),\n hidden: !showFallback,\n \"data-state\": isLoaded ? \"hidden\" : \"visible\",\n style: {\n gridArea: \"1 / 1 / 2 / 2\",\n },\n }),\n }\n}\n","import { createMachine } from \"@zag-js/core\"\nimport { observeAttributes, observeChildren } from \"@zag-js/mutation-observer\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./avatar.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./avatar.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"avatar\",\n initial: \"loading\",\n activities: [\"trackImageRemoval\"],\n\n context: ctx,\n\n on: {\n \"SRC.CHANGE\": {\n target: \"loading\",\n },\n \"IMG.UNMOUNT\": {\n target: \"error\",\n },\n },\n\n states: {\n loading: {\n activities: [\"trackSrcChange\"],\n entry: [\"checkImgStatus\"],\n on: {\n \"IMG.LOADED\": {\n target: \"loaded\",\n actions: [\"invokeOnLoad\"],\n },\n \"IMG.ERROR\": {\n target: \"error\",\n actions: [\"invokeOnError\"],\n },\n },\n },\n error: {\n activities: [\"trackSrcChange\"],\n on: {\n \"IMG.LOADED\": {\n target: \"loaded\",\n actions: [\"invokeOnLoad\"],\n },\n },\n },\n loaded: {\n activities: [\"trackSrcChange\"],\n on: {\n \"IMG.ERROR\": {\n target: \"error\",\n actions: [\"invokeOnError\"],\n },\n },\n },\n },\n },\n {\n activities: {\n trackSrcChange(ctx, _evt, { send }) {\n const img = dom.getImageEl(ctx)\n return observeAttributes(img, [\"src\", \"srcset\"], () => {\n send({ type: \"SRC.CHANGE\" })\n })\n },\n trackImageRemoval(ctx, _evt, { send }) {\n const rootEl = dom.getRootEl(ctx)\n return observeChildren(rootEl, (records) => {\n const removedNodes = Array.from(records[0].removedNodes) as HTMLElement[]\n const removed = removedNodes.find((node) => node.matches(\"[data-scope=avatar][data-part=image]\"))\n if (removed) {\n send({ type: \"IMG.UNMOUNT\" })\n }\n })\n },\n },\n actions: {\n invokeOnLoad(ctx) {\n ctx.onLoadingStatusChange?.({ status: \"loaded\" })\n },\n invokeOnError(ctx) {\n ctx.onLoadingStatusChange?.({ status: \"error\" })\n },\n checkImgStatus(ctx, _evt, { send }) {\n const img = dom.getImageEl(ctx)\n if (img?.complete) {\n const type = img.currentSrc ? \"IMG.LOADED\" : \"IMG.ERROR\"\n send({ type, src: \"ssr\" })\n }\n },\n },\n },\n )\n}\n"],"mappings":"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","names":["ctx"]}
1
+ {"version":3,"sources":["../src/avatar.anatomy.ts","../src/avatar.dom.ts","../src/avatar.connect.ts","../src/avatar.machine.ts","../src/avatar.props.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"avatar\").parts(\"root\", \"image\", \"fallback\")\n\nexport const parts = anatomy.build()\n","import { createScope } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./avatar.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => `avatar:${ctx.id}`,\n getImageId: (ctx: Ctx) => `avatar:${ctx.id}:image`,\n getFallbackId: (ctx: Ctx) => `avatar:${ctx.id}:fallback`,\n\n getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n getImageEl: (ctx: Ctx) => dom.getById<HTMLImageElement>(ctx, dom.getImageId(ctx)),\n})\n","import type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./avatar.anatomy\"\nimport { dom } from \"./avatar.dom\"\nimport type { MachineApi, Send, State } from \"./avatar.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const isLoaded = state.matches(\"loaded\")\n const showFallback = !isLoaded\n\n return {\n isLoaded,\n showFallback,\n setSrc(src: string) {\n send({ type: \"SRC.SET\", src })\n },\n\n setLoaded() {\n send({ type: \"IMG.LOADED\", src: \"api\" })\n },\n\n setError() {\n send({ type: \"IMG.ERROR\", src: \"api\" })\n },\n\n rootProps: normalize.element({\n ...parts.root.attrs,\n dir: state.context.dir,\n id: dom.getRootId(state.context),\n style: {\n display: \"grid\",\n gridTemplateRows: \"1fr 1fr\",\n overflow: \"hidden\",\n },\n }),\n\n imageProps: normalize.img({\n ...parts.image.attrs,\n dir: state.context.dir,\n id: dom.getImageId(state.context),\n \"data-state\": isLoaded ? \"visible\" : \"hidden\",\n onLoad() {\n send({ type: \"IMG.LOADED\", src: \"element\" })\n },\n onError() {\n send({ type: \"IMG.ERROR\", src: \"element\" })\n },\n style: {\n gridArea: \"1 / 1 / 2 / 2\",\n visibility: !isLoaded ? \"hidden\" : undefined,\n },\n }),\n\n fallbackProps: normalize.element({\n ...parts.fallback.attrs,\n dir: state.context.dir,\n id: dom.getFallbackId(state.context),\n hidden: !showFallback,\n \"data-state\": isLoaded ? \"hidden\" : \"visible\",\n style: {\n gridArea: \"1 / 1 / 2 / 2\",\n },\n }),\n }\n}\n","import { createMachine } from \"@zag-js/core\"\nimport { observeAttributes, observeChildren } from \"@zag-js/mutation-observer\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./avatar.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./avatar.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"avatar\",\n initial: \"loading\",\n activities: [\"trackImageRemoval\"],\n\n context: ctx,\n\n on: {\n \"SRC.CHANGE\": {\n target: \"loading\",\n },\n \"IMG.UNMOUNT\": {\n target: \"error\",\n },\n },\n\n states: {\n loading: {\n activities: [\"trackSrcChange\"],\n entry: [\"checkImgStatus\"],\n on: {\n \"IMG.LOADED\": {\n target: \"loaded\",\n actions: [\"invokeOnLoad\"],\n },\n \"IMG.ERROR\": {\n target: \"error\",\n actions: [\"invokeOnError\"],\n },\n },\n },\n error: {\n activities: [\"trackSrcChange\"],\n on: {\n \"IMG.LOADED\": {\n target: \"loaded\",\n actions: [\"invokeOnLoad\"],\n },\n },\n },\n loaded: {\n activities: [\"trackSrcChange\"],\n on: {\n \"IMG.ERROR\": {\n target: \"error\",\n actions: [\"invokeOnError\"],\n },\n },\n },\n },\n },\n {\n activities: {\n trackSrcChange(ctx, _evt, { send }) {\n const img = dom.getImageEl(ctx)\n return observeAttributes(img, [\"src\", \"srcset\"], () => {\n send({ type: \"SRC.CHANGE\" })\n })\n },\n trackImageRemoval(ctx, _evt, { send }) {\n const rootEl = dom.getRootEl(ctx)\n return observeChildren(rootEl, (records) => {\n const removedNodes = Array.from(records[0].removedNodes) as HTMLElement[]\n const removed = removedNodes.find((node) => node.matches(\"[data-scope=avatar][data-part=image]\"))\n if (removed) {\n send({ type: \"IMG.UNMOUNT\" })\n }\n })\n },\n },\n actions: {\n invokeOnLoad(ctx) {\n ctx.onLoadingStatusChange?.({ status: \"loaded\" })\n },\n invokeOnError(ctx) {\n ctx.onLoadingStatusChange?.({ status: \"error\" })\n },\n checkImgStatus(ctx, _evt, { send }) {\n const img = dom.getImageEl(ctx)\n if (img?.complete) {\n const type = img.currentSrc ? \"IMG.LOADED\" : \"IMG.ERROR\"\n send({ type, src: \"ssr\" })\n }\n },\n },\n },\n )\n}\n","import { createProps } from \"@zag-js/types\"\nimport { createSplitProps } from \"@zag-js/utils\"\nimport type { UserDefinedContext } from \"./avatar.types\"\n\nexport const props = createProps<UserDefinedContext>()([\"dir\", \"id\", \"onLoadingStatusChange\", \"getRootNode\"])\nexport const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)\n"],"mappings":"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","names":["ctx"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/avatar",
3
- "version": "0.36.3",
3
+ "version": "0.37.1",
4
4
  "description": "Core logic for the avatar widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -28,12 +28,12 @@
28
28
  "url": "https://github.com/chakra-ui/zag/issues"
29
29
  },
30
30
  "dependencies": {
31
- "@zag-js/anatomy": "0.36.3",
32
- "@zag-js/mutation-observer": "0.36.3",
33
- "@zag-js/core": "0.36.3",
34
- "@zag-js/dom-query": "0.36.3",
35
- "@zag-js/utils": "0.36.3",
36
- "@zag-js/types": "0.36.3"
31
+ "@zag-js/anatomy": "0.37.1",
32
+ "@zag-js/mutation-observer": "0.37.1",
33
+ "@zag-js/core": "0.37.1",
34
+ "@zag-js/dom-query": "0.37.1",
35
+ "@zag-js/utils": "0.37.1",
36
+ "@zag-js/types": "0.37.1"
37
37
  },
38
38
  "devDependencies": {
39
39
  "clean-package": "2.2.0"
@@ -0,0 +1,6 @@
1
+ import { createProps } from "@zag-js/types"
2
+ import { createSplitProps } from "@zag-js/utils"
3
+ import type { UserDefinedContext } from "./avatar.types"
4
+
5
+ export const props = createProps<UserDefinedContext>()(["dir", "id", "onLoadingStatusChange", "getRootNode"])
6
+ export const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)
@@ -1,5 +1,5 @@
1
1
  import type { StateMachine as S } from "@zag-js/core"
2
- import type { CommonProperties, Context, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types"
2
+ import type { CommonProperties, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types"
3
3
 
4
4
  /* -----------------------------------------------------------------------------
5
5
  * Callback details
@@ -20,7 +20,7 @@ interface PublicContext extends CommonProperties, DirectionProperty {
20
20
  onLoadingStatusChange?: (details: StatusChangeDetails) => void
21
21
  }
22
22
 
23
- type PrivateContext = Context<{}>
23
+ interface PrivateContext {}
24
24
 
25
25
  type ComputedContext = Readonly<{}>
26
26
 
package/src/index.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export { anatomy } from "./avatar.anatomy"
2
2
  export { connect } from "./avatar.connect"
3
3
  export { machine } from "./avatar.machine"
4
- export type { UserDefinedContext as Context, MachineApi as Api, StatusChangeDetails } from "./avatar.types"
4
+ export * from "./avatar.props"
5
+ export type { MachineApi as Api, UserDefinedContext as Context, StatusChangeDetails } from "./avatar.types"