@lobehub/ui 6.0.0-beta.5 → 6.0.0-beta.7

package/es/ActionIcon/style.mjs

@@ -14,7 +14,7 @@ const styles = {
 		$$css: true
 	},
 	dangerRoot: {
-		kMwMTN: "lb53gy9q lby09ll3 lbuvp0lo",
+		kMwMTN: "lbnn15ax lby09ll3 lbuvp0lo",
 		$$css: true
 	},
 	glass: {

package/es/ActionIcon/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/ActionIcon/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst hover = ':hover:not(:active)';\nconst pressed = ':active:not(:disabled, [aria-disabled=\"true\"])';\n\nexport const styles = stylex.create({\n  active: {\n    backgroundColor: cssVar.colorFillSecondary,\n  },\n  activeFill: {\n    backgroundColor: { default: cssVar.colorFillSecondary, [pressed]: cssVar.colorFill },\n  },\n  activeOutlined: {\n    backgroundColor: { 'default': cssVar.colorFillSecondary, ':hover': cssVar.colorFill },\n  },\n  dangerRoot: {\n    color: {\n      'default': cssVar.colorTextTertiary,\n      [hover]: cssVar.colorError,\n      ':active': cssVar.colorErrorActive,\n    },\n  },\n  glass: {\n    backdropFilter: 'saturate(150%) blur(10px)',\n  },\n  root: {\n    color: {\n      'default': cssVar.colorTextTertiary,\n      [hover]: cssVar.colorTextSecondary,\n      ':active': cssVar.colorText,\n    },\n  },\n  shadow: {\n    boxShadow: `0 1px 0 -1px ${cssVar.colorBorder}, 0 1px 2px -0.5px ${cssVar.colorBorder}, 0 2px 2px -1px ${cssVar.colorBorderSecondary}, 0 3px 6px -4px ${cssVar.colorBorderSecondary}`,\n  },\n});\n\nexport const actionIconStyles = Object.fromEntries(\n  Object.entries(styles).map(([key, value]) => [key, stylex.props(value).className ?? '']),\n) as Record<keyof typeof styles, string>;\n"],"mappings":";;AAKA,MAAa,SAAS;CACpB,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,OAAO;EACP,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAa,mBAAmB,OAAO,YAAY,OAAO,QAAQ,MAAM,CAAC,CAAC,KAAK,CAAC,KAAK,WAAW,CAAC,KAAK,OAAO,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/ActionIcon/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst hover = ':hover:not(:active)';\nconst pressed = ':active:not(:disabled, [aria-disabled=\"true\"])';\n\nexport const styles = stylex.create({\n  active: {\n    backgroundColor: cssVar.colorFillSecondary,\n  },\n  activeFill: {\n    backgroundColor: { default: cssVar.colorFillSecondary, [pressed]: cssVar.colorFill },\n  },\n  activeOutlined: {\n    backgroundColor: { 'default': cssVar.colorFillSecondary, ':hover': cssVar.colorFill },\n  },\n  dangerRoot: {\n    color: {\n      'default': `color-mix(in srgb, ${cssVar.colorError} 66%, transparent)`,\n      [hover]: cssVar.colorError,\n      ':active': cssVar.colorErrorActive,\n    },\n  },\n  glass: {\n    backdropFilter: 'saturate(150%) blur(10px)',\n  },\n  root: {\n    color: {\n      'default': cssVar.colorTextTertiary,\n      [hover]: cssVar.colorTextSecondary,\n      ':active': cssVar.colorText,\n    },\n  },\n  shadow: {\n    boxShadow: `0 1px 0 -1px ${cssVar.colorBorder}, 0 1px 2px -0.5px ${cssVar.colorBorder}, 0 2px 2px -1px ${cssVar.colorBorderSecondary}, 0 3px 6px -4px ${cssVar.colorBorderSecondary}`,\n  },\n});\n\nexport const actionIconStyles = Object.fromEntries(\n  Object.entries(styles).map(([key, value]) => [key, stylex.props(value).className ?? '']),\n) as Record<keyof typeof styles, string>;\n"],"mappings":";;AAKA,MAAa,SAAS;CACpB,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,OAAO;EACP,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAa,mBAAmB,OAAO,YAAY,OAAO,QAAQ,MAAM,CAAC,CAAC,KAAK,CAAC,KAAK,WAAW,CAAC,KAAK,OAAO,MAAM,KAAK,CAAC,CAAC,aAAa,EAAE,CAAC,CAAC"}

package/es/ColorSwatches/ColorSwatches.mjs

@@ -6,15 +6,15 @@ import Center from "../Flex/Center.mjs";
 import { Tooltip } from "../Tooltip/Tooltip.mjs";
 import { useControlledState } from "../hooks/useControlledState.mjs";
 import { safeReadableColor } from "../utils/safeReadableColor.mjs";
-import ColorPicker from "../ColorPicker/ColorPicker.mjs";
 import { styles } from "./style.mjs";
+import CustomPicker from "./CustomPicker.mjs";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { CheckIcon } from "lucide-react";
 import chroma from "chroma-js";
 //#region src/ColorSwatches/ColorSwatches.tsx
-const ColorSwatches = ({ enableColorPicker, enableColorSwatches = true, defaultValue, value, style, colors, onChange, size = 24, shape = "circle", texts, ref, ...rest }) => {
+const ColorSwatches = ({ enableColorPicker, enableColorSwatches = true, defaultValue, value, style, colors, onChange, size = 24, shape = "circle", texts, renderPicker, ref, ...rest }) => {
 	const [active, setActive] = useControlledState(defaultValue, {
 		defaultValue,
 		onChange,
@@ -22,6 +22,20 @@ const ColorSwatches = ({ enableColorPicker, enableColorSwatches = true, defaultV
 	});
 	const cssVariables = useMemo(() => ({ "--color-swatches-size": `${size}px` }), [size]);
 	const isCustomActive = useMemo(() => active && active !== cssVar.colorPrimary && !colors.some((c) => c.color === active), [active, colors]);
+	const pickerProps = {
+		active: !!isCustomActive,
+		onChange: setActive,
+		presets: colors.map((c) => c.color),
+		shape,
+		size,
+		value: isCustomActive ? active : void 0
+	};
+	const defaultPicker = enableColorPicker && /* @__PURE__ */ jsx(CustomPicker, {
+		...pickerProps,
+		current: active,
+		label: texts?.custom || "Custom",
+		standalone: !enableColorSwatches
+	});
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		horizontal: true,
 		gap: 6,
@@ -62,26 +76,7 @@ const ColorSwatches = ({ enableColorPicker, enableColorSwatches = true, defaultV
 					})
 				})
 			}, c?.key || i);
-		}), enableColorPicker && /* @__PURE__ */ jsx(Tooltip, {
-			title: texts?.custom || "Custom",
-			children: /* @__PURE__ */ jsx("span", {
-				style: { display: "inline-flex" },
-				children: /* @__PURE__ */ jsx(ColorPicker, {
-					presets: enableColorSwatches ? void 0 : colors.map((c) => c.color),
-					value: isCustomActive ? active : void 0,
-					onChangeComplete: setActive,
-					children: /* @__PURE__ */ jsx("button", {
-						"aria-label": texts?.custom || "Custom",
-						type: "button",
-						...stylex.props(styles.picker, enableColorSwatches && styles.conic, !!isCustomActive && styles.activePicker),
-						style: {
-							background: enableColorSwatches ? void 0 : active,
-							borderRadius: shape === "circle" ? "50%" : cssVar.borderRadius
-						}
-					})
-				})
-			})
-		})]
+		}), enableColorPicker && (renderPicker ? renderPicker(pickerProps, defaultPicker) : defaultPicker)]
 	});
 };
 ColorSwatches.displayName = "ColorSwatches";

