@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/dist/illustratedmessage/index.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"index.jsx","names":[],"sources":["../../src/illustratedmessage/index.tsx"],"sourcesContent":["import { type JSX, Show, createContext, mergeProps, splitProps, useContext } from \"solid-js\";\nimport { filterDOMProps } from \"@proyecto-viviana/solidaria\";\nimport { ButtonGroupContext } from \"../button\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\nimport { IllustrationContext } from \"../icon\";\nimport type { StylesPropWithHeight, UnsafeClassName } from \"../s2-internal/style-utils\";\nimport {\n  controlFont,\n  getAllowedOverrides,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { ContentContext, HeadingContext } from \"../text\";\n\nexport type IllustratedMessageSize = \"S\" | \"M\" | \"L\";\nexport type IllustratedMessageOrientation = \"horizontal\" | \"vertical\";\n\ninterface IllustratedMessageStyleProps {\n  size?: IllustratedMessageSize;\n  orientation?: IllustratedMessageOrientation;\n}\n\nexport interface IllustratedMessageProps extends Omit<\n  JSX.HTMLAttributes<HTMLDivElement>,\n  \"children\" | \"class\" | \"style\" | \"ref\" | \"slot\"\n> {\n  /** The content to display in the IllustratedMessage. */\n  children?: JSX.Element;\n  /**\n   * The size of the IllustratedMessage.\n   * @default 'M'\n   */\n  size?: IllustratedMessageSize;\n  /**\n   * The direction that the IllustratedMessage should be laid out in.\n   * @default 'vertical'\n   */\n  orientation?: IllustratedMessageOrientation;\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight | (() => StyleString | undefined);\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  slot?: string | null;\n  ref?: RefLike<HTMLDivElement>;\n  /** Legacy shortcut. Prefer passing an Illustration child. */\n  illustration?: JSX.Element;\n  /** Legacy shortcut. Prefer passing a Heading child. */\n  heading?: JSX.Element;\n  /** Legacy shortcut. Prefer passing Content children. */\n  description?: JSX.Element;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  itemID?: string;\n}\n\nexport interface IllustratedMessageContextProps extends Partial<IllustratedMessageProps> {\n  isInDropZone?: boolean;\n  isDropTarget?: boolean;\n}\n\nexport const IllustratedMessageContext =\n  createContext<SpectrumContextValue<IllustratedMessageContextProps>>(null);\n\nconst illustratedMessage = style<IllustratedMessageStyleProps & { isInDropZone?: boolean }>(\n  {\n    display: \"grid\",\n    font: controlFont(),\n    maxWidth: {\n      orientation: {\n        vertical: 380,\n        horizontal: 528,\n      },\n    },\n    gridTemplateAreas: {\n      orientation: {\n        vertical: [\n          \"   .  illustration .   \",\n          \"   .       .       .   \",\n          \"heading heading heading\",\n          \"   .       .       .   \",\n          \"content content content\",\n          \"   .  buttonGroup  .   \",\n        ],\n        horizontal: [\n          \"illustration . heading\",\n          \"illustration .    .   \",\n          \"illustration . content\",\n          \"illustration . buttonGroup\",\n        ],\n      },\n    },\n    gridTemplateRows: {\n      orientation: {\n        vertical: {\n          default: [\"min-content\", 12, \"min-content\", 4, \"min-content\", \"min-content\"],\n          size: {\n            L: [\"min-content\", 8, \"min-content\", 4, \"min-content\", \"min-content\"],\n          },\n        },\n        horizontal: [\"1fr\", 4, \"1fr\"],\n      },\n    },\n    gridTemplateColumns: {\n      orientation: {\n        horizontal: [\"1fr\", 12, \"auto\"],\n      },\n    },\n    justifyItems: {\n      orientation: {\n        vertical: \"center\",\n        horizontal: \"start\",\n      },\n    },\n    textAlign: {\n      orientation: {\n        vertical: \"center\",\n      },\n    },\n  },\n  getAllowedOverrides({ height: true }),\n);\n\nconst illustration = style<\n  IllustratedMessageStyleProps & { isInDropZone?: boolean; isDropTarget?: boolean }\n>({\n  gridArea: \"illustration\",\n  alignSelf: \"center\",\n  \"--iconPrimary\": {\n    type: \"color\",\n    value: {\n      default: \"neutral\",\n      isDropTarget: \"accent\",\n    },\n  },\n});\n\nconst heading = style<IllustratedMessageStyleProps>({\n  gridArea: \"heading\",\n  font: {\n    size: {\n      S: \"title\",\n      M: \"title-xl\",\n      L: \"title-2xl\",\n    },\n  },\n  alignSelf: \"end\",\n  margin: 0,\n});\n\nconst content = style<IllustratedMessageStyleProps>({\n  font: {\n    size: {\n      S: \"body-xs\",\n      M: \"body-sm\",\n      L: \"body-sm\",\n    },\n  },\n  gridArea: \"content\",\n  alignSelf: \"start\",\n});\n\nconst buttonGroup = style({\n  gridArea: \"buttonGroup\",\n  marginTop: 16,\n});\n\n/**\n * An IllustratedMessage displays an illustration and a message, usually for an empty state or error page.\n */\nexport function IllustratedMessage(props: IllustratedMessageProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(IllustratedMessageContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props);\n  const [local, domProps] = splitProps(merged, [\n    \"children\",\n    \"orientation\",\n    \"size\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"slot\",\n    \"ref\",\n    \"isInDropZone\",\n    \"isDropTarget\",\n    \"illustration\",\n    \"heading\",\n    \"description\",\n    \"class\",\n  ]);\n  const size = () => local.size ?? \"M\";\n  const orientation = () => local.orientation ?? \"vertical\";\n  const isInDropZone = () => !!local.isInDropZone;\n  const isDropTarget = () => !!local.isDropTarget;\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const className = () =>\n    [\n      contextProps?.UNSAFE_className,\n      local.UNSAFE_className,\n      local.class,\n      illustratedMessage(\n        {\n          size: size(),\n          orientation: orientation(),\n          isInDropZone: isInDropZone(),\n        },\n        mergedStyles(),\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return (\n    <div\n      {...filterDOMProps(domProps as Record<string, unknown>)}\n      ref={mergeContextRefs(\n        (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n        props.ref,\n      )}\n      class={className()}\n      style={mergedUnsafeStyle()}\n    >\n      <HeadingContext.Provider\n        value={{ styles: () => heading({ orientation: orientation(), size: size() }) }}\n      >\n        <ContentContext.Provider value={{ styles: () => content({ size: size() }) }}>\n          <IllustrationContext.Provider\n            value={{\n              get size() {\n                return size() === \"L\" ? \"L\" : \"M\";\n              },\n              styles: () =>\n                illustration({\n                  orientation: orientation(),\n                  size: size(),\n                  isInDropZone: isInDropZone(),\n                  isDropTarget: isDropTarget(),\n                }),\n            }}\n          >\n            <ButtonGroupContext.Provider value={{ styles: buttonGroup }}>\n              <Show when={local.illustration}>\n                <div class={illustration({ orientation: orientation(), size: size() })}>\n                  {local.illustration}\n                </div>\n              </Show>\n              <Show when={local.heading}>\n                <h3 class={heading({ orientation: orientation(), size: size() })}>\n                  {local.heading}\n                </h3>\n              </Show>\n              <Show when={local.description}>\n                <div class={content({ size: size() })}>{local.description}</div>\n              </Show>\n              {local.children}\n            </ButtonGroupContext.Provider>\n          </IllustrationContext.Provider>\n        </ContentContext.Provider>\n      </HeadingContext.Provider>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.jsx","names":[],"sources":["../../src/illustratedmessage/index.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/IllustratedMessage.tsx\n\n// Port of packages/@react-spectrum/s2/src/IllustratedMessage.tsx.\nimport { Show, createContext, useContext } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { mergeProps, filterDOMProps } from \"@proyecto-viviana/solidaria\";\nimport { ButtonGroupContext } from \"../button\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\nimport { IllustrationContext } from \"../icon\";\nimport type { StylesPropWithHeight, UnsafeClassName } from \"../s2-internal/style-utils\";\nimport {\n  controlFont,\n  getAllowedOverrides,\n} from \"../s2-internal/style-utils\" with { type: \"macro\" };\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { ContentContext, HeadingContext } from \"../text\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport type IllustratedMessageSize = \"S\" | \"M\" | \"L\";\nexport type IllustratedMessageOrientation = \"horizontal\" | \"vertical\";\n\ninterface IllustratedMessageStyleProps {\n  size?: IllustratedMessageSize;\n  orientation?: IllustratedMessageOrientation;\n}\n\nexport interface IllustratedMessageProps extends Omit<\n  JSX.HTMLAttributes<HTMLDivElement>,\n  \"children\" | \"class\" | \"style\" | \"ref\" | \"slot\"\n> {\n  /** The content to display in the IllustratedMessage. */\n  children?: JSX.Element;\n  /**\n   * The size of the IllustratedMessage.\n   * @default 'M'\n   */\n  size?: IllustratedMessageSize;\n  /**\n   * The direction that the IllustratedMessage should be laid out in.\n   * @default 'vertical'\n   */\n  orientation?: IllustratedMessageOrientation;\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StylesPropWithHeight | (() => StyleString | undefined);\n  /** Additional CSS class name. Use only as a last resort. */\n  UNSAFE_className?: UnsafeClassName | string;\n  /** Additional inline styles. Use only as a last resort. */\n  UNSAFE_style?: JSX.CSSProperties;\n  slot?: string | null;\n  ref?: RefLike<HTMLDivElement>;\n  /** Legacy shortcut. Prefer passing an Illustration child. */\n  illustration?: JSX.Element;\n  /** Legacy shortcut. Prefer passing a Heading child. */\n  heading?: JSX.Element;\n  /** Legacy shortcut. Prefer passing Content children. */\n  description?: JSX.Element;\n  /** Backward-compatible class alias. Prefer UNSAFE_className for S2 parity. */\n  class?: string;\n  itemID?: string;\n}\n\nexport interface IllustratedMessageContextProps extends Partial<IllustratedMessageProps> {\n  isInDropZone?: boolean;\n  isDropTarget?: boolean;\n}\n\nexport const IllustratedMessageContext =\n  createContext<SpectrumContextValue<IllustratedMessageContextProps>>(null);\n\nconst illustratedMessage = style<IllustratedMessageStyleProps & { isInDropZone?: boolean }>(\n  {\n    display: \"grid\",\n    font: controlFont(),\n    maxWidth: {\n      orientation: {\n        vertical: 380,\n        horizontal: 528,\n      },\n    },\n    gridTemplateAreas: {\n      orientation: {\n        vertical: [\n          \"   .  illustration .   \",\n          \"   .       .       .   \",\n          \"heading heading heading\",\n          \"   .       .       .   \",\n          \"content content content\",\n          \"   .  buttonGroup  .   \",\n        ],\n        horizontal: [\n          \"illustration . heading\",\n          \"illustration .    .   \",\n          \"illustration . content\",\n          \"illustration . buttonGroup\",\n        ],\n      },\n    },\n    gridTemplateRows: {\n      orientation: {\n        vertical: {\n          default: [\"min-content\", 12, \"min-content\", 4, \"min-content\", \"min-content\"],\n          size: {\n            L: [\"min-content\", 8, \"min-content\", 4, \"min-content\", \"min-content\"],\n          },\n        },\n        horizontal: [\"1fr\", 4, \"1fr\"],\n      },\n    },\n    gridTemplateColumns: {\n      orientation: {\n        horizontal: [\"1fr\", 12, \"auto\"],\n      },\n    },\n    justifyItems: {\n      orientation: {\n        vertical: \"center\",\n        horizontal: \"start\",\n      },\n    },\n    textAlign: {\n      orientation: {\n        vertical: \"center\",\n      },\n    },\n  },\n  getAllowedOverrides({ height: true }),\n);\n\nconst illustration = style<\n  IllustratedMessageStyleProps & { isInDropZone?: boolean; isDropTarget?: boolean }\n>({\n  gridArea: \"illustration\",\n  alignSelf: \"center\",\n  \"--iconPrimary\": {\n    type: \"color\",\n    value: {\n      default: \"neutral\",\n      isDropTarget: \"accent\",\n    },\n  },\n});\n\nconst heading = style<IllustratedMessageStyleProps>({\n  gridArea: \"heading\",\n  font: {\n    size: {\n      S: \"title\",\n      M: \"title-xl\",\n      L: \"title-2xl\",\n    },\n  },\n  alignSelf: \"end\",\n  margin: 0,\n});\n\nconst content = style<IllustratedMessageStyleProps>({\n  font: {\n    size: {\n      S: \"body-xs\",\n      M: \"body-sm\",\n      L: \"body-sm\",\n    },\n  },\n  gridArea: \"content\",\n  alignSelf: \"start\",\n});\n\nconst buttonGroup = style({\n  gridArea: \"buttonGroup\",\n  marginTop: 16,\n});\n\n/**\n * An IllustratedMessage displays an illustration and a message, usually for an empty state or error page.\n */\nexport function IllustratedMessage(props: IllustratedMessageProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(IllustratedMessageContext), props.slot);\n  const merged = mergeProps<IllustratedMessageProps & IllustratedMessageContextProps>(\n    contextProps ?? {},\n    props,\n  );\n  const [local, domProps] = splitProps(merged, [\n    \"children\",\n    \"orientation\",\n    \"size\",\n    \"styles\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"slot\",\n    \"ref\",\n    \"isInDropZone\",\n    \"isDropTarget\",\n    \"illustration\",\n    \"heading\",\n    \"description\",\n    \"class\",\n  ]);\n  const size = () => local.size ?? \"M\";\n  const orientation = () => local.orientation ?? \"vertical\";\n  const isInDropZone = () => !!local.isInDropZone;\n  const isDropTarget = () => !!local.isDropTarget;\n  const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);\n  const mergedUnsafeStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const className = () =>\n    [\n      contextProps?.UNSAFE_className,\n      local.UNSAFE_className,\n      local.class,\n      illustratedMessage(\n        {\n          size: size(),\n          orientation: orientation(),\n          isInDropZone: isInDropZone(),\n        },\n        mergedStyles(),\n      ),\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n  return (\n    <div\n      {...filterDOMProps(domProps as Record<string, unknown>)}\n      ref={mergeContextRefs(\n        (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n        props.ref,\n      )}\n      class={className()}\n      style={mergedUnsafeStyle()}\n    >\n      <HeadingContext\n        value={{ styles: () => heading({ orientation: orientation(), size: size() }) }}\n      >\n        <ContentContext value={{ styles: () => content({ size: size() }) }}>\n          <IllustrationContext\n            value={{\n              get size() {\n                return size() === \"L\" ? \"L\" : \"M\";\n              },\n              styles: () =>\n                illustration({\n                  orientation: orientation(),\n                  size: size(),\n                  isInDropZone: isInDropZone(),\n                  isDropTarget: isDropTarget(),\n                }),\n            }}\n          >\n            <ButtonGroupContext value={{ styles: buttonGroup }}>\n              <Show when={local.illustration}>\n                <div class={illustration({ orientation: orientation(), size: size() })}>\n                  {local.illustration}\n                </div>\n              </Show>\n              <Show when={local.heading}>\n                <h3 class={heading({ orientation: orientation(), size: size() })}>\n                  {local.heading}\n                </h3>\n              </Show>\n              <Show when={local.description}>\n                <div class={content({ size: size() })}>{local.description}</div>\n              </Show>\n              {local.children}\n            </ButtonGroupContext>\n          </IllustrationContext>\n        </ContentContext>\n      </HeadingContext>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/image/index.d.ts

@@ -1,4 +1,5 @@
-import { type Context, type JSX } from "solid-js";
+import type { Context } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { StyleString } from "../style";
 import type { UnsafeClassName } from "../s2-internal/style-utils";
 import { type RefLike, type SpectrumContextValue } from "../button/spectrum-context";
@@ -27,9 +28,19 @@ export interface ImageProps {
     decoding?: "async" | "auto" | "sync";
     fetchPriority?: "high" | "low" | "auto";
     loading?: "eager" | "lazy";
-    referrerPolicy?: JSX.ImgHTMLAttributes<HTMLImageElement>["referrerPolicy"];
+    referrerPolicy?: JSX.ImgHTMLAttributes<HTMLImageElement>["referrerpolicy"];
     width?: number;
     height?: number;
+    /**
+     * Local addition — no S2 counterpart. Renders the bitmap with nearest-neighbour
+     * scaling (`image-rendering: pixelated`) instead of the browser's smoothing, so
+     * the register's low-resolution pixel thumbs stay crisp blocks when they are
+     * scaled up rather than turning into a blur. It is a rendering mode of the
+     * element, not a design token, so it has no place on the style ramp and is
+     * carried as a boolean here.
+     * @default false
+     */
+    isPixelated?: boolean;
     styles?: StyleString | (() => StyleString | undefined);
     renderError?: () => JSX.Element;
     group?: ImageGroup;

package/dist/image/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/image/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,OAAO,EACZ,KAAK,GAAG,EAGT,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAKL,KAAK,OAAO,EACZ,KAAK,oBAAoB,EAC1B,MAAM,4BAA4B,CAAC;AAIpC,MAAM,WAAW,WAAW;IAC1B,4DAA4D;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kFAAkF;IAClF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IACzB,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,GAAG,WAAW,EAAE,CAAC;IAC7B,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,WAAW,GAAG,iBAAiB,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC;IACvD,WAAW,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAChC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,gBAAgB,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IAC5C,YAAY,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;IACjC,GAAG,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAC/B;AAED,KAAK,iBAAiB,GAAG,UAAU,GAAG;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,YAAY,kDAA+D,CAAC;AAEzF,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,kFAAkF;IAClF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAED,UAAU,eAAe;IACvB,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;AASlD,wBAAgB,gBAAgB,IAAI,UAAU,CAE7C;AAED,eAAO,MAAM,iBAAiB,YAAqB,CAAC;AAwCpD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,GAAG,CAAC,OAAO,CAS1E;AAsFD,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAsNpD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/image/index.tsx"],"names":[],"mappings":"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"}

package/dist/image/index.js

@@ -1,11 +1,15 @@
 import { mergeStyles } from "../style/runtime.js";
-import { useTheme } from "../provider/index.js";
+import { o as useTheme } from "../_chunk/provider.js";
 import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "../_chunk/spectrum-context.js";
 import { createIsSkeleton, loadingStyle, useLoadingAnimation } from "../skeleton/index.js";
-import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, mergeProps, runHydrationEvents, setAttribute, spread, style, template, use } from "solid-js/web";
-import { Show, createContext, createEffect, createMemo, createSignal, mergeProps as mergeProps$1, onCleanup, splitProps, untrack, useContext } from "solid-js";
+import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, readShallow, ref, runHydrationEvents, scope, setAttribute, spread, style, template } from "@solidjs/web";
+import { Show, createContext, createEffect, createMemo, createSignal, untrack, useContext } from "solid-js";
+import { mergeProps as mergeProps$1, splitProps } from "@proyecto-viviana/solidaria/utils";
 //#region src/image/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<img>`, true, false, false), _tmpl$2 = /*#__PURE__*/ template(`<picture class=" _H40ub4c151 __D40ub4c151"><!$><!/><!$><!/>`), _tmpl$3 = /*#__PURE__*/ template(`<source>`), _tmpl$4 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<img>`, 1);
+var _tmpl$2 = /* @__PURE__ */ template(`<picture class=" _H40ub4c17 __D40ub4c17"><!$><!/><!$><!/>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<source>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div>`);
 const ImageContext = createContext(null);
 const defaultImageGroupValue = {
 	revealAll: true,
@@ -17,30 +21,33 @@ function createImageGroup() {
 	return createContext(defaultImageGroupValue);
 }
 const DefaultImageGroup = createImageGroup();
-const imageWrapperStyles = " gkDWoNd151 _Nc151 Pc151";
+const imageWrapperStyles = " gLX7Xt17 _Nc17 Pc17";
 const imageStyles = function anonymous(props) {
 	let rules = " ";
-	rules += " sb151";
-	rules += " Za151";
-	rules += " Fb151";
-	rules += " _H40ub4c151";
-	rules += " __D40ub4c151";
-	if (props.isRevealed) rules += " _Ib151";
-	else rules += " _Ia151";
-	if (props.isTransitioning) rules += " Yf151";
-	else rules += " Ye151";
-	rules += " Xe151";
-	if (props.isTransitioning) rules += " _2b151";
-	else rules += " _2b151";
+	rules += " sb17";
+	rules += " Za17";
+	rules += " Fb17";
+	rules += " _H40ub4c17";
+	rules += " __D40ub4c17";
+	if (props.isRevealed) rules += " _Ib17";
+	else rules += " _Ia17";
+	if (props.isTransitioning) rules += " Yf17";
+	else rules += " Ye17";
+	rules += " Xe17";
+	if (props.isTransitioning) rules += " _2b17";
+	else rules += " _2b17";
 	return rules;
 };
+const pixelatedStyle = "y8PNPe";
 function isAllLoaded(loaded) {
 	for (const isLoaded of loaded.values()) if (!isLoaded) return false;
 	return true;
 }
 function ImageCoordinator(props) {
 	const group = () => props.group ?? DefaultImageGroup;
-	if (useContext(group()) !== defaultImageGroupValue) return memo(() => props.children);
+	if (useContext(group()) !== defaultImageGroupValue) return memo(() => {
+		return props.children;
+	});
 	return createComponent(ImageCoordinatorRoot, props);
 }
 function ImageCoordinatorRoot(props) {
@@ -84,10 +91,12 @@ function ImageCoordinatorRoot(props) {
 		});
 	};
 	createEffect(() => {
-		if (loadedAll()) return;
-		const delay = Math.max(0, loadStartTime() + timeout() - Date.now());
+		if (loadedAll()) return null;
+		return Math.max(0, loadStartTime() + timeout() - Date.now());
+	}, (delay) => {
+		if (delay == null) return;
 		const timeoutId = window.setTimeout(() => setTimedOut(true), delay);
-		onCleanup(() => window.clearTimeout(timeoutId));
+		return () => window.clearTimeout(timeoutId);
 	});
 	const value = {
 		get revealAll() {
@@ -97,7 +106,7 @@ function ImageCoordinatorRoot(props) {
 		unregister,
 		load
 	};
-	const GroupProvider = group().Provider;
+	const GroupProvider = group();
 	return createComponent(GroupProvider, {
 		value,
 		get children() {
@@ -113,7 +122,8 @@ function sourceMedia(source, colorScheme) {
 }
 function Image(props) {
 	const contextProps = getSlottedContextProps(useContext(ImageContext), props.slot);
-	const [local] = splitProps(mergeProps$1(contextProps ?? {}, props), [
+	const merged = mergeProps$1(contextProps ?? {}, props);
+	const [local] = splitProps(merged, [
 		"src",
 		"alt",
 		"crossOrigin",
@@ -123,6 +133,7 @@ function Image(props) {
 		"referrerPolicy",
 		"width",
 		"height",
+		"isPixelated",
 		"styles",
 		"renderError",
 		"group",
@@ -135,10 +146,10 @@ function Image(props) {
 	]);
 	const theme = useTheme();
 	const imageGroup = useContext(local.group ?? DefaultImageGroup);
-	const [state, setState] = createSignal("loading");
-	const [lastCacheKey, setLastCacheKey] = createSignal(sourceCacheKey(local.src));
-	const [startTime, setStartTime] = createSignal(Date.now());
-	const [loadTime, setLoadTime] = createSignal(0);
+	const [state, setState] = createSignal("loading", { ownedWrite: true });
+	const [lastCacheKey, setLastCacheKey] = createSignal(sourceCacheKey(local.src), { ownedWrite: true });
+	const [startTime, setStartTime] = createSignal(Date.now(), { ownedWrite: true });
+	const [loadTime, setLoadTime] = createSignal(0, { ownedWrite: true });
 	const isSkeleton = createIsSkeleton();
 	let imageElement;
 	const nodeEnv = globalThis.process?.env?.NODE_ENV;
@@ -150,31 +161,41 @@ function Image(props) {
 	const transitioning = () => revealed() && loadTime() > 200;
 	const animating = () => isSkeleton() || state() === "loading" || state() === "loaded";
 	const loadingAnimationRef = useLoadingAnimation(animating);
-	createEffect(() => {
-		const nextKey = cacheKey();
-		if (nextKey !== lastCacheKey() && !hidden()) {
+	createEffect(() => ({
+		nextKey: cacheKey(),
+		hidden: hidden(),
+		last: lastCacheKey()
+	}), ({ nextKey, hidden, last }) => {
+		if (nextKey !== last && !hidden) {
 			setState("loading");
 			setLastCacheKey(nextKey);
 			setStartTime(Date.now());
 			setLoadTime(0);
 		}
 	});
-	createEffect(() => {
-		if (hidden()) return;
-		const key = cacheKey();
+	createEffect(() => hidden() ? null : cacheKey(), (key) => {
+		if (key == null) return;
 		imageGroup.register(key);
-		onCleanup(() => imageGroup.unregister(key));
+		return () => imageGroup.unregister(key);
 	});
-	createEffect(() => {
-		if (state() === "loaded" && imageGroup.revealAll && !hidden()) {
+	createEffect(() => ({
+		loaded: state() === "loaded",
+		revealAll: imageGroup.revealAll,
+		hidden: hidden(),
+		start: startTime()
+	}), ({ loaded, revealAll, hidden, start }) => {
+		if (loaded && revealAll && !hidden) {
 			setState("revealed");
-			setLoadTime(Date.now() - startTime());
+			setLoadTime(Date.now() - start);
 		}
 	});
-	createEffect(() => {
-		if (hidden()) return;
+	createEffect(() => ({
+		hidden: hidden(),
+		loading: state() === "loading"
+	}), ({ hidden, loading }) => {
+		if (hidden) return;
 		const image = imageElement;
-		if (state() === "loading" && image?.complete) queueMicrotask(() => {
+		if (loading && image?.complete) queueMicrotask(() => {
 			if (image.naturalWidth === 0 && image.naturalHeight === 0) handleError();
 			else handleLoad();
 		});
@@ -210,19 +231,19 @@ function Image(props) {
 	};
 	const img = () => (() => {
 		var _el$ = getNextElement(_tmpl$);
-		_el$.addEventListener("error", handleError);
-		_el$.addEventListener("load", handleLoad);
-		use((element) => {
-			imageElement = element;
+		ref(() => {
+			return (element) => {
+				imageElement = element;
+			};
 		}, _el$);
-		spread(_el$, mergeProps({
+		spread(_el$, [{
 			get src() {
-				return memo(() => !!(typeof srcProp() === "string" && srcProp()))() ? srcProp() : void 0;
+				return typeof srcProp() === "string" && srcProp() ? srcProp() : void 0;
 			},
 			get alt() {
 				return local.alt;
 			},
-			get crossOrigin() {
+			get crossorigin() {
 				return local.crossOrigin;
 			},
 			get decoding() {
@@ -231,7 +252,7 @@ function Image(props) {
 			get loading() {
 				return local.loading;
 			},
-			get referrerPolicy() {
+			get referrerpolicy() {
 				return local.referrerPolicy;
 			},
 			get width() {
@@ -240,82 +261,92 @@ function Image(props) {
 			get height() {
 				return local.height;
 			},
-			get itemProp() {
+			get itemprop() {
 				return local.itemProp;
 			},
-			get ["class"]() {
-				return imageStyles({
+			onLoad: handleLoad,
+			onError: handleError,
+			get "class"() {
+				return [imageStyles({
 					isRevealed: revealed(),
 					isTransitioning: transitioning()
-				});
+				}), local.isPixelated ? pixelatedStyle : void 0].filter(Boolean).join(" ");
 			}
-		}, () => ({ fetchpriority: local.fetchPriority })), false, false);
+		}, () => {
+			return { fetchpriority: local.fetchPriority };
+		}], false);
 		runHydrationEvents();
 		return _el$;
 	})();
 	const imageContent = () => {
-		if (Array.isArray(srcProp())) return (() => {
-			var _el$2 = getNextElement(_tmpl$2), _el$3 = _el$2.firstChild, [_el$4, _co$] = getNextMarker(_el$3.nextSibling), _el$5 = _el$4.nextSibling, [_el$6, _co$2] = getNextMarker(_el$5.nextSibling);
-			insert(_el$2, () => sources().map((source) => {
-				const { colorScheme: _colorScheme, ...sourceProps } = source;
-				return (() => {
-					var _el$7 = getNextElement(_tmpl$3);
-					effect((_p$) => {
-						var _v$ = sourceProps.srcSet, _v$2 = sourceProps.media, _v$3 = sourceProps.sizes, _v$4 = sourceProps.type, _v$5 = sourceProps.width, _v$6 = sourceProps.height;
-						_v$ !== _p$.e && setAttribute(_el$7, "srcset", _p$.e = _v$);
-						_v$2 !== _p$.t && setAttribute(_el$7, "media", _p$.t = _v$2);
-						_v$3 !== _p$.a && setAttribute(_el$7, "sizes", _p$.a = _v$3);
-						_v$4 !== _p$.o && setAttribute(_el$7, "type", _p$.o = _v$4);
-						_v$5 !== _p$.i && setAttribute(_el$7, "width", _p$.i = _v$5);
-						_v$6 !== _p$.n && setAttribute(_el$7, "height", _p$.n = _v$6);
-						return _p$;
-					}, {
-						e: void 0,
-						t: void 0,
-						a: void 0,
-						o: void 0,
-						i: void 0,
-						n: void 0
+		if (Array.isArray(srcProp())) {
+			var _el$2 = getNextElement(_tmpl$2);
+			var _el$3 = _el$2.firstChild;
+			var [_el$4, _el$5] = getNextMarker(_el$3.nextSibling);
+			var _el$6 = _el$4.nextSibling;
+			var [_el$7, _el$8] = getNextMarker(_el$6.nextSibling);
+			insert(_el$2, scope(() => {
+				return sources().map((source) => {
+					const { colorScheme: _colorScheme, ...sourceProps } = source;
+					var _el$9 = getNextElement(_tmpl$3);
+					effect(() => {
+						return {
+							e: sourceProps.srcSet,
+							t: sourceProps.media,
+							a: sourceProps.sizes,
+							o: sourceProps.type,
+							i: sourceProps.width,
+							n: sourceProps.height
+						};
+					}, ({ e, t, a, o, i, n }, _p$) => {
+						e !== _p$?.e && setAttribute(_el$9, "srcset", e);
+						t !== _p$?.t && setAttribute(_el$9, "media", t);
+						a !== _p$?.a && setAttribute(_el$9, "sizes", a);
+						o !== _p$?.o && setAttribute(_el$9, "type", o);
+						i !== _p$?.i && setAttribute(_el$9, "width", i);
+						n !== _p$?.n && setAttribute(_el$9, "height", n);
 					});
-					return _el$7;
-				})();
-			}), _el$4, _co$);
-			insert(_el$2, img, _el$6, _co$2);
+					return _el$9;
+				});
+			}), _el$4, _el$5);
+			insert(_el$2, scope(() => {
+				return img();
+			}), _el$7, _el$8);
 			return _el$2;
-		})();
+		}
 		return img();
 	};
 	if (hidden()) return null;
-	return (() => {
-		var _el$8 = getNextElement(_tmpl$4);
-		var _ref$ = mergeContextRefs(contextProps?.ref, props.ref, (element) => {
-			loadingAnimationRef(element);
-		});
-		typeof _ref$ === "function" && use(_ref$, _el$8);
-		insert(_el$8, createComponent(Show, {
-			get when() {
-				return !errorState();
-			},
-			get fallback() {
-				return errorState();
-			},
-			get children() {
-				return imageContent();
-			}
-		}));
-		effect((_p$) => {
-			var _v$7 = slot() ?? void 0, _v$8 = wrapperStyle(), _v$9 = wrapperClass();
-			_v$7 !== _p$.e && setAttribute(_el$8, "slot", _p$.e = _v$7);
-			_p$.t = style(_el$8, _v$8, _p$.t);
-			_v$9 !== _p$.a && className(_el$8, _p$.a = _v$9);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0,
-			a: void 0
-		});
-		return _el$8;
-	})();
+	var _el$10 = getNextElement(_tmpl$4);
+	var _ref$ = mergeContextRefs(contextProps?.ref, props.ref, (element) => {
+		loadingAnimationRef(element);
+	});
+	(typeof _ref$ === "function" || Array.isArray(_ref$)) && ref(() => {
+		return _ref$;
+	}, _el$10);
+	insert(_el$10, createComponent(Show, {
+		get when() {
+			return !errorState();
+		},
+		get fallback() {
+			return errorState();
+		},
+		get children() {
+			return imageContent();
+		}
+	}));
+	effect(() => {
+		return {
+			e: slot() ?? void 0,
+			t: readShallow(wrapperStyle()),
+			a: readShallow(wrapperClass())
+		};
+	}, ({ e, t, a }, _p$) => {
+		e !== _p$?.e && setAttribute(_el$10, "slot", e);
+		style(_el$10, t, _p$?.t);
+		className(_el$10, a, _p$?.a);
+	});
+	return _el$10;
 }
 //#endregion
 export { DefaultImageGroup, Image, ImageContext, ImageCoordinator, createImageGroup };

package/dist/image/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/image/index.tsx"],"sourcesContent":["import {\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  mergeProps,\n  onCleanup,\n  Show,\n  splitProps,\n  type Context,\n  type JSX,\n  untrack,\n  useContext,\n} from \"solid-js\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport type { UnsafeClassName } from \"../s2-internal/style-utils\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\nimport { useTheme } from \"../provider\";\nimport { createIsSkeleton, loadingStyle, useLoadingAnimation } from \"../skeleton\";\n\nexport interface ImageSource {\n  /** A comma-separated list of image URLs and descriptors. */\n  srcSet?: string;\n  /** The color scheme for this image source. */\n  colorScheme?: \"light\" | \"dark\";\n  /** A media query describing when the source should render. */\n  media?: string;\n  /** A list of source sizes that describe the final rendered width of the image. */\n  sizes?: string;\n  /** The mime type of the image. */\n  type?: string;\n  /** The intrinsic width of the image. */\n  width?: number;\n  /** The intrinsic height of the image. */\n  height?: number;\n}\n\nexport interface ImageProps {\n  /** The URL of the image or a list of conditional sources. */\n  src?: string | ImageSource[];\n  /** Accessible alt text for the image. */\n  alt?: string;\n  crossOrigin?: \"anonymous\" | \"use-credentials\";\n  decoding?: \"async\" | \"auto\" | \"sync\";\n  fetchPriority?: \"high\" | \"low\" | \"auto\";\n  loading?: \"eager\" | \"lazy\";\n  referrerPolicy?: JSX.ImgHTMLAttributes<HTMLImageElement>[\"referrerPolicy\"];\n  width?: number;\n  height?: number;\n  styles?: StyleString | (() => StyleString | undefined);\n  renderError?: () => JSX.Element;\n  group?: ImageGroup;\n  itemProp?: string;\n  slot?: string | null;\n  UNSAFE_className?: UnsafeClassName | string;\n  UNSAFE_style?: JSX.CSSProperties;\n  ref?: RefLike<HTMLDivElement>;\n}\n\ntype ImageContextValue = ImageProps & {\n  hidden?: boolean;\n};\n\nexport const ImageContext = createContext<SpectrumContextValue<ImageContextValue>>(null);\n\nexport interface ImageCoordinatorProps {\n  children?: JSX.Element;\n  /** Time in milliseconds after which images are always displayed. @default 5000 */\n  timeout?: number;\n  group?: ImageGroup;\n}\n\ninterface ImageGroupValue {\n  readonly revealAll: boolean;\n  register(url: string): void;\n  unregister(url: string): void;\n  load(url: string): void;\n}\n\nexport type ImageGroup = Context<ImageGroupValue>;\n\nconst defaultImageGroupValue: ImageGroupValue = {\n  revealAll: true,\n  register() {},\n  unregister() {},\n  load() {},\n};\n\nexport function createImageGroup(): ImageGroup {\n  return createContext(defaultImageGroupValue);\n}\n\nexport const DefaultImageGroup = createImageGroup();\n\ntype ImageState = \"loading\" | \"loaded\" | \"revealed\" | \"error\";\n\nconst imageWrapperStyles = style({\n  backgroundColor: \"gray-100\",\n  overflow: \"hidden\",\n});\n\nconst imageStyles = style({\n  display: \"block\",\n  width: \"full\",\n  height: \"full\",\n  objectFit: \"inherit\",\n  objectPosition: \"inherit\",\n  opacity: {\n    default: 0,\n    isRevealed: 1,\n  },\n  transition: {\n    default: \"none\",\n    isTransitioning: \"opacity\",\n  },\n  transitionDuration: 500,\n});\n\nconst pictureStyles = style({\n  objectFit: \"inherit\",\n  objectPosition: \"inherit\",\n});\n\nfunction isAllLoaded(loaded: Map<string, boolean>) {\n  for (const isLoaded of loaded.values()) {\n    if (!isLoaded) {\n      return false;\n    }\n  }\n  return true;\n}\n\nexport function ImageCoordinator(props: ImageCoordinatorProps): JSX.Element {\n  const group = () => props.group ?? DefaultImageGroup;\n  const context = useContext(group());\n\n  if (context !== defaultImageGroupValue) {\n    return <>{props.children}</>;\n  }\n\n  return <ImageCoordinatorRoot {...props} />;\n}\n\nfunction ImageCoordinatorRoot(props: ImageCoordinatorProps): JSX.Element {\n  const group = () => props.group ?? DefaultImageGroup;\n  const timeout = () => props.timeout ?? 5000;\n  const [loadedAll, setLoadedAll] = createSignal(true);\n  const [timedOut, setTimedOut] = createSignal(false);\n  const [loadStartTime, setLoadStartTime] = createSignal(0);\n  const [loaded, setLoaded] = createSignal(new Map<string, boolean>());\n\n  const register = (url: string) => {\n    untrack(() => {\n      setLoaded((current) => {\n        if (current.get(url) === false) {\n          return current;\n        }\n\n        const next = new Map(current);\n        next.set(url, false);\n        if (loadedAll()) {\n          setTimedOut(false);\n          setLoadStartTime(Date.now());\n        }\n        setLoadedAll(false);\n        return next;\n      });\n    });\n  };\n\n  const unregister = (url: string) => {\n    setLoaded((current) => {\n      if (!current.has(url)) {\n        return current;\n      }\n\n      const next = new Map(current);\n      next.delete(url);\n      setLoadedAll(isAllLoaded(next));\n      return next;\n    });\n  };\n\n  const load = (url: string) => {\n    setLoaded((current) => {\n      if (current.get(url) !== false) {\n        return current;\n      }\n\n      const next = new Map(current);\n      next.set(url, true);\n      setLoadedAll(isAllLoaded(next));\n      return next;\n    });\n  };\n\n  createEffect(() => {\n    if (loadedAll()) {\n      return;\n    }\n\n    const delay = Math.max(0, loadStartTime() + timeout() - Date.now());\n    const timeoutId = window.setTimeout(() => setTimedOut(true), delay);\n    onCleanup(() => window.clearTimeout(timeoutId));\n  });\n\n  const value: ImageGroupValue = {\n    get revealAll() {\n      return loadedAll() || timedOut();\n    },\n    register,\n    unregister,\n    load,\n  };\n\n  const GroupProvider = group().Provider;\n  return <GroupProvider value={value}>{props.children}</GroupProvider>;\n}\n\nfunction sourceCacheKey(src: string | ImageSource[] | undefined) {\n  return Array.isArray(src) ? JSON.stringify(src) : (src ?? \"\");\n}\n\nfunction sourceMedia(source: ImageSource, colorScheme: \"light\" | \"dark\") {\n  return `${source.media ? `${source.media} and ` : \"\"}(prefers-color-scheme: ${colorScheme})`;\n}\n\nexport function Image(props: ImageProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(ImageContext), props.slot);\n  const merged = mergeProps(contextProps ?? {}, props);\n  const [local] = splitProps(merged, [\n    \"src\",\n    \"alt\",\n    \"crossOrigin\",\n    \"decoding\",\n    \"fetchPriority\",\n    \"loading\",\n    \"referrerPolicy\",\n    \"width\",\n    \"height\",\n    \"styles\",\n    \"renderError\",\n    \"group\",\n    \"itemProp\",\n    \"slot\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"hidden\",\n    \"ref\",\n  ]);\n  const theme = useTheme();\n  const imageGroup = useContext(local.group ?? DefaultImageGroup);\n  const [state, setState] = createSignal<ImageState>(\"loading\");\n  const [lastCacheKey, setLastCacheKey] = createSignal(sourceCacheKey(local.src));\n  const [startTime, setStartTime] = createSignal(Date.now());\n  const [loadTime, setLoadTime] = createSignal(0);\n  const isSkeleton = createIsSkeleton();\n  let imageElement: HTMLImageElement | undefined;\n\n  const nodeEnv = (globalThis as typeof globalThis & { process?: { env?: { NODE_ENV?: string } } })\n    .process?.env?.NODE_ENV;\n  if (local.alt == null && nodeEnv !== \"production\") {\n    console.warn(\n      'The `alt` prop was not provided to an image. Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image is decorative or redundant with displayed text and should not be announced by screen readers.',\n    );\n  }\n\n  const hidden = () => local.hidden === true;\n  const srcProp = () => local.src ?? \"\";\n  const cacheKey = createMemo(() => sourceCacheKey(local.src));\n  const revealed = () => state() === \"revealed\" && !isSkeleton();\n  const transitioning = () => revealed() && loadTime() > 200;\n  const animating = () => isSkeleton() || state() === \"loading\" || state() === \"loaded\";\n  const loadingAnimationRef = useLoadingAnimation(animating);\n\n  createEffect(() => {\n    const nextKey = cacheKey();\n    if (nextKey !== lastCacheKey() && !hidden()) {\n      setState(\"loading\");\n      setLastCacheKey(nextKey);\n      setStartTime(Date.now());\n      setLoadTime(0);\n    }\n  });\n\n  createEffect(() => {\n    if (hidden()) {\n      return;\n    }\n\n    const key = cacheKey();\n    imageGroup.register(key);\n    onCleanup(() => imageGroup.unregister(key));\n  });\n\n  createEffect(() => {\n    if (state() === \"loaded\" && imageGroup.revealAll && !hidden()) {\n      setState(\"revealed\");\n      setLoadTime(Date.now() - startTime());\n    }\n  });\n\n  createEffect(() => {\n    if (hidden()) {\n      return;\n    }\n\n    const image = imageElement;\n    if (state() === \"loading\" && image?.complete) {\n      queueMicrotask(() => {\n        if (image.naturalWidth === 0 && image.naturalHeight === 0) {\n          handleError();\n        } else {\n          handleLoad();\n        }\n      });\n    }\n  });\n\n  const handleLoad = () => {\n    imageGroup.load(cacheKey());\n    setState(\"loaded\");\n  };\n\n  const handleError = () => {\n    setState(\"error\");\n    imageGroup.unregister(cacheKey());\n  };\n\n  const slot = () => (local.slot === null ? undefined : (local.slot ?? contextProps?.slot));\n  const wrapperClass = () =>\n    [\n      local.UNSAFE_className,\n      mergeStyles(\n        imageWrapperStyles as unknown as StyleString,\n        mergeContextStyles(contextProps?.styles, props.styles),\n      ),\n      animating() ? loadingStyle : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n  const wrapperStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const errorState = () => !isSkeleton() && state() === \"error\" && local.renderError?.();\n\n  const sources = () => {\n    const src = srcProp();\n    if (!Array.isArray(src)) {\n      return [];\n    }\n\n    return src\n      .map((source) => {\n        if (!source.colorScheme) {\n          return source;\n        }\n\n        const colorScheme = theme.colorScheme;\n        if (!colorScheme || colorScheme === \"light dark\") {\n          return {\n            ...source,\n            media: sourceMedia(source, source.colorScheme),\n          };\n        }\n\n        return source.colorScheme === colorScheme ? source : null;\n      })\n      .filter((source): source is ImageSource => source != null);\n  };\n\n  const img = () => (\n    <img\n      src={typeof srcProp() === \"string\" && srcProp() ? (srcProp() as string) : undefined}\n      alt={local.alt}\n      crossOrigin={local.crossOrigin}\n      decoding={local.decoding}\n      loading={local.loading}\n      referrerPolicy={local.referrerPolicy}\n      width={local.width}\n      height={local.height}\n      ref={(element) => {\n        imageElement = element;\n      }}\n      itemProp={local.itemProp}\n      onLoad={handleLoad}\n      onError={handleError}\n      class={imageStyles({\n        isRevealed: revealed(),\n        isTransitioning: transitioning(),\n      })}\n      {...({ fetchpriority: local.fetchPriority } as Record<string, string | undefined>)}\n    />\n  );\n\n  const imageContent = () => {\n    if (Array.isArray(srcProp())) {\n      return (\n        <picture class={pictureStyles}>\n          {sources().map((source) => {\n            const { colorScheme: _colorScheme, ...sourceProps } = source;\n            return (\n              <source\n                srcset={sourceProps.srcSet}\n                media={sourceProps.media}\n                sizes={sourceProps.sizes}\n                type={sourceProps.type}\n                width={sourceProps.width}\n                height={sourceProps.height}\n              />\n            );\n          })}\n          {img()}\n        </picture>\n      );\n    }\n\n    return img();\n  };\n\n  if (hidden()) {\n    return null as unknown as JSX.Element;\n  }\n\n  return (\n    <div\n      ref={mergeContextRefs(\n        (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n        props.ref,\n        (element) => {\n          loadingAnimationRef(element);\n        },\n      )}\n      slot={slot() ?? undefined}\n      style={wrapperStyle()}\n      class={wrapperClass()}\n    >\n      <Show when={!errorState()} fallback={errorState()}>\n        {imageContent()}\n      </Show>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/image/index.tsx"],"sourcesContent":["// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Image.tsx\n// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ImageCoordinator.tsx\n\n// Port of packages/@react-spectrum/s2/src/Image.tsx.\n// Port of packages/@react-spectrum/s2/src/ImageCoordinator.tsx.\nimport {\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  Show,\n  untrack,\n  useContext,\n} from \"solid-js\";\nimport type { Context } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { mergeProps } from \"@proyecto-viviana/solidaria/utils\";\nimport type { StyleString } from \"../style\";\nimport { style } from \"../style\" with { type: \"macro\" };\nimport { css } from \"../style/style-macro\" with { type: \"macro\" };\nimport { mergeStyles } from \"../style/runtime\";\nimport type { UnsafeClassName } from \"../s2-internal/style-utils\";\nimport {\n  getSlottedContextProps,\n  mergeContextRefs,\n  mergeContextStyles,\n  mergeContextUnsafeStyle,\n  type RefLike,\n  type SpectrumContextValue,\n} from \"../button/spectrum-context\";\nimport { useTheme } from \"../provider\";\nimport { createIsSkeleton, loadingStyle, useLoadingAnimation } from \"../skeleton\";\nimport { splitProps } from \"@proyecto-viviana/solidaria/utils\";\n\nexport interface ImageSource {\n  /** A comma-separated list of image URLs and descriptors. */\n  srcSet?: string;\n  /** The color scheme for this image source. */\n  colorScheme?: \"light\" | \"dark\";\n  /** A media query describing when the source should render. */\n  media?: string;\n  /** A list of source sizes that describe the final rendered width of the image. */\n  sizes?: string;\n  /** The mime type of the image. */\n  type?: string;\n  /** The intrinsic width of the image. */\n  width?: number;\n  /** The intrinsic height of the image. */\n  height?: number;\n}\n\nexport interface ImageProps {\n  /** The URL of the image or a list of conditional sources. */\n  src?: string | ImageSource[];\n  /** Accessible alt text for the image. */\n  alt?: string;\n  crossOrigin?: \"anonymous\" | \"use-credentials\";\n  decoding?: \"async\" | \"auto\" | \"sync\";\n  fetchPriority?: \"high\" | \"low\" | \"auto\";\n  loading?: \"eager\" | \"lazy\";\n  referrerPolicy?: JSX.ImgHTMLAttributes<HTMLImageElement>[\"referrerpolicy\"];\n  width?: number;\n  height?: number;\n  /**\n   * Local addition — no S2 counterpart. Renders the bitmap with nearest-neighbour\n   * scaling (`image-rendering: pixelated`) instead of the browser's smoothing, so\n   * the register's low-resolution pixel thumbs stay crisp blocks when they are\n   * scaled up rather than turning into a blur. It is a rendering mode of the\n   * element, not a design token, so it has no place on the style ramp and is\n   * carried as a boolean here.\n   * @default false\n   */\n  isPixelated?: boolean;\n  styles?: StyleString | (() => StyleString | undefined);\n  renderError?: () => JSX.Element;\n  group?: ImageGroup;\n  itemProp?: string;\n  slot?: string | null;\n  UNSAFE_className?: UnsafeClassName | string;\n  UNSAFE_style?: JSX.CSSProperties;\n  ref?: RefLike<HTMLDivElement>;\n}\n\ntype ImageContextValue = ImageProps & {\n  hidden?: boolean;\n};\n\nexport const ImageContext = createContext<SpectrumContextValue<ImageContextValue>>(null);\n\nexport interface ImageCoordinatorProps {\n  children?: JSX.Element;\n  /** Time in milliseconds after which images are always displayed. @default 5000 */\n  timeout?: number;\n  group?: ImageGroup;\n}\n\ninterface ImageGroupValue {\n  readonly revealAll: boolean;\n  register(url: string): void;\n  unregister(url: string): void;\n  load(url: string): void;\n}\n\nexport type ImageGroup = Context<ImageGroupValue>;\n\nconst defaultImageGroupValue: ImageGroupValue = {\n  revealAll: true,\n  register() {},\n  unregister() {},\n  load() {},\n};\n\nexport function createImageGroup(): ImageGroup {\n  return createContext(defaultImageGroupValue);\n}\n\nexport const DefaultImageGroup = createImageGroup();\n\ntype ImageState = \"loading\" | \"loaded\" | \"revealed\" | \"error\";\n\nconst imageWrapperStyles = style({\n  backgroundColor: \"gray-100\",\n  overflow: \"hidden\",\n});\n\nconst imageStyles = style({\n  display: \"block\",\n  width: \"full\",\n  height: \"full\",\n  objectFit: \"inherit\",\n  objectPosition: \"inherit\",\n  opacity: {\n    default: 0,\n    isRevealed: 1,\n  },\n  transition: {\n    default: \"none\",\n    isTransitioning: \"opacity\",\n  },\n  transitionDuration: 500,\n});\n\n/* `image-rendering` has no property on the S2 style ramp (style/spectrum-theme.ts),\n * and it is not a design decision that a token could carry — it is how the raster is\n * resampled. The css() escape hatch is the sanctioned route for exactly this\n * (docs/adr/0001-s2-styling-source-of-truth.md), and it still compiles into the\n * package's shipped styles.css. */\nconst pixelatedStyle = css(`\n  image-rendering: pixelated;\n`);\n\nconst pictureStyles = style({\n  objectFit: \"inherit\",\n  objectPosition: \"inherit\",\n});\n\nfunction isAllLoaded(loaded: Map<string, boolean>) {\n  for (const isLoaded of loaded.values()) {\n    if (!isLoaded) {\n      return false;\n    }\n  }\n  return true;\n}\n\nexport function ImageCoordinator(props: ImageCoordinatorProps): JSX.Element {\n  const group = () => props.group ?? DefaultImageGroup;\n  const context = useContext(group());\n\n  if (context !== defaultImageGroupValue) {\n    return <>{props.children}</>;\n  }\n\n  return <ImageCoordinatorRoot {...props} />;\n}\n\nfunction ImageCoordinatorRoot(props: ImageCoordinatorProps): JSX.Element {\n  const group = () => props.group ?? DefaultImageGroup;\n  const timeout = () => props.timeout ?? 5000;\n  const [loadedAll, setLoadedAll] = createSignal(true);\n  const [timedOut, setTimedOut] = createSignal(false);\n  const [loadStartTime, setLoadStartTime] = createSignal(0);\n  const [loaded, setLoaded] = createSignal(new Map<string, boolean>());\n\n  const register = (url: string) => {\n    untrack(() => {\n      setLoaded((current) => {\n        if (current.get(url) === false) {\n          return current;\n        }\n\n        const next = new Map(current);\n        next.set(url, false);\n        if (loadedAll()) {\n          setTimedOut(false);\n          setLoadStartTime(Date.now());\n        }\n        setLoadedAll(false);\n        return next;\n      });\n    });\n  };\n\n  const unregister = (url: string) => {\n    setLoaded((current) => {\n      if (!current.has(url)) {\n        return current;\n      }\n\n      const next = new Map(current);\n      next.delete(url);\n      setLoadedAll(isAllLoaded(next));\n      return next;\n    });\n  };\n\n  const load = (url: string) => {\n    setLoaded((current) => {\n      if (current.get(url) !== false) {\n        return current;\n      }\n\n      const next = new Map(current);\n      next.set(url, true);\n      setLoadedAll(isAllLoaded(next));\n      return next;\n    });\n  };\n\n  createEffect(\n    () => {\n      if (loadedAll()) return null;\n      return Math.max(0, loadStartTime() + timeout() - Date.now());\n    },\n    (delay) => {\n      if (delay == null) return;\n      const timeoutId = window.setTimeout(() => setTimedOut(true), delay);\n      return () => window.clearTimeout(timeoutId);\n    },\n  );\n\n  const value: ImageGroupValue = {\n    get revealAll() {\n      return loadedAll() || timedOut();\n    },\n    register,\n    unregister,\n    load,\n  };\n\n  const GroupProvider = group();\n  return <GroupProvider value={value}>{props.children}</GroupProvider>;\n}\n\nfunction sourceCacheKey(src: string | ImageSource[] | undefined) {\n  return Array.isArray(src) ? JSON.stringify(src) : (src ?? \"\");\n}\n\nfunction sourceMedia(source: ImageSource, colorScheme: \"light\" | \"dark\") {\n  return `${source.media ? `${source.media} and ` : \"\"}(prefers-color-scheme: ${colorScheme})`;\n}\n\nexport function Image(props: ImageProps): JSX.Element {\n  const contextProps = getSlottedContextProps(useContext(ImageContext), props.slot);\n  const merged = mergeProps<ImageContextValue>(contextProps ?? {}, props);\n  const [local] = splitProps(merged, [\n    \"src\",\n    \"alt\",\n    \"crossOrigin\",\n    \"decoding\",\n    \"fetchPriority\",\n    \"loading\",\n    \"referrerPolicy\",\n    \"width\",\n    \"height\",\n    \"isPixelated\",\n    \"styles\",\n    \"renderError\",\n    \"group\",\n    \"itemProp\",\n    \"slot\",\n    \"UNSAFE_className\",\n    \"UNSAFE_style\",\n    \"hidden\",\n    \"ref\",\n  ]);\n  const theme = useTheme();\n  const imageGroup = useContext(local.group ?? DefaultImageGroup);\n  const [state, setState] = createSignal<ImageState>(\"loading\", { ownedWrite: true });\n  const [lastCacheKey, setLastCacheKey] = createSignal(sourceCacheKey(local.src), {\n    ownedWrite: true,\n  });\n  const [startTime, setStartTime] = createSignal(Date.now(), { ownedWrite: true });\n  const [loadTime, setLoadTime] = createSignal(0, { ownedWrite: true });\n  const isSkeleton = createIsSkeleton();\n  let imageElement: HTMLImageElement | undefined;\n\n  const nodeEnv = (globalThis as typeof globalThis & { process?: { env?: { NODE_ENV?: string } } })\n    .process?.env?.NODE_ENV;\n  if (local.alt == null && nodeEnv !== \"production\") {\n    console.warn(\n      'The `alt` prop was not provided to an image. Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image is decorative or redundant with displayed text and should not be announced by screen readers.',\n    );\n  }\n\n  const hidden = () => local.hidden === true;\n  const srcProp = () => local.src ?? \"\";\n  const cacheKey = createMemo(() => sourceCacheKey(local.src));\n  const revealed = () => state() === \"revealed\" && !isSkeleton();\n  const transitioning = () => revealed() && loadTime() > 200;\n  const animating = () => isSkeleton() || state() === \"loading\" || state() === \"loaded\";\n  const loadingAnimationRef = useLoadingAnimation(animating);\n\n  createEffect(\n    () => ({ nextKey: cacheKey(), hidden: hidden(), last: lastCacheKey() }),\n    ({ nextKey, hidden, last }) => {\n      if (nextKey !== last && !hidden) {\n        setState(\"loading\");\n        setLastCacheKey(nextKey);\n        setStartTime(Date.now());\n        setLoadTime(0);\n      }\n    },\n  );\n\n  createEffect(\n    () => (hidden() ? null : cacheKey()),\n    (key) => {\n      if (key == null) return;\n      imageGroup.register(key);\n      return () => imageGroup.unregister(key);\n    },\n  );\n\n  createEffect(\n    () => ({\n      loaded: state() === \"loaded\",\n      revealAll: imageGroup.revealAll,\n      hidden: hidden(),\n      start: startTime(),\n    }),\n    ({ loaded, revealAll, hidden, start }) => {\n      if (loaded && revealAll && !hidden) {\n        setState(\"revealed\");\n        setLoadTime(Date.now() - start);\n      }\n    },\n  );\n\n  createEffect(\n    () => ({ hidden: hidden(), loading: state() === \"loading\" }),\n    ({ hidden, loading }) => {\n      if (hidden) return;\n      const image = imageElement;\n      if (loading && image?.complete) {\n        queueMicrotask(() => {\n          if (image.naturalWidth === 0 && image.naturalHeight === 0) {\n            handleError();\n          } else {\n            handleLoad();\n          }\n        });\n      }\n    },\n  );\n\n  const handleLoad = () => {\n    imageGroup.load(cacheKey());\n    setState(\"loaded\");\n  };\n\n  const handleError = () => {\n    setState(\"error\");\n    imageGroup.unregister(cacheKey());\n  };\n\n  const slot = () => (local.slot === null ? undefined : (local.slot ?? contextProps?.slot));\n  const wrapperClass = () =>\n    [\n      local.UNSAFE_className,\n      mergeStyles(\n        imageWrapperStyles as unknown as StyleString,\n        mergeContextStyles(contextProps?.styles, props.styles),\n      ),\n      animating() ? loadingStyle : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n  const wrapperStyle = () =>\n    mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);\n  const errorState = () => !isSkeleton() && state() === \"error\" && local.renderError?.();\n\n  const sources = () => {\n    const src = srcProp();\n    if (!Array.isArray(src)) {\n      return [];\n    }\n\n    return src\n      .map((source) => {\n        if (!source.colorScheme) {\n          return source;\n        }\n\n        const colorScheme = theme.colorScheme;\n        if (!colorScheme || colorScheme === \"light dark\") {\n          return {\n            ...source,\n            media: sourceMedia(source, source.colorScheme),\n          };\n        }\n\n        return source.colorScheme === colorScheme ? source : null;\n      })\n      .filter((source): source is ImageSource => source != null);\n  };\n\n  const img = () => (\n    <img\n      src={typeof srcProp() === \"string\" && srcProp() ? (srcProp() as string) : undefined}\n      alt={local.alt}\n      crossorigin={local.crossOrigin}\n      decoding={local.decoding}\n      loading={local.loading}\n      referrerpolicy={local.referrerPolicy}\n      width={local.width}\n      height={local.height}\n      ref={(element) => {\n        imageElement = element;\n      }}\n      itemprop={local.itemProp}\n      onLoad={handleLoad}\n      onError={handleError}\n      class={[\n        imageStyles({\n          isRevealed: revealed(),\n          isTransitioning: transitioning(),\n        }),\n        local.isPixelated ? pixelatedStyle : undefined,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...({ fetchpriority: local.fetchPriority } as Record<string, string | undefined>)}\n    />\n  );\n\n  const imageContent = () => {\n    if (Array.isArray(srcProp())) {\n      return (\n        <picture class={pictureStyles}>\n          {sources().map((source) => {\n            const { colorScheme: _colorScheme, ...sourceProps } = source;\n            return (\n              <source\n                srcset={sourceProps.srcSet}\n                media={sourceProps.media}\n                sizes={sourceProps.sizes}\n                type={sourceProps.type}\n                width={sourceProps.width}\n                height={sourceProps.height}\n              />\n            );\n          })}\n          {img()}\n        </picture>\n      );\n    }\n\n    return img();\n  };\n\n  if (hidden()) {\n    return null as unknown as JSX.Element;\n  }\n\n  return (\n    <div\n      ref={mergeContextRefs(\n        (contextProps as { ref?: RefLike<HTMLDivElement> } | null)?.ref,\n        props.ref,\n        (element) => {\n          loadingAnimationRef(element);\n        },\n      )}\n      slot={slot() ?? undefined}\n      style={wrapperStyle()}\n      class={wrapperClass()}\n    >\n      <Show when={!errorState()} fallback={errorState()}>\n        {imageContent()}\n      </Show>\n    </div>\n  );\n}\n"],"mappings":"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"}