@jinmi/ui 0.0.0-stage → 6.0.1

package/es/Image/style.mjs

@@ -0,0 +1,221 @@
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
+//#region src/Image/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => {
+	const controlHalo = `drop-shadow(0 0 2px ${cssVar.colorBgLayout}) drop-shadow(0 1px 6px ${cssVar.colorBgLayout})`;
+	return {
+		actionsHidden: css`
+      cursor: pointer;
+
+      position: absolute;
+      z-index: 1;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+
+      opacity: 0;
+    `,
+		actionsVisible: css`
+      cursor: pointer;
+
+      position: absolute;
+      z-index: 1;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+
+      opacity: 1;
+    `,
+		borderless: staticStylish.variantBorderlessWithoutHover,
+		filled: css`
+      ${staticStylish.variantOutlinedWithoutHover};
+      ${staticStylish.variantFilledWithoutHover};
+    `,
+		image: css`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      width: auto;
+      height: auto;
+    `,
+		outlined: staticStylish.variantOutlinedWithoutHover,
+		previewable: css`
+      cursor: zoom-in;
+    `,
+		root: css`
+      cursor: pointer;
+      user-select: none;
+
+      position: relative;
+
+      overflow: hidden;
+
+      width: fit-content;
+      border-radius: ${cssVar.borderRadius};
+
+      line-height: 1;
+
+      &:hover {
+        .actions-hidden {
+          opacity: 1;
+        }
+      }
+    `,
+		toolbar: css`
+      pointer-events: auto;
+
+      position: absolute;
+      inset-block-end: 16px;
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+    `,
+		toolbarRow: css`
+      padding-block: 4px;
+      padding-inline: 6px;
+      border-radius: 999px;
+
+      background: color-mix(in srgb, ${cssVar.colorBgLayout} 60%, transparent);
+      backdrop-filter: blur(12px);
+    `,
+		actualSizeCorner: css`
+      /* view-box, so the per-corner transform-origin below is read in the 24x24
+         user space the path coordinates are written in rather than the rendered
+         pixel box. */
+      transform-box: view-box;
+      transition: transform 300ms ${cssVar.motionEaseInOut};
+
+      [data-actual-size='fit'] & {
+        transform: rotate(180deg);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    `,
+		toolbarPercentage: css`
+      user-select: none;
+
+      /* Fixed, not min-width: this is a readout that changes digit count as it
+         zooms (9% → 100% → 800%), and letting it size to content shifts every
+         control beside it on each wheel tick. Wide enough for four digits. */
+      width: 56px;
+      height: 36px;
+
+      font-size: 12px;
+      font-variant-numeric: tabular-nums;
+      color: ${cssVar.colorTextTertiary};
+    `,
+		viewerBackdrop: css`
+      position: fixed;
+      inset: 0;
+
+      opacity: 0;
+      background: color-mix(in srgb, ${cssVar.colorBgLayout} 90%, transparent);
+      backdrop-filter: blur(8px);
+    `,
+		viewerChrome: css`
+      pointer-events: none;
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+    `,
+		viewerChromeIdle: css`
+      pointer-events: none;
+      position: absolute;
+      inset: 0;
+      transition:
+        opacity 200ms ${cssVar.motionEaseOut},
+        visibility 200ms;
+
+      &[data-idle-hidden] {
+        visibility: hidden;
+        opacity: 0;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+    `,
+		viewerClose: css`
+      pointer-events: auto;
+
+      position: absolute;
+      inset-block-start: 16px;
+      inset-inline-end: 16px;
+
+      filter: ${controlHalo};
+    `,
+		viewerCounter: css`
+      pointer-events: none;
+
+      position: absolute;
+      inset-block-start: 16px;
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+
+      padding-block: 4px;
+      padding-inline: 12px;
+      border-radius: 999px;
+
+      font-size: 12px;
+      font-variant-numeric: tabular-nums;
+      color: ${cssVar.colorTextSecondary};
+
+      background: color-mix(in srgb, ${cssVar.colorBgLayout} 60%, transparent);
+      backdrop-filter: blur(12px);
+    `,
+		viewerImage: css`
+      will-change: transform;
+      cursor: zoom-out;
+      user-select: none;
+
+      position: absolute;
+      transform-origin: center center;
+
+      object-fit: contain;
+
+      -webkit-user-drag: none;
+    `,
+		viewerNavButton: css`
+      pointer-events: auto;
+
+      position: absolute;
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+
+      filter: ${controlHalo};
+    `,
+		viewerNavNext: css`
+      inset-inline-end: 16px;
+    `,
+		viewerNavPrev: css`
+      inset-inline-start: 16px;
+    `,
+		viewerPopup: css`
+      position: fixed;
+      inset: 0;
+      overflow: hidden;
+      outline: none;
+    `,
+		wrapper: css`
+      position: relative;
+      overflow: hidden;
+      max-width: 100%;
+      height: auto;
+    `
+	};
+});
+const variants = cva(styles.root, {
+	defaultVariants: { variant: "filled" },
+	variants: { variant: {
+		filled: styles.filled,
+		outlined: styles.outlined,
+		borderless: styles.borderless
+	} }
+});
+const FALLBACK_DARK = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjM0IzQjNCIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K";
+const FALLBACK_LIGHT = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjRUNFQ0VDIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K";
+//#endregion
+export { FALLBACK_DARK, FALLBACK_LIGHT, styles, variants };
+
+//# sourceMappingURL=style.mjs.map