package/es/ColorSwatches/ColorSwatches.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSwatches.mjs","names":["Flexbox"],"sources":["../../src/ColorSwatches/ColorSwatches.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport chroma from 'chroma-js';\nimport { CheckIcon } from 'lucide-react';\nimport { type FC, useMemo } from 'react';\n\nimport { ColorPicker } from '@/ColorPicker';\nimport { Center, Flexbox } from '@/Flex';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport Tooltip from '@/Tooltip';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { styles } from './style';\nimport type { ColorSwatchesProps } from './type';\n\nconst ColorSwatches: FC<ColorSwatchesProps> = ({\n  enableColorPicker,\n  enableColorSwatches = true,\n  defaultValue,\n  value,\n  style,\n  colors,\n  onChange,\n  size = 24,\n  shape = 'circle',\n  texts,\n  ref,\n  ...rest\n}) => {\n  const [active, setActive] = useControlledState(defaultValue, {\n    defaultValue,\n    onChange,\n    value,\n  });\n\n  // Convert size prop to CSS variable\n  const cssVariables = useMemo<Record<string, string>>(\n    () => ({\n      '--color-swatches-size': `${size}px`,\n    }),\n    [size],\n  );\n\n  const isCustomActive = useMemo(\n    () => active && active !== cssVar.colorPrimary && !colors.some((c) => c.color === active),\n    [active, colors],\n  );\n\n  return (\n    <Flexbox\n      horizontal\n      gap={6}\n      ref={ref}\n      style={{\n        ...cssVariables,\n        flexWrap: 'wrap',\n        ...style,\n      }}\n      {...rest}\n    >\n      {enableColorSwatches &&\n        colors.map((c, i) => {\n          const color = c.color || cssVar.colorPrimary;\n          const isActive = (!active && !c.color) || color === active;\n          // Check if color is transparent or CSS variable (which chroma can't parse)\n          const isTransparent =\n            c.color === 'transparent' ||\n            (c.color &&\n              !c.color.startsWith('var(') &&\n              (() => {\n                try {\n                  return chroma(c.color).alpha() === 0;\n                } catch {\n                  return false;\n                }\n              })());\n          return (\n            <Tooltip key={c?.key || i} title={c.title}>\n              <Center\n                {...stylex.props(\n                  styles.container,\n                  !!isTransparent && styles.transparent,\n                  isActive && styles.activeContainer,\n                )}\n                style={{\n                  background: isTransparent ? undefined : color,\n                  borderRadius: shape === 'circle' ? '50%' : cssVar.borderRadius,\n                }}\n                onClick={() => setActive(c.color || undefined)}\n              >\n                {isActive && (\n                  <Icon\n                    color={`color-mix(in srgb, ${safeReadableColor(color)} 33%, transparent)`}\n                    icon={CheckIcon}\n                    size={{ size: 14, strokeWidth: 4 }}\n                    style={{\n                      pointerEvents: 'none',\n                    }}\n                  />\n                )}\n              </Center>\n            </Tooltip>\n          );\n        })}\n      {enableColorPicker && (\n        <Tooltip title={texts?.custom || 'Custom'}>\n          <span style={{ display: 'inline-flex' }}>\n            <ColorPicker\n              presets={enableColorSwatches ? undefined : colors.map((c) => c.color)}\n              value={isCustomActive ? active : undefined}\n              onChangeComplete={setActive}\n            >\n              <button\n                aria-label={texts?.custom || 'Custom'}\n                type=\"button\"\n                {...stylex.props(\n                  styles.picker,\n                  enableColorSwatches && styles.conic,\n                  !!isCustomActive && styles.activePicker,\n                )}\n                style={{\n                  background: enableColorSwatches ? undefined : active,\n                  borderRadius: shape === 'circle' ? '50%' : cssVar.borderRadius,\n                }}\n              />\n            </ColorPicker>\n          </span>\n        </Tooltip>\n      )}\n    </Flexbox>\n  );\n};\n\nColorSwatches.displayName = 'ColorSwatches';\n\nexport default ColorSwatches;\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,MAAM,iBAAyC,EAC7C,mBACA,sBAAsB,MACtB,cACA,OACA,OACA,QACA,UACA,OAAO,IACP,QAAQ,UACR,OACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,mBAAmB,cAAc;EAC3D;EACA;EACA;CACF,CAAC;CAGD,MAAM,eAAe,eAAuC,EAC1D,yBAAyB,GAAG,KAAK,IACnC,IAAI,CAAC,IAAI,CAAC;CACV,MAAM,iBAAiB,cAAc,UAAU,WAAW,OAAO,gBAAgB,CAAC,OAAO,MAAK,MAAK,EAAE,UAAU,MAAM,GAAG,CAAC,QAAQ,MAAM,CAAC;CACxI,OAAO,qBAACA,mBAAD;EAAS,YAAA;EAAW,KAAK;EAAQ;EAAK,OAAO;GAClD,GAAG;GACH,UAAU;GACV,GAAG;EACL;EAAG,GAAI;EAJA,UAAA,CAKF,uBAAuB,OAAO,KAAK,GAAG,MAAM;GAC7C,MAAM,QAAQ,EAAE,SAAS,OAAO;GAChC,MAAM,WAAW,CAAC,UAAU,CAAC,EAAE,SAAS,UAAU;GAElD,MAAM,gBAAgB,EAAE,UAAU,iBAAiB,EAAE,SAAS,CAAC,EAAE,MAAM,WAAW,MAAM,YAAY;IAClG,IAAI;KACF,OAAO,OAAO,EAAE,KAAK,CAAC,CAAC,MAAM,MAAM;IACrC,QAAQ;KACN,OAAO;IACT;GACF,EAAA,CAAG;GACH,OAAO,oBAAC,SAAD;IAA2B,OAAO,EAAE;IACnC,UAAA,oBAAC,QAAD;KAAQ,GAAI,OAAO,MAAM,OAAO,WAAW,CAAC,CAAC,iBAAiB,OAAO,aAAa,YAAY,OAAO,eAAe;KAAG,OAAO;MAClI,YAAY,gBAAgB,KAAA,IAAY;MACxC,cAAc,UAAU,WAAW,QAAQ,OAAO;KACpD;KAAG,eAAe,UAAU,EAAE,SAAS,KAAA,CAAS;KACvC,UAAA,YAAY,oBAAC,MAAD;MAAM,OAAO,sBAAsB,kBAAkB,KAAK,EAAE;MAAqB,MAAM;MAAW,MAAM;OACzH,MAAM;OACN,aAAa;MACf;MAAG,OAAO,EACR,eAAe,OACjB;KAAI,CAAA;IACQ,CAAA;GACD,GAZM,GAAG,OAAO,CAYhB;EACjB,CAAC,GACE,qBAAqB,oBAAC,SAAD;GAAS,OAAO,OAAO,UAAU;GACnD,UAAA,oBAAC,QAAD;IAAM,OAAO,EACf,SAAS,cACX;IACM,UAAA,oBAAC,aAAD;KAAa,SAAS,sBAAsB,KAAA,IAAY,OAAO,KAAI,MAAK,EAAE,KAAK;KAAG,OAAO,iBAAiB,SAAS,KAAA;KAAW,kBAAkB;KAC9I,UAAA,oBAAC,UAAD;MAAQ,cAAY,OAAO,UAAU;MAAU,MAAK;MAAS,GAAI,OAAO,MAAM,OAAO,QAAQ,uBAAuB,OAAO,OAAO,CAAC,CAAC,kBAAkB,OAAO,YAAY;MAAG,OAAO;OACrL,YAAY,sBAAsB,KAAA,IAAY;OAC9C,cAAc,UAAU,WAAW,QAAQ,OAAO;MACpD;KAAI,CAAA;IACW,CAAA;GACT,CAAA;EACC,CAAA,CACJ;;AACb;AACA,cAAc,cAAc"}
+{"version":3,"file":"ColorSwatches.mjs","names":["Flexbox"],"sources":["../../src/ColorSwatches/ColorSwatches.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport chroma from 'chroma-js';\nimport { CheckIcon } from 'lucide-react';\nimport { type FC, useMemo } from 'react';\n\nimport { Center, Flexbox } from '@/Flex';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport Tooltip from '@/Tooltip';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport CustomPicker from './CustomPicker';\nimport { styles } from './style';\nimport type { ColorSwatchesPickerRenderProps, ColorSwatchesProps } from './type';\n\nconst ColorSwatches: FC<ColorSwatchesProps> = ({\n  enableColorPicker,\n  enableColorSwatches = true,\n  defaultValue,\n  value,\n  style,\n  colors,\n  onChange,\n  size = 24,\n  shape = 'circle',\n  texts,\n  renderPicker,\n  ref,\n  ...rest\n}) => {\n  const [active, setActive] = useControlledState(defaultValue, {\n    defaultValue,\n    onChange,\n    value,\n  });\n\n  // Convert size prop to CSS variable\n  const cssVariables = useMemo<Record<string, string>>(\n    () => ({\n      '--color-swatches-size': `${size}px`,\n    }),\n    [size],\n  );\n\n  const isCustomActive = useMemo(\n    () => active && active !== cssVar.colorPrimary && !colors.some((c) => c.color === active),\n    [active, colors],\n  );\n\n  const pickerProps: ColorSwatchesPickerRenderProps = {\n    active: !!isCustomActive,\n    onChange: setActive,\n    presets: colors.map((c) => c.color),\n    shape,\n    size,\n    value: isCustomActive ? active : undefined,\n  };\n\n  const defaultPicker = enableColorPicker && (\n    <CustomPicker\n      {...pickerProps}\n      current={active}\n      label={texts?.custom || 'Custom'}\n      standalone={!enableColorSwatches}\n    />\n  );\n\n  return (\n    <Flexbox\n      horizontal\n      gap={6}\n      ref={ref}\n      style={{\n        ...cssVariables,\n        flexWrap: 'wrap',\n        ...style,\n      }}\n      {...rest}\n    >\n      {enableColorSwatches &&\n        colors.map((c, i) => {\n          const color = c.color || cssVar.colorPrimary;\n          const isActive = (!active && !c.color) || color === active;\n          // Check if color is transparent or CSS variable (which chroma can't parse)\n          const isTransparent =\n            c.color === 'transparent' ||\n            (c.color &&\n              !c.color.startsWith('var(') &&\n              (() => {\n                try {\n                  return chroma(c.color).alpha() === 0;\n                } catch {\n                  return false;\n                }\n              })());\n          return (\n            <Tooltip key={c?.key || i} title={c.title}>\n              <Center\n                {...stylex.props(\n                  styles.container,\n                  !!isTransparent && styles.transparent,\n                  isActive && styles.activeContainer,\n                )}\n                style={{\n                  background: isTransparent ? undefined : color,\n                  borderRadius: shape === 'circle' ? '50%' : cssVar.borderRadius,\n                }}\n                onClick={() => setActive(c.color || undefined)}\n              >\n                {isActive && (\n                  <Icon\n                    color={`color-mix(in srgb, ${safeReadableColor(color)} 33%, transparent)`}\n                    icon={CheckIcon}\n                    size={{ size: 14, strokeWidth: 4 }}\n                    style={{\n                      pointerEvents: 'none',\n                    }}\n                  />\n                )}\n              </Center>\n            </Tooltip>\n          );\n        })}\n      {enableColorPicker &&\n        (renderPicker ? renderPicker(pickerProps, defaultPicker) : defaultPicker)}\n    </Flexbox>\n  );\n};\n\nColorSwatches.displayName = 'ColorSwatches';\n\nexport default ColorSwatches;\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,MAAM,iBAAyC,EAC7C,mBACA,sBAAsB,MACtB,cACA,OACA,OACA,QACA,UACA,OAAO,IACP,QAAQ,UACR,OACA,cACA,KACA,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,mBAAmB,cAAc;EAC3D;EACA;EACA;CACF,CAAC;CAGD,MAAM,eAAe,eAAuC,EAC1D,yBAAyB,GAAG,KAAK,IACnC,IAAI,CAAC,IAAI,CAAC;CACV,MAAM,iBAAiB,cAAc,UAAU,WAAW,OAAO,gBAAgB,CAAC,OAAO,MAAK,MAAK,EAAE,UAAU,MAAM,GAAG,CAAC,QAAQ,MAAM,CAAC;CACxI,MAAM,cAA8C;EAClD,QAAQ,CAAC,CAAC;EACV,UAAU;EACV,SAAS,OAAO,KAAI,MAAK,EAAE,KAAK;EAChC;EACA;EACA,OAAO,iBAAiB,SAAS,KAAA;CACnC;CACA,MAAM,gBAAgB,qBAAqB,oBAAC,cAAD;EAAc,GAAI;EAAa,SAAS;EAAQ,OAAO,OAAO,UAAU;EAAU,YAAY,CAAC;CAAsB,CAAA;CAChK,OAAO,qBAACA,mBAAD;EAAS,YAAA;EAAW,KAAK;EAAQ;EAAK,OAAO;GAClD,GAAG;GACH,UAAU;GACV,GAAG;EACL;EAAG,GAAI;EAJA,UAAA,CAKF,uBAAuB,OAAO,KAAK,GAAG,MAAM;GAC7C,MAAM,QAAQ,EAAE,SAAS,OAAO;GAChC,MAAM,WAAW,CAAC,UAAU,CAAC,EAAE,SAAS,UAAU;GAElD,MAAM,gBAAgB,EAAE,UAAU,iBAAiB,EAAE,SAAS,CAAC,EAAE,MAAM,WAAW,MAAM,YAAY;IAClG,IAAI;KACF,OAAO,OAAO,EAAE,KAAK,CAAC,CAAC,MAAM,MAAM;IACrC,QAAQ;KACN,OAAO;IACT;GACF,EAAA,CAAG;GACH,OAAO,oBAAC,SAAD;IAA2B,OAAO,EAAE;IACnC,UAAA,oBAAC,QAAD;KAAQ,GAAI,OAAO,MAAM,OAAO,WAAW,CAAC,CAAC,iBAAiB,OAAO,aAAa,YAAY,OAAO,eAAe;KAAG,OAAO;MAClI,YAAY,gBAAgB,KAAA,IAAY;MACxC,cAAc,UAAU,WAAW,QAAQ,OAAO;KACpD;KAAG,eAAe,UAAU,EAAE,SAAS,KAAA,CAAS;KACvC,UAAA,YAAY,oBAAC,MAAD;MAAM,OAAO,sBAAsB,kBAAkB,KAAK,EAAE;MAAqB,MAAM;MAAW,MAAM;OACzH,MAAM;OACN,aAAa;MACf;MAAG,OAAO,EACR,eAAe,OACjB;KAAI,CAAA;IACQ,CAAA;GACD,GAZM,GAAG,OAAO,CAYhB;EACjB,CAAC,GACE,sBAAsB,eAAe,aAAa,aAAa,aAAa,IAAI,cAC1E;;AACb;AACA,cAAc,cAAc"}

package/es/ColorSwatches/CustomPicker.mjs

@@ -0,0 +1,101 @@
+"use client";
+import { cssVar } from "../styles/stylex/cssVar.stylex.mjs";
+import Icon from "../Icon/Icon.mjs";
+import { Tooltip } from "../Tooltip/Tooltip.mjs";
+import { safeReadableColor } from "../utils/safeReadableColor.mjs";
+import ColorPicker from "../ColorPicker/ColorPicker.mjs";
+import { chipMarker } from "./marker.stylex.mjs";
+import { styles } from "./style.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { CheckIcon, PencilIcon, PlusIcon } from "lucide-react";
+//#region src/ColorSwatches/CustomPicker.tsx
+const CustomPicker = ({ active, current, label, onChange, presets, shape, standalone, value }) => {
+	const borderRadius = shape === "circle" ? "50%" : cssVar.borderRadius;
+	if (standalone) return /* @__PURE__ */ jsx(Tooltip, {
+		title: label,
+		children: /* @__PURE__ */ jsx("span", {
+			style: { display: "inline-flex" },
+			children: /* @__PURE__ */ jsx(ColorPicker, {
+				presets,
+				value,
+				onChangeComplete: onChange,
+				children: /* @__PURE__ */ jsx("button", {
+					"aria-label": label,
+					type: "button",
+					...stylex.props(styles.picker, active && styles.activePicker),
+					style: {
+						background: current,
+						borderRadius
+					}
+				})
+			})
+		})
+	});
+	const iconColor = value ? `color-mix(in srgb, ${safeReadableColor(value)} 33%, transparent)` : void 0;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			...stylex.props(styles.divider)
+		}),
+		active && value && /* @__PURE__ */ jsx(ColorPicker, {
+			value,
+			onChangeComplete: onChange,
+			children: /* @__PURE__ */ jsxs("button", {
+				"aria-label": value,
+				"aria-pressed": "true",
+				type: "button",
+				...stylex.props(styles.picker, styles.chip, styles.activePicker, chipMarker),
+				style: {
+					background: value,
+					borderRadius
+				},
+				children: [/* @__PURE__ */ jsx(Icon, {
+					className: stylex.props(styles.chipIcon, styles.chipCheck).className,
+					color: iconColor,
+					icon: CheckIcon,
+					size: {
+						size: 14,
+						strokeWidth: 4
+					}
+				}), /* @__PURE__ */ jsx(Icon, {
+					className: stylex.props(styles.chipIcon, styles.chipEdit).className,
+					color: iconColor,
+					icon: PencilIcon,
+					size: {
+						size: 12,
+						strokeWidth: 3
+					}
+				})]
+			})
+		}),
+		/* @__PURE__ */ jsx(Tooltip, {
+			title: label,
+			children: /* @__PURE__ */ jsx("span", {
+				style: { display: "inline-flex" },
+				children: /* @__PURE__ */ jsx(ColorPicker, {
+					value,
+					onChangeComplete: onChange,
+					children: /* @__PURE__ */ jsx("button", {
+						"aria-label": label,
+						type: "button",
+						...stylex.props(styles.picker, styles.conic, styles.add),
+						style: { borderRadius },
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: PlusIcon,
+							size: {
+								size: 12,
+								strokeWidth: 3
+							}
+						})
+					})
+				})
+			})
+		})
+	] });
+};
+CustomPicker.displayName = "ColorSwatchesCustomPicker";
+//#endregion
+export { CustomPicker as default };
+
+//# sourceMappingURL=CustomPicker.mjs.map