package/es/Image/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Image/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\r\nimport { cva } from 'class-variance-authority';\r\n\r\nimport { lobeStaticStylish } from '@/styles';\r\n\r\nexport const styles = createStaticStyles(({ css, cssVar }) => {\r\n  // Bare viewer controls float directly over arbitrary image content; the\r\n  // theme-side halo (light halo around dark icons in light mode and vice\r\n  // versa) is what keeps them readable without a container panel.\r\n  const controlHalo = `drop-shadow(0 0 2px ${cssVar.colorBgLayout}) drop-shadow(0 1px 6px ${cssVar.colorBgLayout})`;\r\n  return {\r\n    actionsHidden: css`\r\n      cursor: pointer;\r\n\r\n      position: absolute;\r\n      z-index: 1;\r\n      inset-block-start: 0;\r\n      inset-inline-end: 0;\r\n\r\n      opacity: 0;\r\n    `,\r\n    actionsVisible: css`\r\n      cursor: pointer;\r\n\r\n      position: absolute;\r\n      z-index: 1;\r\n      inset-block-start: 0;\r\n      inset-inline-end: 0;\r\n\r\n      opacity: 1;\r\n    `,\r\n    borderless: lobeStaticStylish.variantBorderlessWithoutHover,\r\n    filled: css`\r\n      ${lobeStaticStylish.variantOutlinedWithoutHover};\r\n      ${lobeStaticStylish.variantFilledWithoutHover};\r\n    `,\r\n    image: css`\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n\r\n      width: auto;\r\n      height: auto;\r\n    `,\r\n    outlined: lobeStaticStylish.variantOutlinedWithoutHover,\r\n    previewable: css`\r\n      cursor: zoom-in;\r\n    `,\r\n    root: css`\r\n      cursor: pointer;\r\n      user-select: none;\r\n\r\n      position: relative;\r\n\r\n      overflow: hidden;\r\n\r\n      width: fit-content;\r\n      border-radius: ${cssVar.borderRadius};\r\n\r\n      line-height: 1;\r\n\r\n      &:hover {\r\n        .actions-hidden {\r\n          opacity: 1;\r\n        }\r\n      }\r\n    `,\r\n    toolbar: css`\r\n      pointer-events: auto;\r\n\r\n      position: absolute;\r\n      inset-block-end: 16px;\r\n      inset-inline-start: 50%;\r\n      transform: translateX(-50%);\r\n    `,\r\n    // The glass lives on the icon row, not the toolbar itself: tooltips and\r\n    // the more-menu portal into the toolbar element, and an ancestor\r\n    // backdrop-filter/filter would distort those popups too.\r\n    toolbarRow: css`\r\n      padding-block: 4px;\r\n      padding-inline: 6px;\r\n      border-radius: 999px;\r\n\r\n      background: color-mix(in srgb, ${cssVar.colorBgLayout} 60%, transparent);\r\n      backdrop-filter: blur(12px);\r\n    `,\r\n    actualSizeCorner: css`\r\n      /* view-box, so the per-corner transform-origin below is read in the 24x24\r\n         user space the path coordinates are written in rather than the rendered\r\n         pixel box. */\r\n      transform-box: view-box;\r\n      transition: transform 300ms ${cssVar.motionEaseInOut};\r\n\r\n      [data-actual-size='fit'] & {\r\n        transform: rotate(180deg);\r\n      }\r\n\r\n      @media (prefers-reduced-motion: reduce) {\r\n        transition: none;\r\n      }\r\n    `,\r\n\r\n    toolbarPercentage: css`\r\n      user-select: none;\r\n\r\n      /* Fixed, not min-width: this is a readout that changes digit count as it\r\n         zooms (9% → 100% → 800%), and letting it size to content shifts every\r\n         control beside it on each wheel tick. Wide enough for four digits. */\r\n      width: 56px;\r\n      height: 36px;\r\n\r\n      font-size: 12px;\r\n      font-variant-numeric: tabular-nums;\r\n      color: ${cssVar.colorTextTertiary};\r\n    `,\r\n\r\n    viewerBackdrop: css`\r\n      position: fixed;\r\n      inset: 0;\r\n\r\n      opacity: 0;\r\n      background: color-mix(in srgb, ${cssVar.colorBgLayout} 90%, transparent);\r\n      backdrop-filter: blur(8px);\r\n    `,\r\n    viewerChrome: css`\r\n      pointer-events: none;\r\n      position: absolute;\r\n      inset: 0;\r\n      opacity: 0;\r\n    `,\r\n    viewerChromeIdle: css`\r\n      pointer-events: none;\r\n      position: absolute;\r\n      inset: 0;\r\n      transition:\r\n        opacity 200ms ${cssVar.motionEaseOut},\r\n        visibility 200ms;\r\n\r\n      &[data-idle-hidden] {\r\n        visibility: hidden;\r\n        opacity: 0;\r\n      }\r\n\r\n      @media (prefers-reduced-motion: reduce) {\r\n        transition: none;\r\n      }\r\n    `,\r\n    viewerClose: css`\r\n      pointer-events: auto;\r\n\r\n      position: absolute;\r\n      inset-block-start: 16px;\r\n      inset-inline-end: 16px;\r\n\r\n      filter: ${controlHalo};\r\n    `,\r\n    viewerCounter: css`\r\n      pointer-events: none;\r\n\r\n      position: absolute;\r\n      inset-block-start: 16px;\r\n      inset-inline-start: 50%;\r\n      transform: translateX(-50%);\r\n\r\n      padding-block: 4px;\r\n      padding-inline: 12px;\r\n      border-radius: 999px;\r\n\r\n      font-size: 12px;\r\n      font-variant-numeric: tabular-nums;\r\n      color: ${cssVar.colorTextSecondary};\r\n\r\n      background: color-mix(in srgb, ${cssVar.colorBgLayout} 60%, transparent);\r\n      backdrop-filter: blur(12px);\r\n    `,\r\n    viewerImage: css`\r\n      will-change: transform;\r\n      cursor: zoom-out;\r\n      user-select: none;\r\n\r\n      position: absolute;\r\n      transform-origin: center center;\r\n\r\n      object-fit: contain;\r\n\r\n      -webkit-user-drag: none;\r\n    `,\r\n    viewerNavButton: css`\r\n      pointer-events: auto;\r\n\r\n      position: absolute;\r\n      inset-block-start: 50%;\r\n      transform: translateY(-50%);\r\n\r\n      filter: ${controlHalo};\r\n    `,\r\n    viewerNavNext: css`\r\n      inset-inline-end: 16px;\r\n    `,\r\n    viewerNavPrev: css`\r\n      inset-inline-start: 16px;\r\n    `,\r\n    viewerPopup: css`\r\n      position: fixed;\r\n      inset: 0;\r\n      overflow: hidden;\r\n      outline: none;\r\n    `,\r\n    wrapper: css`\r\n      position: relative;\r\n      overflow: hidden;\r\n      max-width: 100%;\r\n      height: auto;\r\n    `,\r\n  };\r\n});\r\n\r\nexport const variants = cva(styles.root, {\r\n  defaultVariants: {\r\n    variant: 'filled',\r\n  },\r\n\r\n  variants: {\r\n    variant: {\r\n      filled: styles.filled,\r\n      outlined: styles.outlined,\r\n      borderless: styles.borderless,\r\n    },\r\n  },\r\n});\r\n\r\nexport const FALLBACK_DARK =\r\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjM0IzQjNCIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjNjI2MjYyIiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\r\nexport const FALLBACK_LIGHT =\r\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiBmaWxsPSIjRUNFQ0VDIi8+CjxwYXRoIGQ9Ik0xNTYuODg4IDkxLjAwMkgxMDAuMTEyQzk1LjYzMjkgOTEuMDAyIDkyLjAwMTUgOTQuNjMzNCA5Mi4wMDE1IDk5LjExMjdWMTU1Ljg4OEM5Mi4wMDE1IDE2MC4zNjcgOTUuNjMyOSAxNjMuOTk5IDEwMC4xMTIgMTYzLjk5OUgxNTYuODg4QzE2MS4zNjcgMTYzLjk5OSAxNjQuOTk4IDE2MC4zNjcgMTY0Ljk5OCAxNTUuODg4Vjk5LjExMjdDMTY0Ljk5OCA5NC42MzM0IDE2MS4zNjcgOTEuMDAyIDE1Ni44ODggOTEuMDAyWiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTY0Ljk5OCAxMzkuNjY4TDE1Mi40ODQgMTI3LjE1M0MxNTAuOTYyIDEyNS42MzIgMTQ4LjkgMTI0Ljc3OCAxNDYuNzQ5IDEyNC43NzhDMTQ0LjU5OSAxMjQuNzc4IDE0Mi41MzYgMTI1LjYzMiAxNDEuMDE1IDEyNy4xNTNMMTA0LjE2OCAxNjRNMTE2LjMzNCAxMjMuNDQ1QzEyMC44MTMgMTIzLjQ0NSAxMjQuNDQ1IDExOS44MTQgMTI0LjQ0NSAxMTUuMzM0QzEyNC40NDUgMTEwLjg1NSAxMjAuODEzIDEwNy4yMjQgMTE2LjMzNCAxMDcuMjI0QzExMS44NTUgMTA3LjIyNCAxMDguMjIzIDExMC44NTUgMTA4LjIyMyAxMTUuMzM0QzEwOC4yMjMgMTE5LjgxNCAxMTEuODU1IDEyMy40NDUgMTE2LjMzNCAxMjMuNDQ1WiIgc3Ryb2tlPSIjRDdEN0Q3IiBzdHJva2Utd2lkdGg9IjguMTEwNzciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K';\r\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAI5D,MAAM,cAAc,uBAAuB,OAAO,cAAc,0BAA0B,OAAO,cAAc;CAC/G,OAAO;EACL,eAAe,GAAG;;;;;;;;;;EAUlB,gBAAgB,GAAG;;;;;;;;;;EAUnB,YAAYA,cAAkB;EAC9B,QAAQ,GAAG;QACPA,cAAkB,4BAA4B;QAC9CA,cAAkB,0BAA0B;;EAEhD,OAAO,GAAG;;;;;;;;EAQV,UAAUA,cAAkB;EAC5B,aAAa,GAAG;;;EAGhB,MAAM,GAAG;;;;;;;;;uBASU,OAAO,aAAa;;;;;;;;;;EAUvC,SAAS,GAAG;;;;;;;;EAWZ,YAAY,GAAG;;;;;uCAKoB,OAAO,cAAc;;;EAGxD,kBAAkB,GAAG;;;;;oCAKW,OAAO,gBAAgB;;;;;;;;;;EAWvD,mBAAmB,GAAG;;;;;;;;;;;eAWX,OAAO,kBAAkB;;EAGpC,gBAAgB,GAAG;;;;;uCAKgB,OAAO,cAAc;;;EAGxD,cAAc,GAAG;;;;;;EAMjB,kBAAkB,GAAG;;;;;wBAKD,OAAO,cAAc;;;;;;;;;;;;EAYzC,aAAa,GAAG;;;;;;;gBAOJ,YAAY;;EAExB,eAAe,GAAG;;;;;;;;;;;;;;eAcP,OAAO,mBAAmB;;uCAEF,OAAO,cAAc;;;EAGxD,aAAa,GAAG;;;;;;;;;;;;EAYhB,iBAAiB,GAAG;;;;;;;gBAOR,YAAY;;EAExB,eAAe,GAAG;;;EAGlB,eAAe,GAAG;;;EAGlB,aAAa,GAAG;;;;;;EAMhB,SAAS,GAAG;;;;;;CAMd;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB,EACf,SAAS,SACX;CAEA,UAAU,EACR,SAAS;EACP,QAAQ,OAAO;EACf,UAAU,OAAO;EACjB,YAAY,OAAO;CACrB,EACF;AACF,CAAC;AAED,MAAa,gBACX;AACF,MAAa,iBACX"}

package/es/Image/type.d.mts

@@ -0,0 +1,44 @@
+import { ZoomPolicy } from "./viewer/geometry.mjs";
+import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
+//#region src/Image/type.d.ts
+interface ImagePreviewOptions {
+  autoZoomThreshold?: number;
+  defaultZoom?: ZoomPolicy;
+  maxScale?: number;
+  onDownload?: (source: string) => void | Promise<void>;
+  onOpenChange?: (open: boolean) => void;
+  src?: string;
+  toolbarAddon?: ReactNode;
+}
+type ImageProps = Omit<ComponentProps<'img'>, 'width' | 'height'> & {
+  actions?: ReactNode;
+  alwaysShowActions?: boolean;
+  classNames?: {
+    image?: string;
+    wrapper?: string;
+  };
+  height?: number | string;
+  isLoading?: boolean;
+  maxHeight?: number | string;
+  maxWidth?: number | string;
+  minHeight?: number | string;
+  minWidth?: number | string;
+  objectFit?: 'cover' | 'contain';
+  preview?: boolean | ImagePreviewOptions;
+  ref?: Ref<HTMLDivElement>;
+  size?: number | string;
+  styles?: {
+    image?: CSSProperties;
+    wrapper?: CSSProperties;
+  };
+  variant?: 'borderless' | 'filled' | 'outlined';
+  width?: number | string;
+};
+interface PreviewGroupProps {
+  children?: ReactNode;
+  enable?: boolean;
+  preview?: boolean | ImagePreviewOptions;
+}
+//#endregion
+export { ImagePreviewOptions, ImageProps, PreviewGroupProps };
+//# sourceMappingURL=type.d.mts.map

package/es/Image/useImagePreview.d.mts

@@ -0,0 +1,11 @@
+import { ImagePreviewOptions } from "./type.mjs";
+import { ReactNode, RefObject } from "react";
+//#region src/Image/useImagePreview.d.ts
+interface UseImagePreviewResult {
+  open: () => void;
+  outlet: ReactNode;
+}
+declare const useImagePreview: (elementRef: RefObject<HTMLImageElement | null>, options?: ImagePreviewOptions) => UseImagePreviewResult;
+//#endregion
+export { UseImagePreviewResult, useImagePreview };
+//# sourceMappingURL=useImagePreview.d.mts.map

package/es/Image/useImagePreview.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { openPreview } from "./viewer/registry.mjs";
+import PreviewOutlet from "./viewer/PreviewOutlet.mjs";
+import { useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Image/useImagePreview.tsx
+const useImagePreview = (elementRef, options) => {
+	const resolvedOptions = useMemo(() => ({
+		autoZoomThreshold: 2,
+		defaultZoom: "auto",
+		maxScale: 8,
+		...options
+	}), [options]);
+	return {
+		open: useCallback(() => {
+			const element = elementRef.current;
+			if (!element) return;
+			const active = document.activeElement;
+			openPreview({
+				element,
+				options: resolvedOptions,
+				previewSrc: resolvedOptions.src,
+				src: element.currentSrc || element.src
+			}, void 0, 0, active instanceof HTMLElement && active !== document.body ? active : null);
+		}, [elementRef, resolvedOptions]),
+		outlet: /* @__PURE__ */ jsx(PreviewOutlet, { elementRef })
+	};
+};
+//#endregion
+export { useImagePreview };
+
+//# sourceMappingURL=useImagePreview.mjs.map

package/es/Image/useImagePreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useImagePreview.mjs","names":[],"sources":["../../src/Image/useImagePreview.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { type ReactNode, type RefObject, useCallback, useMemo } from 'react';\r\n\r\nimport type { ImagePreviewOptions } from './type';\r\nimport { DEFAULT_AUTO_ZOOM_THRESHOLD, DEFAULT_MAX_SCALE } from './viewer/geometry';\r\nimport PreviewOutlet from './viewer/PreviewOutlet';\r\nimport { openPreview, type ResolvedPreviewOptions } from './viewer/registry';\r\n\r\nexport interface UseImagePreviewResult {\r\n  open: () => void;\r\n  outlet: ReactNode;\r\n}\r\n\r\nexport const useImagePreview = (\r\n  elementRef: RefObject<HTMLImageElement | null>,\r\n  options?: ImagePreviewOptions,\r\n): UseImagePreviewResult => {\r\n  const resolvedOptions = useMemo<ResolvedPreviewOptions>(\r\n    () => ({\r\n      autoZoomThreshold: DEFAULT_AUTO_ZOOM_THRESHOLD,\r\n      defaultZoom: 'auto',\r\n      maxScale: DEFAULT_MAX_SCALE,\r\n      ...options,\r\n    }),\r\n    [options],\r\n  );\r\n\r\n  const open = useCallback(() => {\r\n    const element = elementRef.current;\r\n    if (!element) return;\r\n    const active = document.activeElement;\r\n    openPreview(\r\n      {\r\n        element,\r\n        options: resolvedOptions,\r\n        previewSrc: resolvedOptions.src,\r\n        src: element.currentSrc || element.src,\r\n      },\r\n      undefined,\r\n      0,\r\n      active instanceof HTMLElement && active !== document.body ? active : null,\r\n    );\r\n  }, [elementRef, resolvedOptions]);\r\n\r\n  return { open, outlet: <PreviewOutlet elementRef={elementRef} /> };\r\n};\r\n"],"mappings":";;;;;;AAcA,MAAa,mBACX,YACA,YAC0B;CAC1B,MAAM,kBAAkB,eACf;EACL,mBAAA;EACA,aAAa;EACb,UAAA;EACA,GAAG;CACL,IACA,CAAC,OAAO,CACV;CAmBA,OAAO;EAAE,MAjBI,kBAAkB;GAC7B,MAAM,UAAU,WAAW;GAC3B,IAAI,CAAC,SAAS;GACd,MAAM,SAAS,SAAS;GACxB,YACE;IACE;IACA,SAAS;IACT,YAAY,gBAAgB;IAC5B,KAAK,QAAQ,cAAc,QAAQ;GACrC,GACA,KAAA,GACA,GACA,kBAAkB,eAAe,WAAW,SAAS,OAAO,SAAS,IACvE;EACF,GAAG,CAAC,YAAY,eAAe,CAEnB;EAAG,QAAQ,oBAAC,eAAD,EAA2B,WAAa,CAAA;CAAE;AACnE"}

package/es/Image/viewer/ActualSizeIcon.mjs

@@ -0,0 +1,44 @@
+"use client";
+import { styles } from "../style.mjs";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Image/viewer/ActualSizeIcon.tsx
+const CORNERS = [
+	{
+		d: "m21 21-6-6m6 6v-4.8m0 4.8h-4.8",
+		origin: "18px 18px"
+	},
+	{
+		d: "M3 16.2V21m0 0h4.8M3 21l6-6",
+		origin: "6px 18px"
+	},
+	{
+		d: "M21 7.8V3m0 0h-4.8M21 3l-6 6",
+		origin: "18px 6px"
+	},
+	{
+		d: "M3 7.8V3m0 0h4.8M3 3l6 6",
+		origin: "6px 6px"
+	}
+];
+const ActualSizeIcon = memo(({ color = "currentColor", fill = "none", height = 24, strokeWidth = 2, width = 24 }) => /* @__PURE__ */ jsx("svg", {
+	fill,
+	height,
+	stroke: color,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth,
+	viewBox: "0 0 24 24",
+	width,
+	xmlns: "http://www.w3.org/2000/svg",
+	children: CORNERS.map(({ d, origin }) => /* @__PURE__ */ jsx("path", {
+		className: styles.actualSizeCorner,
+		d,
+		style: { transformOrigin: origin }
+	}, d))
+}));
+ActualSizeIcon.displayName = "ActualSizeIcon";
+//#endregion
+export { ActualSizeIcon as default };
+
+//# sourceMappingURL=ActualSizeIcon.mjs.map

package/es/Image/viewer/ActualSizeIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActualSizeIcon.mjs","names":[],"sources":["../../../src/Image/viewer/ActualSizeIcon.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { memo } from 'react';\r\n\r\nimport { styles } from '../style';\r\n\r\n// lucide's Expand, kept as four separate corners so each can be transformed on\r\n// its own. Expand and Shrink are not two unrelated glyphs: rotating each of\r\n// these corners 180° about its own quadrant centre maps Expand onto Shrink\r\n// exactly, coordinate for coordinate. That makes the toggle a transform\r\n// animation rather than a path interpolation, so it needs no morphing library\r\n// and stays on the compositor.\r\nconst CORNERS = [\r\n  { d: 'm21 21-6-6m6 6v-4.8m0 4.8h-4.8', origin: '18px 18px' },\r\n  { d: 'M3 16.2V21m0 0h4.8M3 21l6-6', origin: '6px 18px' },\r\n  { d: 'M21 7.8V3m0 0h-4.8M21 3l-6 6', origin: '18px 6px' },\r\n  { d: 'M3 7.8V3m0 0h4.8M3 3l6 6', origin: '6px 6px' },\r\n];\r\n\r\nexport interface ActualSizeIconProps {\r\n  color?: string;\r\n  fill?: string;\r\n  height?: number | string;\r\n  strokeWidth?: number | string;\r\n  width?: number | string;\r\n}\r\n\r\nconst ActualSizeIcon = memo<ActualSizeIconProps>(\r\n  ({ color = 'currentColor', fill = 'none', height = 24, strokeWidth = 2, width = 24 }) => (\r\n    <svg\r\n      fill={fill}\r\n      height={height}\r\n      stroke={color}\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n      strokeWidth={strokeWidth}\r\n      viewBox=\"0 0 24 24\"\r\n      width={width}\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n    >\r\n      {CORNERS.map(({ d, origin }) => (\r\n        <path\r\n          className={styles.actualSizeCorner}\r\n          d={d}\r\n          key={d}\r\n          style={{ transformOrigin: origin }}\r\n        />\r\n      ))}\r\n    </svg>\r\n  ),\r\n);\r\n\r\nActualSizeIcon.displayName = 'ActualSizeIcon';\r\n\r\nexport default ActualSizeIcon;\r\n"],"mappings":";;;;;AAYA,MAAM,UAAU;CACd;EAAE,GAAG;EAAkC,QAAQ;CAAY;CAC3D;EAAE,GAAG;EAA+B,QAAQ;CAAW;CACvD;EAAE,GAAG;EAAgC,QAAQ;CAAW;CACxD;EAAE,GAAG;EAA4B,QAAQ;CAAU;AACrD;AAUA,MAAM,iBAAiB,MACpB,EAAE,QAAQ,gBAAgB,OAAO,QAAQ,SAAS,IAAI,cAAc,GAAG,QAAQ,SAC9E,oBAAC,OAAD;CACQ;CACE;CACR,QAAQ;CACR,eAAc;CACd,gBAAe;CACF;CACb,SAAQ;CACD;CACP,OAAM;CAEL,UAAA,QAAQ,KAAK,EAAE,GAAG,aACjB,oBAAC,QAAD;EACE,WAAW,OAAO;EACf;EAEH,OAAO,EAAE,iBAAiB,OAAO;CAClC,GAFM,CAEN,CACF;AACE,CAAA,CAET;AAEA,eAAe,cAAc"}

package/es/Image/viewer/GalleryNav.mjs

@@ -0,0 +1,44 @@
+"use client";
+import Center from "../../Flex/Center.mjs";
+import ActionIcon from "../../base-ui/ActionIcon/ActionIcon.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import { styles } from "../style.mjs";
+import image_default from "../../i18n/resources/en/image.mjs";
+import { memo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+//#region src/Image/viewer/GalleryNav.tsx
+const GalleryNav = memo(({ current, hasNext, hasPrev, next, prev, total }) => {
+	const { t } = useTranslation(image_default);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		hasPrev && /* @__PURE__ */ jsx(ActionIcon, {
+			className: cx(styles.viewerNavButton, styles.viewerNavPrev),
+			icon: ChevronLeft,
+			size: "large",
+			title: t("image.prev"),
+			onClick: prev
+		}),
+		hasNext && /* @__PURE__ */ jsx(ActionIcon, {
+			className: cx(styles.viewerNavButton, styles.viewerNavNext),
+			icon: ChevronRight,
+			size: "large",
+			title: t("image.next"),
+			onClick: next
+		}),
+		/* @__PURE__ */ jsxs(Center, {
+			horizontal: true,
+			className: styles.viewerCounter,
+			children: [
+				current + 1,
+				" / ",
+				total
+			]
+		})
+	] });
+});
+GalleryNav.displayName = "GalleryNav";
+//#endregion
+export { GalleryNav as default };
+
+//# sourceMappingURL=GalleryNav.mjs.map

package/es/Image/viewer/GalleryNav.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GalleryNav.mjs","names":["imageMessages"],"sources":["../../../src/Image/viewer/GalleryNav.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\r\nimport { memo } from 'react';\r\n\r\nimport ActionIcon from '@/base-ui/ActionIcon';\r\nimport { Center } from '@/Flex';\r\nimport imageMessages from '@/i18n/resources/en/image';\r\nimport { useTranslation } from '@/i18n/useTranslation';\r\n\r\nimport { styles } from '../style';\r\n\r\nexport interface GalleryNavProps {\r\n  current: number;\r\n  hasNext: boolean;\r\n  hasPrev: boolean;\r\n  next: () => void;\r\n  prev: () => void;\r\n  total: number;\r\n}\r\n\r\nconst GalleryNav = memo<GalleryNavProps>(({ current, hasNext, hasPrev, next, prev, total }) => {\r\n  const { t } = useTranslation(imageMessages);\r\n\r\n  return (\r\n    <>\r\n      {hasPrev && (\r\n        <ActionIcon\r\n          className={cx(styles.viewerNavButton, styles.viewerNavPrev)}\r\n          icon={ChevronLeft}\r\n          size={'large'}\r\n          title={t('image.prev')}\r\n          onClick={prev}\r\n        />\r\n      )}\r\n      {hasNext && (\r\n        <ActionIcon\r\n          className={cx(styles.viewerNavButton, styles.viewerNavNext)}\r\n          icon={ChevronRight}\r\n          size={'large'}\r\n          title={t('image.next')}\r\n          onClick={next}\r\n        />\r\n      )}\r\n      <Center horizontal className={styles.viewerCounter}>\r\n        {current + 1} / {total}\r\n      </Center>\r\n    </>\r\n  );\r\n});\r\n\r\nGalleryNav.displayName = 'GalleryNav';\r\n\r\nexport default GalleryNav;\r\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,aAAa,MAAuB,EAAE,SAAS,SAAS,SAAS,MAAM,MAAM,YAAY;CAC7F,MAAM,EAAE,MAAM,eAAeA,aAAa;CAE1C,OACE,qBAAA,YAAA,EAAA,UAAA;EACG,WACC,oBAAC,YAAD;GACE,WAAW,GAAG,OAAO,iBAAiB,OAAO,aAAa;GAC1D,MAAM;GACN,MAAM;GACN,OAAO,EAAE,YAAY;GACrB,SAAS;EACV,CAAA;EAEF,WACC,oBAAC,YAAD;GACE,WAAW,GAAG,OAAO,iBAAiB,OAAO,aAAa;GAC1D,MAAM;GACN,MAAM;GACN,OAAO,EAAE,YAAY;GACrB,SAAS;EACV,CAAA;EAEH,qBAAC,QAAD;GAAQ,YAAA;GAAW,WAAW,OAAO;GAArC,UAAA;IACG,UAAU;IAAE;IAAI;GACX;;CACR,EAAA,CAAA;AAEN,CAAC;AAED,WAAW,cAAc"}