package/es/ColorSwatches/CustomPicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomPicker.mjs","names":[],"sources":["../../src/ColorSwatches/CustomPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckIcon, PencilIcon, PlusIcon } from 'lucide-react';\nimport { type FC } from 'react';\n\nimport { ColorPicker } from '@/ColorPicker';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport Tooltip from '@/Tooltip';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nimport { chipMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type { ColorSwatchesPickerRenderProps } from './type';\n\ninterface CustomPickerProps extends ColorSwatchesPickerRenderProps {\n  current?: string;\n  label: string;\n  standalone: boolean;\n}\n\nconst CustomPicker: FC<CustomPickerProps> = ({\n  active,\n  current,\n  label,\n  onChange,\n  presets,\n  shape,\n  standalone,\n  value,\n}) => {\n  const borderRadius = shape === 'circle' ? '50%' : cssVar.borderRadius;\n\n  if (standalone)\n    return (\n      <Tooltip title={label}>\n        <span style={{ display: 'inline-flex' }}>\n          <ColorPicker presets={presets} value={value} onChangeComplete={onChange}>\n            <button\n              aria-label={label}\n              type=\"button\"\n              {...stylex.props(styles.picker, active && styles.activePicker)}\n              style={{ background: current, borderRadius }}\n            />\n          </ColorPicker>\n        </span>\n      </Tooltip>\n    );\n\n  const iconColor = value\n    ? `color-mix(in srgb, ${safeReadableColor(value)} 33%, transparent)`\n    : undefined;\n\n  return (\n    <>\n      <span aria-hidden {...stylex.props(styles.divider)} />\n      {active && value && (\n        <ColorPicker value={value} onChangeComplete={onChange}>\n          <button\n            aria-label={value}\n            aria-pressed=\"true\"\n            type=\"button\"\n            {...stylex.props(styles.picker, styles.chip, styles.activePicker, chipMarker)}\n            style={{ background: value, borderRadius }}\n          >\n            <Icon\n              className={stylex.props(styles.chipIcon, styles.chipCheck).className}\n              color={iconColor}\n              icon={CheckIcon}\n              size={{ size: 14, strokeWidth: 4 }}\n            />\n            <Icon\n              className={stylex.props(styles.chipIcon, styles.chipEdit).className}\n              color={iconColor}\n              icon={PencilIcon}\n              size={{ size: 12, strokeWidth: 3 }}\n            />\n          </button>\n        </ColorPicker>\n      )}\n      <Tooltip title={label}>\n        <span style={{ display: 'inline-flex' }}>\n          <ColorPicker value={value} onChangeComplete={onChange}>\n            <button\n              aria-label={label}\n              type=\"button\"\n              {...stylex.props(styles.picker, styles.conic, styles.add)}\n              style={{ borderRadius }}\n            >\n              <Icon icon={PlusIcon} size={{ size: 12, strokeWidth: 3 }} />\n            </button>\n          </ColorPicker>\n        </span>\n      </Tooltip>\n    </>\n  );\n};\n\nCustomPicker.displayName = 'ColorSwatchesCustomPicker';\n\nexport default CustomPicker;\n"],"mappings":";;;;;;;;;;;;AAkBA,MAAM,gBAAuC,EAC3C,QACA,SACA,OACA,UACA,SACA,OACA,YACA,YACI;CACJ,MAAM,eAAe,UAAU,WAAW,QAAQ,OAAO;CACzD,IAAI,YAAY,OAAO,oBAAC,SAAD;EAAS,OAAO;EACjC,UAAA,oBAAC,QAAD;GAAM,OAAO,EACf,SAAS,cACX;GACM,UAAA,oBAAC,aAAD;IAAsB;IAAgB;IAAO,kBAAkB;IAC7D,UAAA,oBAAC,UAAD;KAAQ,cAAY;KAAO,MAAK;KAAS,GAAI,OAAO,MAAM,OAAO,QAAQ,UAAU,OAAO,YAAY;KAAG,OAAO;MAClH,YAAY;MACZ;KACF;IAAI,CAAA;GACW,CAAA;EACT,CAAA;CACC,CAAA;CACb,MAAM,YAAY,QAAQ,sBAAsB,kBAAkB,KAAK,EAAE,sBAAsB,KAAA;CAC/F,OAAO,qBAAA,UAAA,EAAA,UAAA;EACH,oBAAC,QAAD;GAAM,eAAA;GAAY,GAAI,OAAO,MAAM,OAAO,OAAO;EAAI,CAAA;EACpD,UAAU,SAAS,oBAAC,aAAD;GAAoB;GAAO,kBAAkB;GAC7D,UAAA,qBAAC,UAAD;IAAQ,cAAY;IAAO,gBAAa;IAAO,MAAK;IAAS,GAAI,OAAO,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,cAAc,UAAU;IAAG,OAAO;KACrJ,YAAY;KACZ;IACF;IAHI,UAAA,CAIE,oBAAC,MAAD;KAAM,WAAW,OAAO,MAAM,OAAO,UAAU,OAAO,SAAS,CAAC,CAAC;KAAW,OAAO;KAAW,MAAM;KAAW,MAAM;MACvH,MAAM;MACN,aAAa;KACf;IAAI,CAAA,GACA,oBAAC,MAAD;KAAM,WAAW,OAAO,MAAM,OAAO,UAAU,OAAO,QAAQ,CAAC,CAAC;KAAW,OAAO;KAAW,MAAM;KAAY,MAAM;MACvH,MAAM;MACN,aAAa;KACf;IAAI,CAAA,CACM;;EACG,CAAA;EACf,oBAAC,SAAD;GAAS,OAAO;GACd,UAAA,oBAAC,QAAD;IAAM,OAAO,EACb,SAAS,cACX;IACI,UAAA,oBAAC,aAAD;KAAoB;KAAO,kBAAkB;KAC3C,UAAA,oBAAC,UAAD;MAAQ,cAAY;MAAO,MAAK;MAAS,GAAI,OAAO,MAAM,OAAO,QAAQ,OAAO,OAAO,OAAO,GAAG;MAAG,OAAO,EAC3G,aACF;MACI,UAAA,oBAAC,MAAD;OAAM,MAAM;OAAU,MAAM;QAC5B,MAAM;QACN,aAAa;OACf;MAAI,CAAA;KACI,CAAA;IACG,CAAA;GACT,CAAA;EACC,CAAA;CACT,EAAA,CAAA;AACN;AACA,aAAa,cAAc"}

package/es/ColorSwatches/index.d.mts

@@ -1,3 +1,3 @@
-import { ColorSwatchesProps } from "./type.mjs";
+import { ColorSwatchesPickerRenderProps, ColorSwatchesProps } from "./type.mjs";
 import ColorSwatches from "./ColorSwatches.mjs";
-export { ColorSwatchesProps, ColorSwatches as default };
+export { ColorSwatchesPickerRenderProps, ColorSwatchesProps, ColorSwatches as default };

package/es/ColorSwatches/marker.stylex.mjs

@@ -0,0 +1,9 @@
+//#region src/ColorSwatches/marker.stylex.ts
+const chipMarker = {
+	lb1pgf9nm: "lb1pgf9nm",
+	$$css: true
+};
+//#endregion
+export { chipMarker };
+
+//# sourceMappingURL=marker.stylex.mjs.map

package/es/ColorSwatches/marker.stylex.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"marker.stylex.mjs","names":[],"sources":["../../src/ColorSwatches/marker.stylex.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const chipMarker = stylex.defineMarker();\n"],"mappings":";AACA,MAAa,aAAa;CACxB,WAAW;CACX,OAAO;AACT"}

package/es/ColorSwatches/style.mjs

@@ -11,6 +11,33 @@ const styles = {
 		kGVxlE: "lb1tp5pxa lb9jile0",
 		$$css: true
 	},
+	add: {
+		kGNEyG: "lb6s0dn4",
+		kMwMTN: "lbfungia",
+		k1xSpc: "lb3nfvp2",
+		kjj79g: "lbl56j7k",
+		$$css: true
+	},
+	chip: {
+		kgQiWS: "lb1ku5rj1",
+		k1xSpc: "lbrvj5dj",
+		$$css: true
+	},
+	chipCheck: {
+		kSiTet: "lb1hc1fzr lb1fz9fy1 lb1ilng6x",
+		$$css: true
+	},
+	chipEdit: {
+		kSiTet: "lbg01cxk lb1de8irz lbjygscn",
+		$$css: true
+	},
+	chipIcon: {
+		kBCFzs: "lbgkxs2y",
+		kbNqZ1: "lb1ms6mhf",
+		kmkexE: "lb13zw1ji",
+		kfzvcC: "lb47corl",
+		$$css: true
+	},
 	conic: {
 		kWkggS: "lbjbqb8w",
 		kKwaWg: "lb9i5qys",
@@ -27,6 +54,15 @@ const styles = {
 		kzqmXN: "lb4fkmq8",
 		$$css: true
 	},
+	divider: {
+		kUk6DE: "lb1okw0bk",
+		kUOVxO: "lb1dhlr3c",
+		kSGwAc: "lbamitd3",
+		kWkggS: "lbjjy28o",
+		kZKoxP: "lb8akbf1",
+		kzqmXN: "lb1i1rx1s",
+		$$css: true
+	},
 	picker: {
 		kmVPX3: "lb1717udv",
 		kVAM5u: "lb181nr7w",

package/es/ColorSwatches/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/ColorSwatches/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst size = 'var(--color-swatches-size, 24px)';\nconst containerHover = `inset 0 0 0 1px rgb(0 0 0 / 5%), 0 0 0 2px ${cssVar.colorText}`;\nconst pickerHover = `inset 0 0 0 1px ${cssVar.colorFillSecondary}, 0 0 0 2px ${cssVar.colorText}`;\n\nexport const styles = stylex.create({\n  activeContainer: {\n    boxShadow: { 'default': `inset 0 0 0 1px ${cssVar.colorFill}`, ':hover': containerHover },\n  },\n  activePicker: {\n    boxShadow: { 'default': `inset 0 0 0 1px ${cssVar.colorFill}`, ':hover': pickerHover },\n  },\n  conic: {\n    backgroundColor: 'transparent',\n    backgroundImage: `conic-gradient(${cssVar.red}, ${cssVar.volcano}, ${cssVar.orange}, ${cssVar.gold}, ${cssVar.yellow}, ${cssVar.lime}, ${cssVar.green}, ${cssVar.cyan}, ${cssVar.blue}, ${cssVar.geekblue}, ${cssVar.purple}, ${cssVar.magenta}, ${cssVar.red})`,\n  },\n  container: {\n    flex: 'none',\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: {\n      'default': `inset 0 0 0 1px ${cssVar.colorFillSecondary}`,\n      ':hover': containerHover,\n    },\n    cursor: 'pointer',\n    height: size,\n    minHeight: size,\n    minWidth: size,\n    width: size,\n  },\n  picker: {\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    flex: 'none',\n    overflow: 'hidden',\n    boxShadow: { 'default': `inset 0 0 0 1px ${cssVar.colorFillSecondary}`, ':hover': pickerHover },\n    cursor: 'pointer',\n    height: size,\n    minHeight: size,\n    minWidth: size,\n    width: size,\n  },\n  transparent: {\n    backgroundImage: `conic-gradient(${cssVar.colorFillSecondary} 25%, transparent 25% 50%, ${cssVar.colorFillSecondary} 50% 75%, transparent 75% 100%)`,\n    backgroundSize: '50% 50%',\n  },\n});\n"],"mappings":";;AAIuB,GAA8C,OAAO;AACxD,GAAmB,OAAO,qBAAiC,OAAO;AACtF,MAAa,SAAS;CACpB,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/ColorSwatches/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { chipMarker } from './marker.stylex';\n\nconst size = 'var(--color-swatches-size, 24px)';\nconst containerHover = `inset 0 0 0 1px rgb(0 0 0 / 5%), 0 0 0 2px ${cssVar.colorText}`;\nconst pickerHover = `inset 0 0 0 1px ${cssVar.colorFillSecondary}, 0 0 0 2px ${cssVar.colorText}`;\n\nexport const styles = stylex.create({\n  activeContainer: {\n    boxShadow: { 'default': `inset 0 0 0 1px ${cssVar.colorFill}`, ':hover': containerHover },\n  },\n  activePicker: {\n    boxShadow: { 'default': `inset 0 0 0 1px ${cssVar.colorFill}`, ':hover': pickerHover },\n  },\n  add: {\n    alignItems: 'center',\n    color: '#fff',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  chip: {\n    placeItems: 'center',\n    display: 'grid',\n  },\n  chipCheck: {\n    opacity: {\n      default: 1,\n      [stylex.when.ancestor(':focus-visible', chipMarker)]: 0,\n      [stylex.when.ancestor(':hover', chipMarker)]: 0,\n    },\n  },\n  chipEdit: {\n    opacity: {\n      default: 0,\n      [stylex.when.ancestor(':focus-visible', chipMarker)]: 1,\n      [stylex.when.ancestor(':hover', chipMarker)]: 1,\n    },\n  },\n  chipIcon: {\n    gridColumn: 1,\n    gridRow: 1,\n    transition: `opacity 0.15s ${cssVar.motionEaseInOut}`,\n    pointerEvents: 'none',\n  },\n  conic: {\n    backgroundColor: 'transparent',\n    backgroundImage: `conic-gradient(${cssVar.red}, ${cssVar.volcano}, ${cssVar.orange}, ${cssVar.gold}, ${cssVar.yellow}, ${cssVar.lime}, ${cssVar.green}, ${cssVar.cyan}, ${cssVar.blue}, ${cssVar.geekblue}, ${cssVar.purple}, ${cssVar.magenta}, ${cssVar.red})`,\n  },\n  container: {\n    flex: 'none',\n    backgroundColor: cssVar.colorBgContainer,\n    boxShadow: {\n      'default': `inset 0 0 0 1px ${cssVar.colorFillSecondary}`,\n      ':hover': containerHover,\n    },\n    cursor: 'pointer',\n    height: size,\n    minHeight: size,\n    minWidth: size,\n    width: size,\n  },\n  divider: {\n    flex: 'none',\n    marginInline: 2,\n    alignSelf: 'center',\n    backgroundColor: cssVar.colorFillSecondary,\n    height: `calc(${size} * 0.75)`,\n    width: 1,\n  },\n  picker: {\n    padding: 0,\n    borderColor: 'currentcolor',\n    borderStyle: 'none',\n    borderWidth: 'medium',\n    flex: 'none',\n    overflow: 'hidden',\n    boxShadow: { 'default': `inset 0 0 0 1px ${cssVar.colorFillSecondary}`, ':hover': pickerHover },\n    cursor: 'pointer',\n    height: size,\n    minHeight: size,\n    minWidth: size,\n    width: size,\n  },\n  transparent: {\n    backgroundImage: `conic-gradient(${cssVar.colorFillSecondary} 25%, transparent 25% 50%, ${cssVar.colorFillSecondary} 50% 75%, transparent 75% 100%)`,\n    backgroundSize: '50% 50%',\n  },\n});\n"],"mappings":";;AAMuB,GAA8C,OAAO;AACxD,GAAmB,OAAO,qBAAiC,OAAO;AACtF,MAAa,SAAS;CACpB,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,OAAO;CACT;CACA,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}

package/es/ColorSwatches/type.d.mts

@@ -7,6 +7,14 @@ interface ColorSwatchesItemType {
   key?: Key;
   title?: ReactNode;
 }
+export interface ColorSwatchesPickerRenderProps {
+  active: boolean;
+  onChange: (color?: string) => void;
+  presets: string[];
+  shape: 'circle' | 'square';
+  size: number;
+  value?: string;
+}
 export interface ColorSwatchesProps extends Omit<FlexboxProps, 'onChange'> {
   colors: ColorSwatchesItemType[];
   defaultValue?: string;
@@ -14,11 +22,12 @@ export interface ColorSwatchesProps extends Omit<FlexboxProps, 'onChange'> {
   enableColorSwatches?: boolean;
   onChange?: (color?: string) => void;
   ref?: Ref<HTMLDivElement>;
+  renderPicker?: (props: ColorSwatchesPickerRenderProps, defaultPicker: ReactNode) => ReactNode;
   shape?: 'circle' | 'square';
   size?: number;
   texts?: {
-    custom: string;
-    presets: string;
+    custom?: string;
+    presets?: string;
   };
   value?: string;
 }

package/es/EditableText/EditableText.mjs

@@ -1,8 +1,8 @@
 "use client";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
+import { cx } from "../styles/css.mjs";
 import ActionIcon from "../ActionIcon/ActionIcon.mjs";
 import { useControlledState } from "../hooks/useControlledState.mjs";
-import { cx } from "../styles/css.mjs";
 import ControlInput from "./ControlInput.mjs";
 import { memo, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/es/Grid/style.mjs

@@ -4,7 +4,7 @@ const styles = { root: {
 	"--max-item-width": "lb18upadf",
 	"--rows": "lbb27uya",
 	k1xSpc: "lbrvj5dj",
-	kumcoG: "lb1h17qkj",
+	kumcoG: "lbrwvf1q",
 	$$css: true
 } };
 //#endregion

package/es/Grid/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Grid/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const styles = stylex.create({\n  root: {\n    '--gap': 'var(--grid-gap, 1em)',\n    '--max-item-width': 'var(--grid-max-item-width, 240px)',\n    '--rows': 'var(--grid-rows, 3)',\n    'display': 'grid',\n    'gridTemplateColumns':\n      'repeat(auto-fill, minmax(max(var(--max-item-width), calc((100% - var(--gap) * (var(--rows) - 1)) / var(--rows))), 1fr))',\n  },\n});\n"],"mappings":";AACA,MAAa,SAAS,EACpB,MAAM;CACJ,SAAS;CACT,oBAAoB;CACpB,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Grid/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nexport const gridTemplateColumns =\n  'repeat(auto-fill, minmax(max(min(var(--max-item-width), 100%), calc((100% - var(--gap) * (var(--rows) - 1)) / var(--rows))), 1fr))';\n\nexport const styles = stylex.create({\n  root: {\n    '--gap': 'var(--grid-gap, 1em)',\n    '--max-item-width': 'var(--grid-max-item-width, 240px)',\n    '--rows': 'var(--grid-rows, 3)',\n    'display': 'grid',\n    // eslint-disable-next-line @stylexjs/valid-styles -- the rule cannot resolve a module constant; the compiler inlines it\n    'gridTemplateColumns': gridTemplateColumns,\n  },\n});\n"],"mappings":";AAEA,MAAa,SAAS,EACpB,MAAM;CACJ,SAAS;CACT,oBAAoB;CACpB,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,OAAO;AACT,EACF"}

package/es/Image/type.d.mts

@@ -4,6 +4,7 @@ import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
 export interface ImagePreviewOptions {
   autoZoomThreshold?: number;
   defaultZoom?: ZoomPolicy;
+  fetchImage?: (source: string) => Promise<Blob>;
   maxScale?: number;
   onDownload?: (source: string) => void | Promise<void>;
   onOpenChange?: (open: boolean) => void;

package/es/Image/viewer/ImageViewer.mjs

@@ -250,6 +250,7 @@ const ImageViewer = memo(({ entries, index, openerFocusElement, token }) => {
 						canZoomOut,
 						chromeRef,
 						current: currentIndex,
+						fetchImage: currentEntry.options.fetchImage,
 						fitRect,
 						flipHorizontal,
 						flipVertical,

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

@@ -1 +1 @@
-{"version":3,"file":"ImageViewer.mjs","names":[],"sources":["../../../src/Image/viewer/ImageViewer.tsx"],"sourcesContent":["'use client';\n\nimport '../style.css';\n\nimport { Dialog, type DialogRootProps } from '@base-ui/react/dialog';\nimport {\n  memo,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useLayerZIndex } from '@/internal/zIndex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { ToastHost } from '@/Toast';\nimport { useMergeRefs } from '@/utils/mergeRefs';\n\nimport { styles } from '../style';\nimport { computeFit, type Size, unrotatedRect } from './geometry';\nimport { beginClosePreview, endClosePreview, type PreviewEntry } from './registry';\nimport { useFinalFocus } from './useFinalFocus';\nimport { useFlipTransition } from './useFlipTransition';\nimport { readNatural, useGalleryNav } from './useGalleryNav';\nimport { useRefitTransition } from './useRefitTransition';\nimport { useViewerGestures } from './useViewerGestures';\nimport { useZoomPan } from './useZoomPan';\nimport ViewerChrome from './ViewerChrome';\n\nexport interface ImageViewerProps {\n  entries: PreviewEntry[];\n  index: number;\n  openerFocusElement: HTMLElement | null;\n  token: number;\n}\n\nconst readViewport = (): Size => ({ height: window.innerHeight, width: window.innerWidth });\n\nconst prefersReducedMotion = () =>\n  window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n\nconst ImageViewer = memo<ImageViewerProps>(({ entries, index, openerFocusElement, token }) => {\n  const openerEntry = entries[index];\n  const appElement = useAppElement();\n  const [animated] = useState(() => !prefersReducedMotion());\n\n  const { ref: layerRef, zIndex } = useLayerZIndex<HTMLDivElement>('modal');\n\n  const [currentIndex, setCurrentIndex] = useState(index);\n  const currentEntry = entries[currentIndex];\n  const currentEntryRef = useRef(currentEntry);\n  currentEntryRef.current = currentEntry;\n\n  const [source, setSource] = useState(openerEntry.src);\n  const [natural, setNatural] = useState<Size>(() => readNatural(openerEntry.element));\n  const [viewport, setViewport] = useState<Size>(readViewport);\n\n  const closeRef = useRef<(() => void) | null>(null);\n  const requestClose = useCallback(() => closeRef.current?.(), []);\n\n  // useZoomPan needs to gate its wheel/toolbar entry points on close-in-flight,\n  // but that state only exists once useFlipTransition (below) has run — and it\n  // needs useZoomPan's own transform values first. Break the cycle with a\n  // stable indirection: the ref is repointed at the real isClosing once it's\n  // available, written directly during render like the other *Ref fields here.\n  const isClosingIndirectRef = useRef<() => boolean>(() => false);\n  const isClosingIndirect = useCallback(() => isClosingIndirectRef.current(), []);\n\n  const isTransitioningIndirectRef = useRef<() => boolean>(() => true);\n  const isTransitioningIndirect = useCallback(() => isTransitioningIndirectRef.current(), []);\n\n  const fillViewport = Boolean(\n    currentEntry.previewSrc && currentEntry.previewSrc !== currentEntry.src,\n  );\n\n  const {\n    canZoomIn,\n    canZoomOut,\n    dragBy,\n    dragEnd,\n    escIntent,\n    flipHorizontal,\n    flipVertical,\n    flipX,\n    flipY,\n    getInitialScale,\n    handleDoubleClick,\n    handleWheel,\n    isClean,\n    isZoomed,\n    reset,\n    resetCloseTracking,\n    rotate,\n    rotateLeft,\n    rotateRight,\n    rotation,\n    scale,\n    setNatural: syncZoomNatural,\n    setViewport: syncZoomViewport,\n    toggleActualSize,\n    x,\n    y,\n    zoomIn,\n    zoomOut,\n  } = useZoomPan({\n    autoZoomThreshold: currentEntry.options.autoZoomThreshold,\n    defaultZoom: currentEntry.options.defaultZoom,\n    fillViewport,\n    isClosing: isClosingIndirect,\n    isTransitioning: isTransitioningIndirect,\n    maxScale: currentEntry.options.maxScale,\n    natural,\n    onCloseRequest: requestClose,\n    viewport,\n  });\n\n  const fitRect = useMemo(\n    () => computeFit(natural, viewport, rotation, fillViewport),\n    [natural, viewport, rotation, fillViewport],\n  );\n  const fitRectRef = useRef(fitRect);\n  fitRectRef.current = fitRect;\n  const getFitRect = useCallback(() => fitRectRef.current, []);\n\n  const imageRect = useMemo(() => unrotatedRect(fitRect, rotation), [fitRect, rotation]);\n\n  const viewportRef = useRef(viewport);\n  viewportRef.current = viewport;\n  const getViewportWidth = useCallback(() => viewportRef.current.width, []);\n\n  const getCloseSource = useCallback(() => currentEntryRef.current.element, []);\n\n  const transform = useMemo(\n    () => ({ flipX, flipY, rotate, scale, x, y }),\n    [flipX, flipY, rotate, scale, x, y],\n  );\n  const handleClosed = useCallback(() => endClosePreview(token), [token]);\n\n  const {\n    backdropRef,\n    chromeRef,\n    close,\n    imageRef: flipImageRef,\n    isClosing,\n    isTransitioning,\n    switchTo,\n  } = useFlipTransition({\n    animated,\n    getCloseSource,\n    getFitRect,\n    getInitialScale,\n    getViewportWidth,\n    onClosed: handleClosed,\n    source: openerEntry.element,\n    transform,\n  });\n  isClosingIndirectRef.current = isClosing;\n  isTransitioningIndirectRef.current = isTransitioning;\n\n  useRefitTransition({\n    animated,\n    fillViewport,\n    isTransitioning,\n    natural,\n    rotation,\n    scale,\n    viewport,\n    x,\n    y,\n  });\n  const finalFocus = useFinalFocus(openerFocusElement);\n\n  const isCleanRef = useRef(isClean);\n  isCleanRef.current = isClean;\n\n  const handleClose = useCallback(() => {\n    beginClosePreview(token);\n    close({ fade: !isCleanRef.current });\n  }, [close, token]);\n  closeRef.current = handleClose;\n\n  const handleDialogOpenChange = useCallback<NonNullable<DialogRootProps['onOpenChange']>>(\n    (open, eventDetails) => {\n      if (open) return;\n      // Base UI fires this on every Esc regardless of whether we're already\n      // mid-close (our Dialog.Root's open prop never actually flips to\n      // false), so without this guard a second Esc during the close window\n      // reads escIntent() off the close spring's mid-flight scale, decides\n      // 'reset', and cancels the close animation out from under itself.\n      if (isClosing()) return;\n      if (eventDetails.reason === 'escape-key' && escIntent() === 'reset') {\n        eventDetails.cancel();\n        reset();\n        return;\n      }\n      handleClose();\n    },\n    [escIntent, handleClose, isClosing, reset],\n  );\n\n  const gestures = useViewerGestures({\n    dragBy,\n    dragEnd,\n    handleDoubleClick,\n    handleWheel,\n    isClean,\n    isZoomed,\n    onClose: handleClose,\n    reset,\n    zoomIn,\n    zoomOut,\n  });\n\n  const { hasNext, hasPrev, next, prev } = useGalleryNav({\n    cancelPendingClose: gestures.cancelPendingClose,\n    currentIndex,\n    entries,\n    flipX,\n    flipY,\n    getInitialScale,\n    resetCloseTracking,\n    rotate,\n    scale,\n    setCurrentIndex,\n    setNatural,\n    setSource,\n    switchTo,\n    syncZoomNatural,\n    x,\n    y,\n  });\n\n  const popupNodeRef = useRef<HTMLDivElement | null>(null);\n  const popupRef = useMergeRefs<HTMLDivElement>([layerRef, gestures.popupRef, popupNodeRef]);\n  const imageRef = useMergeRefs<HTMLImageElement>([flipImageRef, gestures.imageRef]);\n\n  const handleLoad = useCallback(\n    (event: SyntheticEvent<HTMLImageElement>) => {\n      const loaded = event.currentTarget;\n      if (!loaded.naturalWidth || !loaded.naturalHeight) return;\n      const next = { height: loaded.naturalHeight, width: loaded.naturalWidth };\n      setNatural((prev) =>\n        prev.width === next.width && prev.height === next.height ? prev : next,\n      );\n      syncZoomNatural(next);\n    },\n    [syncZoomNatural],\n  );\n\n  useEffect(() => {\n    const handleResize = () => {\n      const next = readViewport();\n      setViewport(next);\n      syncZoomViewport(next);\n    };\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [syncZoomViewport]);\n\n  useEffect(() => {\n    const { previewSrc, src } = currentEntry;\n    if (!previewSrc || previewSrc === src) return;\n    let cancelled = false;\n    const loader = new window.Image();\n    const handleLoaded = () => {\n      if (!cancelled) setSource(previewSrc);\n    };\n    loader.addEventListener('load', handleLoaded);\n    loader.src = previewSrc;\n    return () => {\n      cancelled = true;\n      loader.removeEventListener('load', handleLoaded);\n    };\n  }, [currentEntry]);\n\n  useEffect(\n    () => () => {\n      const thumbnailWasRemoved = !openerEntry.element.isConnected;\n      if (thumbnailWasRemoved) endClosePreview(token);\n    },\n    [openerEntry, token],\n  );\n\n  return (\n    <Dialog.Root modal open onOpenChange={handleDialogOpenChange}>\n      <Dialog.Portal container={appElement ?? undefined}>\n        {/* Base UI drops a nested dialog's backdrop so overlays don't stack. The viewer is\n            not an overlay on the surface it opened from — it replaces the screen — so it\n            keeps its own scrim, or a viewer opened from a maskless drawer would show the\n            page straight through the letterbox around the image. */}\n        <Dialog.Backdrop\n          forceRender\n          {...styleProps(styles.viewerBackdrop, 'lobe-image-viewer-backdrop')}\n          ref={backdropRef}\n          style={zIndex === undefined ? undefined : { zIndex }}\n          onClick={gestures.onSurfaceClick}\n        />\n        <Dialog.Popup\n          aria-label={currentEntry.element.alt || undefined}\n          {...styleProps(styles.viewerPopup, 'lobe-image-viewer-popup')}\n          finalFocus={finalFocus}\n          // Focus the popup itself instead of Base UI's default (the first\n          // tabbable — the close button): a focus-visible close button pins\n          // the idle auto-hide open forever and pops its tooltip on open.\n          initialFocus={popupNodeRef}\n          ref={popupRef}\n          style={zIndex === undefined ? undefined : { zIndex: zIndex + 1 }}\n          tabIndex={-1}\n          onClick={gestures.onSurfaceClick}\n          onPointerCancel={gestures.onPointerFinish}\n          onPointerDown={gestures.onPointerDown}\n          onPointerMove={gestures.onPointerMove}\n          onPointerUp={gestures.onPointerFinish}\n        >\n          <img\n            alt={currentEntry.element.alt}\n            {...styleProps(styles.viewerImage, 'lobe-image-viewer-image')}\n            ref={imageRef}\n            src={source}\n            style={{\n              cursor: gestures.cursor,\n              height: imageRect.height,\n              left: imageRect.x,\n              top: imageRect.y,\n              width: imageRect.width,\n            }}\n            onClick={gestures.onImageClick}\n            onDoubleClick={gestures.onImageDoubleClick}\n            onLoad={handleLoad}\n          />\n          <ViewerChrome\n            canZoomIn={canZoomIn}\n            canZoomOut={canZoomOut}\n            chromeRef={chromeRef}\n            current={currentIndex}\n            fitRect={fitRect}\n            flipHorizontal={flipHorizontal}\n            flipVertical={flipVertical}\n            hasNext={hasNext}\n            hasPrev={hasPrev}\n            natural={natural}\n            next={next}\n            prev={prev}\n            rotateLeft={rotateLeft}\n            rotateRight={rotateRight}\n            rotation={rotation}\n            scale={scale}\n            source={source}\n            toggleActualSize={toggleActualSize}\n            toolbarAddon={currentEntry.options.toolbarAddon}\n            total={entries.length}\n            zoomIn={zoomIn}\n            zoomOut={zoomOut}\n            onClose={handleClose}\n            onDownload={currentEntry.options.onDownload}\n          />\n        </Dialog.Popup>\n        <ToastHost root={appElement ?? undefined} />\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n});\n\nImageViewer.displayName = 'ImageViewer';\n\nexport default ImageViewer;\n"],"mappings":"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"}
+{"version":3,"file":"ImageViewer.mjs","names":[],"sources":["../../../src/Image/viewer/ImageViewer.tsx"],"sourcesContent":["'use client';\n\nimport '../style.css';\n\nimport { Dialog, type DialogRootProps } from '@base-ui/react/dialog';\nimport {\n  memo,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useLayerZIndex } from '@/internal/zIndex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { ToastHost } from '@/Toast';\nimport { useMergeRefs } from '@/utils/mergeRefs';\n\nimport { styles } from '../style';\nimport { computeFit, type Size, unrotatedRect } from './geometry';\nimport { beginClosePreview, endClosePreview, type PreviewEntry } from './registry';\nimport { useFinalFocus } from './useFinalFocus';\nimport { useFlipTransition } from './useFlipTransition';\nimport { readNatural, useGalleryNav } from './useGalleryNav';\nimport { useRefitTransition } from './useRefitTransition';\nimport { useViewerGestures } from './useViewerGestures';\nimport { useZoomPan } from './useZoomPan';\nimport ViewerChrome from './ViewerChrome';\n\nexport interface ImageViewerProps {\n  entries: PreviewEntry[];\n  index: number;\n  openerFocusElement: HTMLElement | null;\n  token: number;\n}\n\nconst readViewport = (): Size => ({ height: window.innerHeight, width: window.innerWidth });\n\nconst prefersReducedMotion = () =>\n  window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n\nconst ImageViewer = memo<ImageViewerProps>(({ entries, index, openerFocusElement, token }) => {\n  const openerEntry = entries[index];\n  const appElement = useAppElement();\n  const [animated] = useState(() => !prefersReducedMotion());\n\n  const { ref: layerRef, zIndex } = useLayerZIndex<HTMLDivElement>('modal');\n\n  const [currentIndex, setCurrentIndex] = useState(index);\n  const currentEntry = entries[currentIndex];\n  const currentEntryRef = useRef(currentEntry);\n  currentEntryRef.current = currentEntry;\n\n  const [source, setSource] = useState(openerEntry.src);\n  const [natural, setNatural] = useState<Size>(() => readNatural(openerEntry.element));\n  const [viewport, setViewport] = useState<Size>(readViewport);\n\n  const closeRef = useRef<(() => void) | null>(null);\n  const requestClose = useCallback(() => closeRef.current?.(), []);\n\n  // useZoomPan needs to gate its wheel/toolbar entry points on close-in-flight,\n  // but that state only exists once useFlipTransition (below) has run — and it\n  // needs useZoomPan's own transform values first. Break the cycle with a\n  // stable indirection: the ref is repointed at the real isClosing once it's\n  // available, written directly during render like the other *Ref fields here.\n  const isClosingIndirectRef = useRef<() => boolean>(() => false);\n  const isClosingIndirect = useCallback(() => isClosingIndirectRef.current(), []);\n\n  const isTransitioningIndirectRef = useRef<() => boolean>(() => true);\n  const isTransitioningIndirect = useCallback(() => isTransitioningIndirectRef.current(), []);\n\n  const fillViewport = Boolean(\n    currentEntry.previewSrc && currentEntry.previewSrc !== currentEntry.src,\n  );\n\n  const {\n    canZoomIn,\n    canZoomOut,\n    dragBy,\n    dragEnd,\n    escIntent,\n    flipHorizontal,\n    flipVertical,\n    flipX,\n    flipY,\n    getInitialScale,\n    handleDoubleClick,\n    handleWheel,\n    isClean,\n    isZoomed,\n    reset,\n    resetCloseTracking,\n    rotate,\n    rotateLeft,\n    rotateRight,\n    rotation,\n    scale,\n    setNatural: syncZoomNatural,\n    setViewport: syncZoomViewport,\n    toggleActualSize,\n    x,\n    y,\n    zoomIn,\n    zoomOut,\n  } = useZoomPan({\n    autoZoomThreshold: currentEntry.options.autoZoomThreshold,\n    defaultZoom: currentEntry.options.defaultZoom,\n    fillViewport,\n    isClosing: isClosingIndirect,\n    isTransitioning: isTransitioningIndirect,\n    maxScale: currentEntry.options.maxScale,\n    natural,\n    onCloseRequest: requestClose,\n    viewport,\n  });\n\n  const fitRect = useMemo(\n    () => computeFit(natural, viewport, rotation, fillViewport),\n    [natural, viewport, rotation, fillViewport],\n  );\n  const fitRectRef = useRef(fitRect);\n  fitRectRef.current = fitRect;\n  const getFitRect = useCallback(() => fitRectRef.current, []);\n\n  const imageRect = useMemo(() => unrotatedRect(fitRect, rotation), [fitRect, rotation]);\n\n  const viewportRef = useRef(viewport);\n  viewportRef.current = viewport;\n  const getViewportWidth = useCallback(() => viewportRef.current.width, []);\n\n  const getCloseSource = useCallback(() => currentEntryRef.current.element, []);\n\n  const transform = useMemo(\n    () => ({ flipX, flipY, rotate, scale, x, y }),\n    [flipX, flipY, rotate, scale, x, y],\n  );\n  const handleClosed = useCallback(() => endClosePreview(token), [token]);\n\n  const {\n    backdropRef,\n    chromeRef,\n    close,\n    imageRef: flipImageRef,\n    isClosing,\n    isTransitioning,\n    switchTo,\n  } = useFlipTransition({\n    animated,\n    getCloseSource,\n    getFitRect,\n    getInitialScale,\n    getViewportWidth,\n    onClosed: handleClosed,\n    source: openerEntry.element,\n    transform,\n  });\n  isClosingIndirectRef.current = isClosing;\n  isTransitioningIndirectRef.current = isTransitioning;\n\n  useRefitTransition({\n    animated,\n    fillViewport,\n    isTransitioning,\n    natural,\n    rotation,\n    scale,\n    viewport,\n    x,\n    y,\n  });\n  const finalFocus = useFinalFocus(openerFocusElement);\n\n  const isCleanRef = useRef(isClean);\n  isCleanRef.current = isClean;\n\n  const handleClose = useCallback(() => {\n    beginClosePreview(token);\n    close({ fade: !isCleanRef.current });\n  }, [close, token]);\n  closeRef.current = handleClose;\n\n  const handleDialogOpenChange = useCallback<NonNullable<DialogRootProps['onOpenChange']>>(\n    (open, eventDetails) => {\n      if (open) return;\n      // Base UI fires this on every Esc regardless of whether we're already\n      // mid-close (our Dialog.Root's open prop never actually flips to\n      // false), so without this guard a second Esc during the close window\n      // reads escIntent() off the close spring's mid-flight scale, decides\n      // 'reset', and cancels the close animation out from under itself.\n      if (isClosing()) return;\n      if (eventDetails.reason === 'escape-key' && escIntent() === 'reset') {\n        eventDetails.cancel();\n        reset();\n        return;\n      }\n      handleClose();\n    },\n    [escIntent, handleClose, isClosing, reset],\n  );\n\n  const gestures = useViewerGestures({\n    dragBy,\n    dragEnd,\n    handleDoubleClick,\n    handleWheel,\n    isClean,\n    isZoomed,\n    onClose: handleClose,\n    reset,\n    zoomIn,\n    zoomOut,\n  });\n\n  const { hasNext, hasPrev, next, prev } = useGalleryNav({\n    cancelPendingClose: gestures.cancelPendingClose,\n    currentIndex,\n    entries,\n    flipX,\n    flipY,\n    getInitialScale,\n    resetCloseTracking,\n    rotate,\n    scale,\n    setCurrentIndex,\n    setNatural,\n    setSource,\n    switchTo,\n    syncZoomNatural,\n    x,\n    y,\n  });\n\n  const popupNodeRef = useRef<HTMLDivElement | null>(null);\n  const popupRef = useMergeRefs<HTMLDivElement>([layerRef, gestures.popupRef, popupNodeRef]);\n  const imageRef = useMergeRefs<HTMLImageElement>([flipImageRef, gestures.imageRef]);\n\n  const handleLoad = useCallback(\n    (event: SyntheticEvent<HTMLImageElement>) => {\n      const loaded = event.currentTarget;\n      if (!loaded.naturalWidth || !loaded.naturalHeight) return;\n      const next = { height: loaded.naturalHeight, width: loaded.naturalWidth };\n      setNatural((prev) =>\n        prev.width === next.width && prev.height === next.height ? prev : next,\n      );\n      syncZoomNatural(next);\n    },\n    [syncZoomNatural],\n  );\n\n  useEffect(() => {\n    const handleResize = () => {\n      const next = readViewport();\n      setViewport(next);\n      syncZoomViewport(next);\n    };\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [syncZoomViewport]);\n\n  useEffect(() => {\n    const { previewSrc, src } = currentEntry;\n    if (!previewSrc || previewSrc === src) return;\n    let cancelled = false;\n    const loader = new window.Image();\n    const handleLoaded = () => {\n      if (!cancelled) setSource(previewSrc);\n    };\n    loader.addEventListener('load', handleLoaded);\n    loader.src = previewSrc;\n    return () => {\n      cancelled = true;\n      loader.removeEventListener('load', handleLoaded);\n    };\n  }, [currentEntry]);\n\n  useEffect(\n    () => () => {\n      const thumbnailWasRemoved = !openerEntry.element.isConnected;\n      if (thumbnailWasRemoved) endClosePreview(token);\n    },\n    [openerEntry, token],\n  );\n\n  return (\n    <Dialog.Root modal open onOpenChange={handleDialogOpenChange}>\n      <Dialog.Portal container={appElement ?? undefined}>\n        {/* Base UI drops a nested dialog's backdrop so overlays don't stack. The viewer is\n            not an overlay on the surface it opened from — it replaces the screen — so it\n            keeps its own scrim, or a viewer opened from a maskless drawer would show the\n            page straight through the letterbox around the image. */}\n        <Dialog.Backdrop\n          forceRender\n          {...styleProps(styles.viewerBackdrop, 'lobe-image-viewer-backdrop')}\n          ref={backdropRef}\n          style={zIndex === undefined ? undefined : { zIndex }}\n          onClick={gestures.onSurfaceClick}\n        />\n        <Dialog.Popup\n          aria-label={currentEntry.element.alt || undefined}\n          {...styleProps(styles.viewerPopup, 'lobe-image-viewer-popup')}\n          finalFocus={finalFocus}\n          // Focus the popup itself instead of Base UI's default (the first\n          // tabbable — the close button): a focus-visible close button pins\n          // the idle auto-hide open forever and pops its tooltip on open.\n          initialFocus={popupNodeRef}\n          ref={popupRef}\n          style={zIndex === undefined ? undefined : { zIndex: zIndex + 1 }}\n          tabIndex={-1}\n          onClick={gestures.onSurfaceClick}\n          onPointerCancel={gestures.onPointerFinish}\n          onPointerDown={gestures.onPointerDown}\n          onPointerMove={gestures.onPointerMove}\n          onPointerUp={gestures.onPointerFinish}\n        >\n          <img\n            alt={currentEntry.element.alt}\n            {...styleProps(styles.viewerImage, 'lobe-image-viewer-image')}\n            ref={imageRef}\n            src={source}\n            style={{\n              cursor: gestures.cursor,\n              height: imageRect.height,\n              left: imageRect.x,\n              top: imageRect.y,\n              width: imageRect.width,\n            }}\n            onClick={gestures.onImageClick}\n            onDoubleClick={gestures.onImageDoubleClick}\n            onLoad={handleLoad}\n          />\n          <ViewerChrome\n            canZoomIn={canZoomIn}\n            canZoomOut={canZoomOut}\n            chromeRef={chromeRef}\n            current={currentIndex}\n            fetchImage={currentEntry.options.fetchImage}\n            fitRect={fitRect}\n            flipHorizontal={flipHorizontal}\n            flipVertical={flipVertical}\n            hasNext={hasNext}\n            hasPrev={hasPrev}\n            natural={natural}\n            next={next}\n            prev={prev}\n            rotateLeft={rotateLeft}\n            rotateRight={rotateRight}\n            rotation={rotation}\n            scale={scale}\n            source={source}\n            toggleActualSize={toggleActualSize}\n            toolbarAddon={currentEntry.options.toolbarAddon}\n            total={entries.length}\n            zoomIn={zoomIn}\n            zoomOut={zoomOut}\n            onClose={handleClose}\n            onDownload={currentEntry.options.onDownload}\n          />\n        </Dialog.Popup>\n        <ToastHost root={appElement ?? undefined} />\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n});\n\nImageViewer.displayName = 'ImageViewer';\n\nexport default ImageViewer;\n"],"mappings":"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"}

package/es/Image/viewer/Toolbar.mjs

@@ -42,7 +42,10 @@ const usePercentage = (scale, matchScale) => {
 	const getSnapshot = useCallback(() => Math.round(scale.get() / matchScale * 100), [matchScale, scale]);
 	return useSyncExternalStore(subscribe, getSnapshot);
 };
-const Toolbar = memo(({ canZoomIn, canZoomOut, fitRect, flipHorizontal, flipVertical, natural, onDownload, onMoreOpenChange, rotateLeft, rotateRight, rotation, scale, source, toggleActualSize, toolbarAddon, zoomIn, zoomOut }) => {
+const defaultFetchImage = async (src) => {
+	return (await fetch(src, { mode: "cors" })).blob();
+};
+const Toolbar = memo(({ canZoomIn, canZoomOut, fetchImage, fitRect, flipHorizontal, flipVertical, natural, onDownload, onMoreOpenChange, rotateLeft, rotateRight, rotation, scale, source, toggleActualSize, toolbarAddon, zoomIn, zoomOut }) => {
 	const { t } = useTranslation(image_default);
 	const [containerEl, setContainerEl] = useState(null);
 	const [copyLoading, setCopyLoading] = useState(false);
@@ -51,9 +54,10 @@ const Toolbar = memo(({ canZoomIn, canZoomOut, fitRect, flipHorizontal, flipVert
 	const percentage = usePercentage(scale, matchScale);
 	const canToggleActualSize = Math.abs(matchScale - 1) > .01;
 	const showFitAffordance = canToggleActualSize && percentage === 100;
+	const loadImage = fetchImage ?? defaultFetchImage;
 	const defaultDownload = useCallback(async (src) => {
 		try {
-			const blob = await (await fetch(src, { mode: "cors" })).blob();
+			const blob = await loadImage(src);
 			const blobUrl = URL.createObjectURL(blob);
 			let fileName = getFileNameFromUrl(src);
 			const ext = getExtensionFromMimeType(blob.type);
@@ -62,10 +66,15 @@ const Toolbar = memo(({ canZoomIn, canZoomOut, fitRect, flipHorizontal, flipVert
 			await downloadBlob(blobUrl, fileName);
 			URL.revokeObjectURL(blobUrl);
 			toast.success(t("image.downloadSuccess"));
-		} catch {
+		} catch (error) {
+			if (fetchImage) throw error;
 			window.open(src, "_blank", "noopener,noreferrer");
 		}
-	}, [t]);
+	}, [
+		fetchImage,
+		loadImage,
+		t
+	]);
 	const handleDownload = useCallback(async () => {
 		setDownloadLoading(true);
 		try {
@@ -84,7 +93,7 @@ const Toolbar = memo(({ canZoomIn, canZoomOut, fitRect, flipHorizontal, flipVert
 	const handleCopy = useCallback(async () => {
 		setCopyLoading(true);
 		try {
-			const blob = await (await fetch(source, { mode: "cors" })).blob();
+			const blob = await loadImage(source);
 			const clipboardBlob = await getClipboardBlob(blob);
 			await navigator.clipboard.write([new ClipboardItem(clipboardBlob)]);
 			toast.success(t("image.copySuccess"));
@@ -93,7 +102,11 @@ const Toolbar = memo(({ canZoomIn, canZoomOut, fitRect, flipHorizontal, flipVert
 		} finally {
 			setCopyLoading(false);
 		}
-	}, [source, t]);
+	}, [
+		loadImage,
+		source,
+		t
+	]);
 	const moreItems = useMemo(() => [
 		{
 			icon: FlipHorizontal,

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.mjs","names":["imageMessages","Flexbox","ActionIcon"],"sources":["../../../src/Image/viewer/Toolbar.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport {\n  Copy,\n  Download,\n  Ellipsis,\n  FlipHorizontal,\n  FlipVertical,\n  RotateCcw,\n  RotateCw,\n  ZoomIn,\n  ZoomOut,\n} from 'lucide-react';\nimport type { MotionValue } from 'motion/react';\nimport { memo, type ReactNode, useCallback, useMemo, useState, useSyncExternalStore } from 'react';\n\nimport { ActionIconImpl as ActionIcon } from '@/ActionIcon/ActionIcon';\nimport DropdownMenu, { type DropdownItem } from '@/DropdownMenu';\nimport { Center, Flexbox } from '@/Flex';\nimport imageMessages from '@/i18n/resources/en/image';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { styleProps } from '@/styles/stylex/props';\nimport { toast } from '@/Toast';\nimport { TooltipGroup } from '@/Tooltip';\nimport { getClipboardBlob } from '@/utils/blobToPng';\nimport { downloadBlob } from '@/utils/downloadBlob';\n\nimport { actualSizeMarker } from '../marker.stylex';\nimport { styles } from '../style';\nimport ActualSizeIcon from './ActualSizeIcon';\nimport { naturalScale, type Rect, type Rotation, type Size } from './geometry';\n\nconst getFileNameFromUrl = (url: string): string => {\n  try {\n    const pathname = new URL(url).pathname;\n    const match = pathname.match(/\\/([^/]+)$/);\n    return match ? decodeURIComponent(match[1]) : 'image';\n  } catch {\n    return 'image';\n  }\n};\n\nconst getExtensionFromMimeType = (mimeType: string): string => {\n  const map: Record<string, string> = {\n    'image/svg+xml': 'svg',\n    'image/png': 'png',\n    'image/jpeg': 'jpg',\n    'image/jpg': 'jpg',\n    'image/webp': 'webp',\n    'image/gif': 'gif',\n  };\n  return map[mimeType?.toLowerCase()] || mimeType?.split('/')[1]?.split('+')[0] || 'png';\n};\n\nconst usePercentage = (scale: MotionValue<number>, matchScale: number): number => {\n  const subscribe = useCallback((onChange: () => void) => scale.on('change', onChange), [scale]);\n  const getSnapshot = useCallback(\n    () => Math.round((scale.get() / matchScale) * 100),\n    [matchScale, scale],\n  );\n\n  return useSyncExternalStore(subscribe, getSnapshot);\n};\n\nexport interface ToolbarProps {\n  canZoomIn: boolean;\n  canZoomOut: boolean;\n  fitRect: Rect;\n  flipHorizontal: () => void;\n  flipVertical: () => void;\n  natural: Size;\n  onDownload?: (source: string) => void | Promise<void>;\n  onMoreOpenChange?: (open: boolean) => void;\n  rotateLeft: () => void;\n  rotateRight: () => void;\n  rotation: Rotation;\n  scale: MotionValue<number>;\n  source: string;\n  toggleActualSize: () => void;\n  toolbarAddon?: ReactNode;\n  zoomIn: () => void;\n  zoomOut: () => void;\n}\n\nconst Toolbar = memo<ToolbarProps>(\n  ({\n    canZoomIn,\n    canZoomOut,\n    fitRect,\n    flipHorizontal,\n    flipVertical,\n    natural,\n    onDownload,\n    onMoreOpenChange,\n    rotateLeft,\n    rotateRight,\n    rotation,\n    scale,\n    source,\n    toggleActualSize,\n    toolbarAddon,\n    zoomIn,\n    zoomOut,\n  }) => {\n    const { t } = useTranslation(imageMessages);\n    const [containerEl, setContainerEl] = useState<HTMLElement | null>(null);\n    const [copyLoading, setCopyLoading] = useState(false);\n    const [downloadLoading, setDownloadLoading] = useState(false);\n\n    const matchScale = naturalScale(natural, fitRect, rotation);\n    const percentage = usePercentage(scale, matchScale);\n    // An image small enough that computeFit never scaled it down is already at\n    // 100% when fitted, so the two states the toggle switches between are the\n    // same state and the control has nothing to do.\n    const canToggleActualSize = Math.abs(matchScale - 1) > 0.01;\n    // The control reads as \"go to actual size\" by default, and only flips to\n    // the fit affordance when it can actually take you back — an image that\n    // fits at 100% is at both states at once and would otherwise offer to\n    // \"fit to screen\" while already fitted.\n    const showFitAffordance = canToggleActualSize && percentage === 100;\n\n    const defaultDownload = useCallback(\n      async (src: string) => {\n        try {\n          const response = await fetch(src, { mode: 'cors' });\n          const blob = await response.blob();\n          const blobUrl = URL.createObjectURL(blob);\n          let fileName = getFileNameFromUrl(src);\n          const ext = getExtensionFromMimeType(blob.type);\n          if (!fileName.includes('.')) {\n            fileName = `${fileName}.${ext}`;\n          } else if (fileName.endsWith('.svg+xml')) {\n            fileName = fileName.replace(/\\.svg\\+xml$/i, '.svg');\n          }\n          await downloadBlob(blobUrl, fileName);\n          URL.revokeObjectURL(blobUrl);\n          toast.success(t('image.downloadSuccess'));\n        } catch {\n          // A cross-origin source without CORS headers (e.g. a presigned URL reached\n          // through a redirect, which sends `Origin: null`) can never be read as a\n          // blob; opening it lets the browser handle the save instead of failing.\n          window.open(src, '_blank', 'noopener,noreferrer');\n        }\n      },\n      [t],\n    );\n\n    const handleDownload = useCallback(async () => {\n      setDownloadLoading(true);\n      try {\n        await (onDownload ?? defaultDownload)(source);\n      } catch {\n        toast.error(t('image.downloadFailed'));\n      } finally {\n        setDownloadLoading(false);\n      }\n    }, [defaultDownload, onDownload, source, t]);\n\n    const handleCopy = useCallback(async () => {\n      setCopyLoading(true);\n      try {\n        const response = await fetch(source, { mode: 'cors' });\n        const blob = await response.blob();\n        const clipboardBlob = await getClipboardBlob(blob);\n        await navigator.clipboard.write([new ClipboardItem(clipboardBlob)]);\n        toast.success(t('image.copySuccess'));\n      } catch {\n        toast.error(t('image.copyFailed'));\n      } finally {\n        setCopyLoading(false);\n      }\n    }, [source, t]);\n\n    const moreItems = useMemo<DropdownItem[]>(\n      () => [\n        {\n          icon: FlipHorizontal,\n          key: 'flip-horizontal',\n          label: t('image.flipHorizontal'),\n          onClick: flipHorizontal,\n        },\n        {\n          icon: FlipVertical,\n          key: 'flip-vertical',\n          label: t('image.flipVertical'),\n          onClick: flipVertical,\n        },\n        { icon: RotateCcw, key: 'rotate-left', label: t('image.rotateLeft'), onClick: rotateLeft },\n        {\n          icon: RotateCw,\n          key: 'rotate-right',\n          label: t('image.rotateRight'),\n          onClick: rotateRight,\n        },\n        { icon: Copy, key: 'copy', label: t('image.copy'), onClick: handleCopy },\n      ],\n      [flipHorizontal, flipVertical, handleCopy, rotateLeft, rotateRight, t],\n    );\n\n    return (\n      <TooltipGroup popupContainer={containerEl ?? undefined}>\n        <div {...styleProps(styles.toolbar, 'lobe-image-viewer-toolbar')} ref={setContainerEl}>\n          <Flexbox horizontal align=\"center\" gap={8} {...stylex.props(styles.toolbarRow)}>\n            <ActionIcon\n              disabled={!canZoomOut}\n              icon={ZoomOut}\n              style={{ borderRadius: 999 }}\n              title={t('image.zoomOut')}\n              onClick={zoomOut}\n            />\n            <Center horizontal {...stylex.props(styles.toolbarPercentage)}>\n              {percentage}%\n            </Center>\n            <ActionIcon\n              disabled={!canZoomIn}\n              icon={ZoomIn}\n              style={{ borderRadius: 999 }}\n              title={t('image.zoomIn')}\n              onClick={zoomIn}\n            />\n            <ActionIcon\n              data-actual-size={showFitAffordance ? 'fit' : 'actual'}\n              disabled={!canToggleActualSize}\n              icon={ActualSizeIcon}\n              style={{ borderRadius: 999 }}\n              title={showFitAffordance ? t('image.fitToScreen') : t('image.actualSize')}\n              xstyle={actualSizeMarker}\n              onClick={toggleActualSize}\n            />\n            <ActionIcon\n              icon={Download}\n              loading={downloadLoading}\n              style={{ borderRadius: 999 }}\n              title={t('image.download')}\n              onClick={handleDownload}\n            />\n            <DropdownMenu\n              items={moreItems}\n              placement=\"top\"\n              portalProps={{ container: containerEl ?? undefined }}\n              onOpenChange={(open) => onMoreOpenChange?.(open)}\n            >\n              <ActionIcon\n                icon={Ellipsis}\n                loading={copyLoading}\n                style={{ borderRadius: 999 }}\n                title={t('image.more')}\n              />\n            </DropdownMenu>\n            {toolbarAddon}\n          </Flexbox>\n        </div>\n      </TooltipGroup>\n    );\n  },\n);\n\nToolbar.displayName = 'Toolbar';\n\nexport default Toolbar;\n"],"mappings":"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"}
+{"version":3,"file":"Toolbar.mjs","names":["imageMessages","Flexbox","ActionIcon"],"sources":["../../../src/Image/viewer/Toolbar.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport {\n  Copy,\n  Download,\n  Ellipsis,\n  FlipHorizontal,\n  FlipVertical,\n  RotateCcw,\n  RotateCw,\n  ZoomIn,\n  ZoomOut,\n} from 'lucide-react';\nimport type { MotionValue } from 'motion/react';\nimport { memo, type ReactNode, useCallback, useMemo, useState, useSyncExternalStore } from 'react';\n\nimport { ActionIconImpl as ActionIcon } from '@/ActionIcon/ActionIcon';\nimport DropdownMenu, { type DropdownItem } from '@/DropdownMenu';\nimport { Center, Flexbox } from '@/Flex';\nimport imageMessages from '@/i18n/resources/en/image';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { styleProps } from '@/styles/stylex/props';\nimport { toast } from '@/Toast';\nimport { TooltipGroup } from '@/Tooltip';\nimport { getClipboardBlob } from '@/utils/blobToPng';\nimport { downloadBlob } from '@/utils/downloadBlob';\n\nimport { actualSizeMarker } from '../marker.stylex';\nimport { styles } from '../style';\nimport ActualSizeIcon from './ActualSizeIcon';\nimport { naturalScale, type Rect, type Rotation, type Size } from './geometry';\n\nconst getFileNameFromUrl = (url: string): string => {\n  try {\n    const pathname = new URL(url).pathname;\n    const match = pathname.match(/\\/([^/]+)$/);\n    return match ? decodeURIComponent(match[1]) : 'image';\n  } catch {\n    return 'image';\n  }\n};\n\nconst getExtensionFromMimeType = (mimeType: string): string => {\n  const map: Record<string, string> = {\n    'image/svg+xml': 'svg',\n    'image/png': 'png',\n    'image/jpeg': 'jpg',\n    'image/jpg': 'jpg',\n    'image/webp': 'webp',\n    'image/gif': 'gif',\n  };\n  return map[mimeType?.toLowerCase()] || mimeType?.split('/')[1]?.split('+')[0] || 'png';\n};\n\nconst usePercentage = (scale: MotionValue<number>, matchScale: number): number => {\n  const subscribe = useCallback((onChange: () => void) => scale.on('change', onChange), [scale]);\n  const getSnapshot = useCallback(\n    () => Math.round((scale.get() / matchScale) * 100),\n    [matchScale, scale],\n  );\n\n  return useSyncExternalStore(subscribe, getSnapshot);\n};\n\nconst defaultFetchImage = async (src: string): Promise<Blob> => {\n  const response = await fetch(src, { mode: 'cors' });\n  return response.blob();\n};\n\nexport interface ToolbarProps {\n  canZoomIn: boolean;\n  canZoomOut: boolean;\n  fetchImage?: (source: string) => Promise<Blob>;\n  fitRect: Rect;\n  flipHorizontal: () => void;\n  flipVertical: () => void;\n  natural: Size;\n  onDownload?: (source: string) => void | Promise<void>;\n  onMoreOpenChange?: (open: boolean) => void;\n  rotateLeft: () => void;\n  rotateRight: () => void;\n  rotation: Rotation;\n  scale: MotionValue<number>;\n  source: string;\n  toggleActualSize: () => void;\n  toolbarAddon?: ReactNode;\n  zoomIn: () => void;\n  zoomOut: () => void;\n}\n\nconst Toolbar = memo<ToolbarProps>(\n  ({\n    canZoomIn,\n    canZoomOut,\n    fetchImage,\n    fitRect,\n    flipHorizontal,\n    flipVertical,\n    natural,\n    onDownload,\n    onMoreOpenChange,\n    rotateLeft,\n    rotateRight,\n    rotation,\n    scale,\n    source,\n    toggleActualSize,\n    toolbarAddon,\n    zoomIn,\n    zoomOut,\n  }) => {\n    const { t } = useTranslation(imageMessages);\n    const [containerEl, setContainerEl] = useState<HTMLElement | null>(null);\n    const [copyLoading, setCopyLoading] = useState(false);\n    const [downloadLoading, setDownloadLoading] = useState(false);\n\n    const matchScale = naturalScale(natural, fitRect, rotation);\n    const percentage = usePercentage(scale, matchScale);\n    // An image small enough that computeFit never scaled it down is already at\n    // 100% when fitted, so the two states the toggle switches between are the\n    // same state and the control has nothing to do.\n    const canToggleActualSize = Math.abs(matchScale - 1) > 0.01;\n    // The control reads as \"go to actual size\" by default, and only flips to\n    // the fit affordance when it can actually take you back — an image that\n    // fits at 100% is at both states at once and would otherwise offer to\n    // \"fit to screen\" while already fitted.\n    const showFitAffordance = canToggleActualSize && percentage === 100;\n\n    const loadImage = fetchImage ?? defaultFetchImage;\n\n    const defaultDownload = useCallback(\n      async (src: string) => {\n        try {\n          const blob = await loadImage(src);\n          const blobUrl = URL.createObjectURL(blob);\n          let fileName = getFileNameFromUrl(src);\n          const ext = getExtensionFromMimeType(blob.type);\n          if (!fileName.includes('.')) {\n            fileName = `${fileName}.${ext}`;\n          } else if (fileName.endsWith('.svg+xml')) {\n            fileName = fileName.replace(/\\.svg\\+xml$/i, '.svg');\n          }\n          await downloadBlob(blobUrl, fileName);\n          URL.revokeObjectURL(blobUrl);\n          toast.success(t('image.downloadSuccess'));\n        } catch (error) {\n          if (fetchImage) throw error;\n          // A cross-origin source without CORS headers (e.g. a presigned URL reached\n          // through a redirect, which sends `Origin: null`) can never be read as a\n          // blob; opening it lets the browser handle the save instead of failing.\n          window.open(src, '_blank', 'noopener,noreferrer');\n        }\n      },\n      [fetchImage, loadImage, t],\n    );\n\n    const handleDownload = useCallback(async () => {\n      setDownloadLoading(true);\n      try {\n        await (onDownload ?? defaultDownload)(source);\n      } catch {\n        toast.error(t('image.downloadFailed'));\n      } finally {\n        setDownloadLoading(false);\n      }\n    }, [defaultDownload, onDownload, source, t]);\n\n    const handleCopy = useCallback(async () => {\n      setCopyLoading(true);\n      try {\n        const blob = await loadImage(source);\n        const clipboardBlob = await getClipboardBlob(blob);\n        await navigator.clipboard.write([new ClipboardItem(clipboardBlob)]);\n        toast.success(t('image.copySuccess'));\n      } catch {\n        toast.error(t('image.copyFailed'));\n      } finally {\n        setCopyLoading(false);\n      }\n    }, [loadImage, source, t]);\n\n    const moreItems = useMemo<DropdownItem[]>(\n      () => [\n        {\n          icon: FlipHorizontal,\n          key: 'flip-horizontal',\n          label: t('image.flipHorizontal'),\n          onClick: flipHorizontal,\n        },\n        {\n          icon: FlipVertical,\n          key: 'flip-vertical',\n          label: t('image.flipVertical'),\n          onClick: flipVertical,\n        },\n        { icon: RotateCcw, key: 'rotate-left', label: t('image.rotateLeft'), onClick: rotateLeft },\n        {\n          icon: RotateCw,\n          key: 'rotate-right',\n          label: t('image.rotateRight'),\n          onClick: rotateRight,\n        },\n        { icon: Copy, key: 'copy', label: t('image.copy'), onClick: handleCopy },\n      ],\n      [flipHorizontal, flipVertical, handleCopy, rotateLeft, rotateRight, t],\n    );\n\n    return (\n      <TooltipGroup popupContainer={containerEl ?? undefined}>\n        <div {...styleProps(styles.toolbar, 'lobe-image-viewer-toolbar')} ref={setContainerEl}>\n          <Flexbox horizontal align=\"center\" gap={8} {...stylex.props(styles.toolbarRow)}>\n            <ActionIcon\n              disabled={!canZoomOut}\n              icon={ZoomOut}\n              style={{ borderRadius: 999 }}\n              title={t('image.zoomOut')}\n              onClick={zoomOut}\n            />\n            <Center horizontal {...stylex.props(styles.toolbarPercentage)}>\n              {percentage}%\n            </Center>\n            <ActionIcon\n              disabled={!canZoomIn}\n              icon={ZoomIn}\n              style={{ borderRadius: 999 }}\n              title={t('image.zoomIn')}\n              onClick={zoomIn}\n            />\n            <ActionIcon\n              data-actual-size={showFitAffordance ? 'fit' : 'actual'}\n              disabled={!canToggleActualSize}\n              icon={ActualSizeIcon}\n              style={{ borderRadius: 999 }}\n              title={showFitAffordance ? t('image.fitToScreen') : t('image.actualSize')}\n              xstyle={actualSizeMarker}\n              onClick={toggleActualSize}\n            />\n            <ActionIcon\n              icon={Download}\n              loading={downloadLoading}\n              style={{ borderRadius: 999 }}\n              title={t('image.download')}\n              onClick={handleDownload}\n            />\n            <DropdownMenu\n              items={moreItems}\n              placement=\"top\"\n              portalProps={{ container: containerEl ?? undefined }}\n              onOpenChange={(open) => onMoreOpenChange?.(open)}\n            >\n              <ActionIcon\n                icon={Ellipsis}\n                loading={copyLoading}\n                style={{ borderRadius: 999 }}\n                title={t('image.more')}\n              />\n            </DropdownMenu>\n            {toolbarAddon}\n          </Flexbox>\n        </div>\n      </TooltipGroup>\n    );\n  },\n);\n\nToolbar.displayName = 'Toolbar';\n\nexport default Toolbar;\n"],"mappings":"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"}