@ifhover/leaf-ui 0.5.0 → 0.6.0

package/dist/esm/form/list.js

@@ -1,9 +1,11 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useId, useRef, useState } from "react";
+import { mergeComponentProps, useGenericComponentDefaults } from "../config-provider/component-defaults.js";
 import { classes } from "../shared/classes.js";
 import { useListMotion } from "../shared/motion.js";
-function FormList({ name, value, defaultValue = [], onChange, itemKey, children, className, ...props }) {
+function FormList(rawProps) {
+    const { name, value, defaultValue = [], onChange, itemKey, children, className, ...props } = mergeComponentProps(useGenericComponentDefaults('FormList'), rawProps);
     const id = useId();
     const sequence = useRef(0);
     const [internal, setInternal] = useState(defaultValue);

package/dist/esm/form/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"form/list.js","sources":["../../../src/form/list.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, useEffect, useId, useRef, useState } from 'react';\nimport { classes } from '../shared/classes';\nimport { useListMotion } from '../shared/motion';\nexport interface FormListField<T> {\n  key: string;\n  index: number;\n  name: string;\n  value: T;\n}\nexport interface FormListOperations<T> {\n  add: (value: T, index?: number) => void;\n  remove: (index: number | readonly number[]) => void;\n  move: (from: number, to: number) => void;\n  update: (index: number, value: T) => void;\n}\nexport interface FormListProps<T>\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange' | 'defaultValue'> {\n  name: string;\n  value?: readonly T[];\n  defaultValue?: readonly T[];\n  onChange?: (values: T[]) => void;\n  itemKey?: (value: T) => string;\n  children: (fields: readonly FormListField<T>[], operations: FormListOperations<T>) => ReactNode;\n}\nexport function FormList<T>({\n  name,\n  value,\n  defaultValue = [],\n  onChange,\n  itemKey,\n  children,\n  className,\n  ...props\n}: FormListProps<T>) {\n  const id = useId();\n  const sequence = useRef(0);\n  const [internal, setInternal] = useState<readonly T[]>(defaultValue);\n  const current = value ?? internal;\n  const root = useRef<HTMLDivElement>(null);\n  const records = useRef<{ key: string; value: T }[]>([]);\n  if (\n    records.current.length !== current.length ||\n    records.current.some((record, index) => !Object.is(record.value, current[index]))\n  ) {\n    const used = new Set<string>();\n    records.current = current.map((item) => {\n      const match = records.current.find(\n        (record) => !used.has(record.key) && Object.is(record.value, item),\n      );\n      const key = itemKey?.(item) ?? match?.key ?? `${id}-${++sequence.current}`;\n      used.add(key);\n      return { value: item, key };\n    });\n  }\n  const update = (next: { key: string; value: T }[]) => {\n    records.current = next;\n    const values = next.map((row) => row.value);\n    if (value === undefined) setInternal(values);\n    onChange?.(values);\n  };\n  useListMotion(root, records.current.map((row) => row.key).join('|'), ':scope > *');\n  const operations: FormListOperations<T> = {\n    add: (item, position = current.length) => {\n      const next = [...records.current];\n      next.splice(Math.max(0, Math.min(next.length, position)), 0, {\n        key: itemKey?.(item) ?? `${id}-${++sequence.current}`,\n        value: item,\n      });\n      update(next);\n    },\n    remove: (index) => {\n      const positions = typeof index === 'number' ? [index] : index;\n      update(records.current.filter((_, position) => !positions.includes(position)));\n    },\n    move: (from, to) => {\n      if (from < 0 || from >= current.length || to < 0 || to >= current.length || from === to)\n        return;\n      const next = [...records.current];\n      const [row] = next.splice(from, 1);\n      if (row) next.splice(to, 0, row);\n      update(next);\n    },\n    update: (index, item) => {\n      if (index < 0 || index >= current.length) return;\n      update(\n        records.current.map((row, position) =>\n          position === index ? { ...row, value: item } : row,\n        ),\n      );\n    },\n  };\n  useEffect(() => {\n    const form = root.current?.closest('form');\n    const reset = (event: Event) =>\n      queueMicrotask(() => {\n        if (!event.defaultPrevented && value === undefined) setInternal(defaultValue);\n      });\n    form?.addEventListener('reset', reset);\n    return () => form?.removeEventListener('reset', reset);\n  }, [value, defaultValue]);\n  return (\n    <div {...props} ref={root} className={classes('leaf-form-list', className)}>\n      {children(\n        records.current.map((row, index) => ({\n          key: row.key,\n          index,\n          name: `${name}.${index}`,\n          value: row.value,\n        })),\n        operations,\n      )}\n    </div>\n  );\n}\n"],"names":["FormList","name","value","defaultValue","onChange","itemKey","children","className","props","id","useId","sequence","useRef","internal","setInternal","useState","current","root","records","record","index","Object","used","Set","item","match","key","update","next","values","row","undefined","useListMotion","operations","position","Math","positions","_","from","to","useEffect","form","reset","event","queueMicrotask","classes"],"mappings":"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"}
+{"version":3,"file":"form/list.js","sources":["../../../src/form/list.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, useEffect, useId, useRef, useState } from 'react';\nimport {\n  mergeComponentProps,\n  useGenericComponentDefaults,\n} from '../config-provider/component-defaults';\nimport { classes } from '../shared/classes';\nimport { useListMotion } from '../shared/motion';\nexport interface FormListField<T> {\n  key: string;\n  index: number;\n  name: string;\n  value: T;\n}\nexport interface FormListOperations<T> {\n  add: (value: T, index?: number) => void;\n  remove: (index: number | readonly number[]) => void;\n  move: (from: number, to: number) => void;\n  update: (index: number, value: T) => void;\n}\nexport interface FormListProps<T>\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange' | 'defaultValue'> {\n  name: string;\n  value?: readonly T[];\n  defaultValue?: readonly T[];\n  onChange?: (values: T[]) => void;\n  itemKey?: (value: T) => string;\n  children: (fields: readonly FormListField<T>[], operations: FormListOperations<T>) => ReactNode;\n}\nexport function FormList<T>(rawProps: FormListProps<T>) {\n  const {\n    name,\n    value,\n    defaultValue = [],\n    onChange,\n    itemKey,\n    children,\n    className,\n    ...props\n  } = mergeComponentProps<FormListProps<T>>(useGenericComponentDefaults('FormList'), rawProps);\n  const id = useId();\n  const sequence = useRef(0);\n  const [internal, setInternal] = useState<readonly T[]>(defaultValue);\n  const current = value ?? internal;\n  const root = useRef<HTMLDivElement>(null);\n  const records = useRef<{ key: string; value: T }[]>([]);\n  if (\n    records.current.length !== current.length ||\n    records.current.some((record, index) => !Object.is(record.value, current[index]))\n  ) {\n    const used = new Set<string>();\n    records.current = current.map((item) => {\n      const match = records.current.find(\n        (record) => !used.has(record.key) && Object.is(record.value, item),\n      );\n      const key = itemKey?.(item) ?? match?.key ?? `${id}-${++sequence.current}`;\n      used.add(key);\n      return { value: item, key };\n    });\n  }\n  const update = (next: { key: string; value: T }[]) => {\n    records.current = next;\n    const values = next.map((row) => row.value);\n    if (value === undefined) setInternal(values);\n    onChange?.(values);\n  };\n  useListMotion(root, records.current.map((row) => row.key).join('|'), ':scope > *');\n  const operations: FormListOperations<T> = {\n    add: (item, position = current.length) => {\n      const next = [...records.current];\n      next.splice(Math.max(0, Math.min(next.length, position)), 0, {\n        key: itemKey?.(item) ?? `${id}-${++sequence.current}`,\n        value: item,\n      });\n      update(next);\n    },\n    remove: (index) => {\n      const positions = typeof index === 'number' ? [index] : index;\n      update(records.current.filter((_, position) => !positions.includes(position)));\n    },\n    move: (from, to) => {\n      if (from < 0 || from >= current.length || to < 0 || to >= current.length || from === to)\n        return;\n      const next = [...records.current];\n      const [row] = next.splice(from, 1);\n      if (row) next.splice(to, 0, row);\n      update(next);\n    },\n    update: (index, item) => {\n      if (index < 0 || index >= current.length) return;\n      update(\n        records.current.map((row, position) =>\n          position === index ? { ...row, value: item } : row,\n        ),\n      );\n    },\n  };\n  useEffect(() => {\n    const form = root.current?.closest('form');\n    const reset = (event: Event) =>\n      queueMicrotask(() => {\n        if (!event.defaultPrevented && value === undefined) setInternal(defaultValue);\n      });\n    form?.addEventListener('reset', reset);\n    return () => form?.removeEventListener('reset', reset);\n  }, [value, defaultValue]);\n  return (\n    <div {...props} ref={root} className={classes('leaf-form-list', className)}>\n      {children(\n        records.current.map((row, index) => ({\n          key: row.key,\n          index,\n          name: `${name}.${index}`,\n          value: row.value,\n        })),\n        operations,\n      )}\n    </div>\n  );\n}\n"],"names":["FormList","rawProps","name","value","defaultValue","onChange","itemKey","children","className","props","mergeComponentProps","useGenericComponentDefaults","id","useId","sequence","useRef","internal","setInternal","useState","current","root","records","record","index","Object","used","Set","item","match","key","update","next","values","row","undefined","useListMotion","operations","position","Math","positions","_","from","to","useEffect","form","reset","event","queueMicrotask","classes"],"mappings":";;;;;;AA4BO,SAASA,SAAYC,QAA0B;IACpD,MAAM,EACJC,IAAI,EACJC,KAAK,EACLC,eAAe,EAAE,EACjBC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACT,GAAGC,OACJ,GAAGC,oBAAsCC,4BAA4B,aAAaV;IACnF,MAAMW,KAAKC;IACX,MAAMC,WAAWC,OAAO;IACxB,MAAM,CAACC,UAAUC,YAAY,GAAGC,SAAuBd;IACvD,MAAMe,UAAUhB,SAASa;IACzB,MAAMI,OAAOL,OAAuB;IACpC,MAAMM,UAAUN,OAAoC,EAAE;IACtD,IACEM,QAAQ,OAAO,CAAC,MAAM,KAAKF,QAAQ,MAAM,IACzCE,QAAQ,OAAO,CAAC,IAAI,CAAC,CAACC,QAAQC,QAAU,CAACC,OAAO,EAAE,CAACF,OAAO,KAAK,EAAEH,OAAO,CAACI,MAAM,IAC/E;QACA,MAAME,OAAO,IAAIC;QACjBL,QAAQ,OAAO,GAAGF,QAAQ,GAAG,CAAC,CAACQ;YAC7B,MAAMC,QAAQP,QAAQ,OAAO,CAAC,IAAI,CAChC,CAACC,SAAW,CAACG,KAAK,GAAG,CAACH,OAAO,GAAG,KAAKE,OAAO,EAAE,CAACF,OAAO,KAAK,EAAEK;YAE/D,MAAME,MAAMvB,UAAUqB,SAASC,OAAO,OAAO,GAAGhB,GAAG,CAAC,EAAE,EAAEE,SAAS,OAAO,EAAE;YAC1EW,KAAK,GAAG,CAACI;YACT,OAAO;gBAAE,OAAOF;gBAAME;YAAI;QAC5B;IACF;IACA,MAAMC,SAAS,CAACC;QACdV,QAAQ,OAAO,GAAGU;QAClB,MAAMC,SAASD,KAAK,GAAG,CAAC,CAACE,MAAQA,IAAI,KAAK;QAC1C,IAAI9B,AAAU+B,WAAV/B,OAAqBc,YAAYe;QACrC3B,WAAW2B;IACb;IACAG,cAAcf,MAAMC,QAAQ,OAAO,CAAC,GAAG,CAAC,CAACY,MAAQA,IAAI,GAAG,EAAE,IAAI,CAAC,MAAM;IACrE,MAAMG,aAAoC;QACxC,KAAK,CAACT,MAAMU,WAAWlB,QAAQ,MAAM;YACnC,MAAMY,OAAO;mBAAIV,QAAQ,OAAO;aAAC;YACjCU,KAAK,MAAM,CAACO,KAAK,GAAG,CAAC,GAAGA,KAAK,GAAG,CAACP,KAAK,MAAM,EAAEM,YAAY,GAAG;gBAC3D,KAAK/B,UAAUqB,SAAS,GAAGf,GAAG,CAAC,EAAE,EAAEE,SAAS,OAAO,EAAE;gBACrD,OAAOa;YACT;YACAG,OAAOC;QACT;QACA,QAAQ,CAACR;YACP,MAAMgB,YAAY,AAAiB,YAAjB,OAAOhB,QAAqB;gBAACA;aAAM,GAAGA;YACxDO,OAAOT,QAAQ,OAAO,CAAC,MAAM,CAAC,CAACmB,GAAGH,WAAa,CAACE,UAAU,QAAQ,CAACF;QACrE;QACA,MAAM,CAACI,MAAMC;YACX,IAAID,OAAO,KAAKA,QAAQtB,QAAQ,MAAM,IAAIuB,KAAK,KAAKA,MAAMvB,QAAQ,MAAM,IAAIsB,SAASC,IACnF;YACF,MAAMX,OAAO;mBAAIV,QAAQ,OAAO;aAAC;YACjC,MAAM,CAACY,IAAI,GAAGF,KAAK,MAAM,CAACU,MAAM;YAChC,IAAIR,KAAKF,KAAK,MAAM,CAACW,IAAI,GAAGT;YAC5BH,OAAOC;QACT;QACA,QAAQ,CAACR,OAAOI;YACd,IAAIJ,QAAQ,KAAKA,SAASJ,QAAQ,MAAM,EAAE;YAC1CW,OACET,QAAQ,OAAO,CAAC,GAAG,CAAC,CAACY,KAAKI,WACxBA,aAAad,QAAQ;oBAAE,GAAGU,GAAG;oBAAE,OAAON;gBAAK,IAAIM;QAGrD;IACF;IACAU,UAAU;QACR,MAAMC,OAAOxB,KAAK,OAAO,EAAE,QAAQ;QACnC,MAAMyB,QAAQ,CAACC,QACbC,eAAe;gBACb,IAAI,CAACD,MAAM,gBAAgB,IAAI3C,AAAU+B,WAAV/B,OAAqBc,YAAYb;YAClE;QACFwC,MAAM,iBAAiB,SAASC;QAChC,OAAO,IAAMD,MAAM,oBAAoB,SAASC;IAClD,GAAG;QAAC1C;QAAOC;KAAa;IACxB,OAAO,WAAP,GACE,IAAC;QAAK,GAAGK,KAAK;QAAE,KAAKW;QAAM,WAAW4B,QAAQ,kBAAkBxC;kBAC7DD,SACCc,QAAQ,OAAO,CAAC,GAAG,CAAC,CAACY,KAAKV,QAAW;gBACnC,KAAKU,IAAI,GAAG;gBACZV;gBACA,MAAM,GAAGrB,KAAK,CAAC,EAAEqB,OAAO;gBACxB,OAAOU,IAAI,KAAK;YAClB,KACAG;;AAIR"}

package/dist/esm/grid/grid.d.ts

@@ -5,7 +5,7 @@ export interface GridProps extends HTMLAttributes<HTMLDivElement> {
     gap?: number | string | readonly [number | string, number | string];
     align?: 'start' | 'center' | 'end' | 'stretch';
 }
-export declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const GridControl: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface RowProps extends Omit<GridProps, 'columns' | 'gap'> {
     gutter?: GridProps['gap'];
 }
@@ -20,4 +20,5 @@ export interface ColProps extends HTMLAttributes<HTMLDivElement> {
     xl?: number;
 }
 export declare const Col: import("react").ForwardRefExoticComponent<ColProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=grid.d.ts.map

package/dist/esm/grid/grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/grid/grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAIxD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9D,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;IAC3D,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACpE,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;CAChD;AACD,eAAO,MAAM,IAAI,sGAsBf,CAAC;AACH,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,KAAK,CAAC;IAClE,MAAM,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;CAC3B;AACD,eAAO,MAAM,GAAG,qGAsBd,CAAC;AACH,MAAM,WAAW,QAAS,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AACD,eAAO,MAAM,GAAG,qGA2Bd,CAAC"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/grid/grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAKxD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9D,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC;IAC3D,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,MAAM,GAAG,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACpE,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;CAChD;AACD,eAAO,MAAM,WAAW,sGAsBtB,CAAC;AACH,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,KAAK,CAAC;IAClE,MAAM,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC;CAC3B;AACD,eAAO,MAAM,GAAG,qGAoBd,CAAC;AACH,MAAM,WAAW,QAAS,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AACD,eAAO,MAAM,GAAG,qGAoCd,CAAC;AAEH,eAAO,MAAM,IAAI,sGAGf,CAAC"}

package/dist/esm/grid/grid.js

@@ -1,8 +1,9 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { useComponentProps } from "../config-provider/component-defaults.js";
 import { classes } from "../shared/classes.js";
-const grid_Grid = /*#__PURE__*/ forwardRef(function({ columns = 3, gap = 16, align = 'stretch', className, style, ...props }, ref) {
+const grid_GridControl = /*#__PURE__*/ forwardRef(function({ columns = 3, gap = 16, align = 'stretch', className, style, ...props }, ref) {
     const variables = {
         alignItems: align,
         gap: 'object' == typeof gap ? gap.map((v)=>'number' == typeof v ? `${v}px` : v).join(' ') : gap,
@@ -29,7 +30,8 @@ const grid_Grid = /*#__PURE__*/ forwardRef(function({ columns = 3, gap = 16, ali
         style: variables
     });
 });
-const grid_Row = /*#__PURE__*/ forwardRef(function({ gutter = 16, className, style, ...props }, ref) {
+const grid_Row = /*#__PURE__*/ forwardRef(function(rawProps, ref) {
+    const { gutter = 16, className, style, ...props } = useComponentProps('Row', rawProps);
     const [vertical, horizontal] = 'object' == typeof gutter ? gutter : [
         gutter,
         gutter
@@ -41,7 +43,7 @@ const grid_Row = /*#__PURE__*/ forwardRef(function({ gutter = 16, className, sty
         rowGap: unit(vertical),
         ...style
     };
-    return /*#__PURE__*/ jsx(grid_Grid, {
+    return /*#__PURE__*/ jsx(grid_GridControl, {
         ...props,
         ref: ref,
         columns: 24,
@@ -50,7 +52,8 @@ const grid_Row = /*#__PURE__*/ forwardRef(function({ gutter = 16, className, sty
         className: classes('leaf-row', className)
     });
 });
-const grid_Col = /*#__PURE__*/ forwardRef(function({ span = 24, offset = 0, xs, sm, md, lg, xl, className, style, ...props }, ref) {
+const grid_Col = /*#__PURE__*/ forwardRef(function(rawProps, ref) {
+    const { span = 24, offset = 0, xs, sm, md, lg, xl, className, style, ...props } = useComponentProps('Col', rawProps);
     const variables = {
         ...style
     };
@@ -86,6 +89,14 @@ const grid_Col = /*#__PURE__*/ forwardRef(function({ span = 24, offset = 0, xs,
         ]
     });
 });
-export { grid_Col as Col, grid_Grid as Grid, grid_Row as Row };
+const grid_Grid = /*#__PURE__*/ forwardRef(function(rawProps, ref) {
+    const props = useComponentProps('Grid', rawProps);
+    return /*#__PURE__*/ jsx(grid_GridControl, {
+        ...props,
+        ref: ref
+    });
+});
+grid_Grid.displayName = 'Grid';
+export { grid_Col as Col, grid_Grid as Grid, grid_GridControl as GridControl, grid_Row as Row };
 
 //# sourceMappingURL=grid.js.map

package/dist/esm/grid/grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid/grid.js","sources":["../../../src/grid/grid.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react';\nimport { classes } from '../shared/classes';\nimport type { LeafThemeStyle } from '../theme';\n\nexport type GridBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport interface GridProps extends HTMLAttributes<HTMLDivElement> {\n  columns?: number | Partial<Record<GridBreakpoint, number>>;\n  gap?: number | string | readonly [number | string, number | string];\n  align?: 'start' | 'center' | 'end' | 'stretch';\n}\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(function Grid(\n  { columns = 3, gap = 16, align = 'stretch', className, style, ...props },\n  ref,\n) {\n  const variables: LeafThemeStyle = {\n    alignItems: align,\n    gap:\n      typeof gap === 'object'\n        ? gap.map((v) => (typeof v === 'number' ? `${v}px` : v)).join(' ')\n        : gap,\n    ...style,\n  };\n  if (typeof columns === 'number')\n    variables['--leaf-grid-columns'] = Math.max(1, Math.trunc(columns));\n  else {\n    let last = 1;\n    for (const point of ['xs', 'sm', 'md', 'lg', 'xl'] as const) {\n      last = columns[point] ?? last;\n      variables[`--leaf-grid-columns-${point}`] = Math.max(1, Math.trunc(last));\n    }\n  }\n  return <div {...props} ref={ref} className={classes('leaf-grid', className)} style={variables} />;\n});\nexport interface RowProps extends Omit<GridProps, 'columns' | 'gap'> {\n  gutter?: GridProps['gap'];\n}\nexport const Row = forwardRef<HTMLDivElement, RowProps>(function Row(\n  { gutter = 16, className, style, ...props },\n  ref,\n) {\n  const [vertical, horizontal] = typeof gutter === 'object' ? gutter : [gutter, gutter];\n  const unit = (value: number | string) => (typeof value === 'number' ? `${value}px` : value);\n  const variables: LeafThemeStyle = {\n    '--leaf-row-gutter': unit(horizontal),\n    columnGap: 0,\n    rowGap: unit(vertical),\n    ...style,\n  };\n  return (\n    <Grid\n      {...props}\n      ref={ref}\n      columns={24}\n      gap={gutter}\n      style={variables}\n      className={classes('leaf-row', className)}\n    />\n  );\n});\nexport interface ColProps extends HTMLAttributes<HTMLDivElement> {\n  span?: number;\n  offset?: number;\n  xs?: number;\n  sm?: number;\n  md?: number;\n  lg?: number;\n  xl?: number;\n}\nexport const Col = forwardRef<HTMLDivElement, ColProps>(function Col(\n  { span = 24, offset = 0, xs, sm, md, lg, xl, className, style, ...props },\n  ref,\n) {\n  const variables: LeafThemeStyle = { ...style };\n  let last = span;\n  for (const [point, value] of Object.entries({ xs, sm, md, lg, xl })) {\n    last = value ?? last;\n    variables[`--leaf-col-span-${point}`] = Math.min(24, Math.max(1, Math.trunc(last)));\n    variables[`--leaf-col-display-${point}`] = last <= 0 ? 'none' : 'block';\n  }\n  return (\n    <>\n      {offset > 0 && (\n        <div\n          aria-hidden=\"true\"\n          className=\"leaf-col leaf-col--offset\"\n          style={{\n            ...variables,\n            gridColumnEnd: `span ${Math.min(23, Math.max(1, Math.trunc(offset)))}`,\n            flexBasis: `${(Math.min(23, Math.max(1, Math.trunc(offset))) / 24) * 100}%`,\n          }}\n        />\n      )}\n      <div {...props} ref={ref} className={classes('leaf-col', className)} style={variables} />\n    </>\n  );\n});\n"],"names":["Grid","forwardRef","columns","gap","align","className","style","props","ref","variables","v","Math","last","point","classes","Row","gutter","vertical","horizontal","unit","value","Col","span","offset","xs","sm","md","lg","xl","Object"],"mappings":"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"}
+{"version":3,"file":"grid/grid.js","sources":["../../../src/grid/grid.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { classes } from '../shared/classes';\nimport type { LeafThemeStyle } from '../theme';\n\nexport type GridBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport interface GridProps extends HTMLAttributes<HTMLDivElement> {\n  columns?: number | Partial<Record<GridBreakpoint, number>>;\n  gap?: number | string | readonly [number | string, number | string];\n  align?: 'start' | 'center' | 'end' | 'stretch';\n}\nexport const GridControl = forwardRef<HTMLDivElement, GridProps>(function GridControl(\n  { columns = 3, gap = 16, align = 'stretch', className, style, ...props }: GridProps,\n  ref,\n) {\n  const variables: LeafThemeStyle = {\n    alignItems: align,\n    gap:\n      typeof gap === 'object'\n        ? gap.map((v) => (typeof v === 'number' ? `${v}px` : v)).join(' ')\n        : gap,\n    ...style,\n  };\n  if (typeof columns === 'number')\n    variables['--leaf-grid-columns'] = Math.max(1, Math.trunc(columns));\n  else {\n    let last = 1;\n    for (const point of ['xs', 'sm', 'md', 'lg', 'xl'] as const) {\n      last = columns[point] ?? last;\n      variables[`--leaf-grid-columns-${point}`] = Math.max(1, Math.trunc(last));\n    }\n  }\n  return <div {...props} ref={ref} className={classes('leaf-grid', className)} style={variables} />;\n});\nexport interface RowProps extends Omit<GridProps, 'columns' | 'gap'> {\n  gutter?: GridProps['gap'];\n}\nexport const Row = forwardRef<HTMLDivElement, RowProps>(function Row(rawProps: RowProps, ref) {\n  const { gutter = 16, className, style, ...props } = useComponentProps('Row', rawProps);\n  const [vertical, horizontal] = typeof gutter === 'object' ? gutter : [gutter, gutter];\n  const unit = (value: number | string) => (typeof value === 'number' ? `${value}px` : value);\n  const variables: LeafThemeStyle = {\n    '--leaf-row-gutter': unit(horizontal),\n    columnGap: 0,\n    rowGap: unit(vertical),\n    ...style,\n  };\n  return (\n    <GridControl\n      {...props}\n      ref={ref}\n      columns={24}\n      gap={gutter}\n      style={variables}\n      className={classes('leaf-row', className)}\n    />\n  );\n});\nexport interface ColProps extends HTMLAttributes<HTMLDivElement> {\n  span?: number;\n  offset?: number;\n  xs?: number;\n  sm?: number;\n  md?: number;\n  lg?: number;\n  xl?: number;\n}\nexport const Col = forwardRef<HTMLDivElement, ColProps>(function Col(rawProps: ColProps, ref) {\n  const {\n    span = 24,\n    offset = 0,\n    xs,\n    sm,\n    md,\n    lg,\n    xl,\n    className,\n    style,\n    ...props\n  } = useComponentProps('Col', rawProps);\n  const variables: LeafThemeStyle = { ...style };\n  let last = span;\n  for (const [point, value] of Object.entries({ xs, sm, md, lg, xl })) {\n    last = value ?? last;\n    variables[`--leaf-col-span-${point}`] = Math.min(24, Math.max(1, Math.trunc(last)));\n    variables[`--leaf-col-display-${point}`] = last <= 0 ? 'none' : 'block';\n  }\n  return (\n    <>\n      {offset > 0 && (\n        <div\n          aria-hidden=\"true\"\n          className=\"leaf-col leaf-col--offset\"\n          style={{\n            ...variables,\n            gridColumnEnd: `span ${Math.min(23, Math.max(1, Math.trunc(offset)))}`,\n            flexBasis: `${(Math.min(23, Math.max(1, Math.trunc(offset))) / 24) * 100}%`,\n          }}\n        />\n      )}\n      <div {...props} ref={ref} className={classes('leaf-col', className)} style={variables} />\n    </>\n  );\n});\n\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(function Grid(rawProps: GridProps, ref) {\n  const props = useComponentProps('Grid', rawProps);\n  return <GridControl {...props} ref={ref} />;\n});\nGrid.displayName = 'Grid';\n"],"names":["GridControl","forwardRef","columns","gap","align","className","style","props","ref","variables","v","Math","last","point","classes","Row","rawProps","gutter","useComponentProps","vertical","horizontal","unit","value","Col","span","offset","xs","sm","md","lg","xl","Object","Grid"],"mappings":";;;;;AAWO,MAAMA,mBAAc,WAAHA,GAAGC,WAAsC,SAC/D,EAAEC,UAAU,CAAC,EAAEC,MAAM,EAAE,EAAEC,QAAQ,SAAS,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,OAAkB,EACnFC,GAAG;IAEH,MAAMC,YAA4B;QAChC,YAAYL;QACZ,KACE,AAAe,YAAf,OAAOD,MACHA,IAAI,GAAG,CAAC,CAACO,IAAO,AAAa,YAAb,OAAOA,IAAiB,GAAGA,EAAE,EAAE,CAAC,GAAGA,GAAI,IAAI,CAAC,OAC5DP;QACN,GAAGG,KAAK;IACV;IACA,IAAI,AAAmB,YAAnB,OAAOJ,SACTO,SAAS,CAAC,sBAAsB,GAAGE,KAAK,GAAG,CAAC,GAAGA,KAAK,KAAK,CAACT;SACvD;QACH,IAAIU,OAAO;QACX,KAAK,MAAMC,SAAS;YAAC;YAAM;YAAM;YAAM;YAAM;SAAK,CAAW;YAC3DD,OAAOV,OAAO,CAACW,MAAM,IAAID;YACzBH,SAAS,CAAC,CAAC,oBAAoB,EAAEI,OAAO,CAAC,GAAGF,KAAK,GAAG,CAAC,GAAGA,KAAK,KAAK,CAACC;QACrE;IACF;IACA,OAAO,WAAP,GAAO,IAAC;QAAK,GAAGL,KAAK;QAAE,KAAKC;QAAK,WAAWM,QAAQ,aAAaT;QAAY,OAAOI;;AACtF;AAIO,MAAMM,WAAM,WAAHA,GAAGd,WAAqC,SAAae,QAAkB,EAAER,GAAG;IAC1F,MAAM,EAAES,SAAS,EAAE,EAAEZ,SAAS,EAAEC,KAAK,EAAE,GAAGC,OAAO,GAAGW,kBAAkB,OAAOF;IAC7E,MAAM,CAACG,UAAUC,WAAW,GAAG,AAAkB,YAAlB,OAAOH,SAAsBA,SAAS;QAACA;QAAQA;KAAO;IACrF,MAAMI,OAAO,CAACC,QAA4B,AAAiB,YAAjB,OAAOA,QAAqB,GAAGA,MAAM,EAAE,CAAC,GAAGA;IACrF,MAAMb,YAA4B;QAChC,qBAAqBY,KAAKD;QAC1B,WAAW;QACX,QAAQC,KAAKF;QACb,GAAGb,KAAK;IACV;IACA,OAAO,WAAP,GACE,IAACN,kBAAWA;QACT,GAAGO,KAAK;QACT,KAAKC;QACL,SAAS;QACT,KAAKS;QACL,OAAOR;QACP,WAAWK,QAAQ,YAAYT;;AAGrC;AAUO,MAAMkB,WAAM,WAAHA,GAAGtB,WAAqC,SAAae,QAAkB,EAAER,GAAG;IAC1F,MAAM,EACJgB,OAAO,EAAE,EACTC,SAAS,CAAC,EACVC,EAAE,EACFC,EAAE,EACFC,EAAE,EACFC,EAAE,EACFC,EAAE,EACFzB,SAAS,EACTC,KAAK,EACL,GAAGC,OACJ,GAAGW,kBAAkB,OAAOF;IAC7B,MAAMP,YAA4B;QAAE,GAAGH,KAAK;IAAC;IAC7C,IAAIM,OAAOY;IACX,KAAK,MAAM,CAACX,OAAOS,MAAM,IAAIS,OAAO,OAAO,CAAC;QAAEL;QAAIC;QAAIC;QAAIC;QAAIC;IAAG,GAAI;QACnElB,OAAOU,SAASV;QAChBH,SAAS,CAAC,CAAC,gBAAgB,EAAEI,OAAO,CAAC,GAAGF,KAAK,GAAG,CAAC,IAAIA,KAAK,GAAG,CAAC,GAAGA,KAAK,KAAK,CAACC;QAC5EH,SAAS,CAAC,CAAC,mBAAmB,EAAEI,OAAO,CAAC,GAAGD,QAAQ,IAAI,SAAS;IAClE;IACA,OAAO,WAAP,GACE;;YACGa,SAAS,KAAK,WAAL,GACR,IAAC;gBACC,eAAY;gBACZ,WAAU;gBACV,OAAO;oBACL,GAAGhB,SAAS;oBACZ,eAAe,CAAC,KAAK,EAAEE,KAAK,GAAG,CAAC,IAAIA,KAAK,GAAG,CAAC,GAAGA,KAAK,KAAK,CAACc,WAAW;oBACtE,WAAW,GAAId,KAAK,GAAG,CAAC,IAAIA,KAAK,GAAG,CAAC,GAAGA,KAAK,KAAK,CAACc,YAAY,KAAM,IAAI,CAAC,CAAC;gBAC7E;;0BAGJ,IAAC;gBAAK,GAAGlB,KAAK;gBAAE,KAAKC;gBAAK,WAAWM,QAAQ,YAAYT;gBAAY,OAAOI;;;;AAGlF;AAEO,MAAMuB,YAAO,WAAHA,GAAG/B,WAAsC,SAAce,QAAmB,EAAER,GAAG;IAC9F,MAAMD,QAAQW,kBAAkB,QAAQF;IACxC,OAAO,WAAP,GAAO,IAAChB,kBAAWA;QAAE,GAAGO,KAAK;QAAE,KAAKC;;AACtC;AACAwB,UAAK,WAAW,GAAG"}

package/dist/esm/image/image.d.ts

@@ -17,7 +17,7 @@ export interface ImagePreviewProps {
     thumbnails?: boolean;
     downloadable?: boolean;
 }
-export declare function ImagePreview(props: ImagePreviewProps): import("react").JSX.Element | null;
+export declare function ImagePreviewControl(props: ImagePreviewProps): import("react").JSX.Element | null;
 export interface ImagePreviewGroupProps {
     children?: ReactNode;
     items?: readonly ImagePreviewItem[];
@@ -30,7 +30,7 @@ export interface ImagePreviewGroupProps {
     thumbnails?: boolean;
     downloadable?: boolean;
 }
-export declare function ImagePreviewGroup({ children, items, open: controlled, defaultOpen, onOpenChange, index: controlledIndex, defaultIndex, onIndexChange, thumbnails, downloadable, }: ImagePreviewGroupProps): import("react").JSX.Element;
+export declare function ImagePreviewGroup(rawProps: ImagePreviewGroupProps): import("react").JSX.Element;
 export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
     preview?: boolean;
     previewSrc?: string;
@@ -38,4 +38,5 @@ export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
     fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 }
 export declare const Image: import("react").ForwardRefExoticComponent<ImageProps & import("react").RefAttributes<HTMLImageElement>>;
+export declare function ImagePreview(rawProps: ImagePreviewProps): import("react").JSX.Element;
 //# sourceMappingURL=image.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/image/image.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,iBAAiB,EAEtB,KAAK,SAAS,EAQf,MAAM,OAAO,CAAC;AAQf,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AACD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,sCAYpD;AAMD,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AACD,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,KAAK,EACL,IAAI,EAAE,UAAU,EAChB,WAAmB,EACnB,YAAY,EACZ,KAAK,EAAE,eAAe,EACtB,YAAgB,EAChB,aAAa,EACb,UAAiB,EACjB,YAAoB,GACrB,EAAE,sBAAsB,+BA0CxB;AACD,MAAM,WAAW,UAAW,SAAQ,iBAAiB,CAAC,gBAAgB,CAAC;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC;CAC5D;AACD,eAAO,MAAM,KAAK,yGAwGhB,CAAC"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/image/image.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,iBAAiB,EAEtB,KAAK,SAAS,EAQf,MAAM,OAAO,CAAC;AAUf,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AACD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,iBAAiB,sCAY3D;AAMD,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACpC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AACD,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,sBAAsB,+BAsDjE;AACD,MAAM,WAAW,UAAW,SAAQ,iBAAiB,CAAC,gBAAgB,CAAC;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC;CAC5D;AACD,eAAO,MAAM,KAAK,yGA0GhB,CAAC;AAEH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,iBAAiB,+BAGvD"}

package/dist/esm/image/image.js

@@ -2,16 +2,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ImageOff, Scan } from "lucide-react";
 import { Suspense, createContext, forwardRef, lazy, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
-import { Loading } from "../loading/index.js";
+import { useComponentProps } from "../config-provider/component-defaults.js";
+import { LoadingControl } from "../loading/loading.js";
 import { classes } from "../shared/classes.js";
 import { useMergedRef } from "../shared/field.js";
 import { useClient } from "../shared/use-client.js";
 import { useControllable } from "../shared/use-controllable.js";
+import { useFormattedText } from "../shared/use-formatted-text.js";
 import { useText } from "../shared/use-text.js";
 const Viewer = /*#__PURE__*/ lazy(()=>import("./viewer.js").then((module)=>({
             default: module.ImageViewer
         })));
-function ImagePreview(props) {
+function ImagePreviewControl(props) {
     const client = useClient();
     const [visited, setVisited] = useState(props.open);
     useEffect(()=>{
@@ -28,7 +30,8 @@ function ImagePreview(props) {
     });
 }
 const GroupContext = /*#__PURE__*/ createContext(null);
-function ImagePreviewGroup({ children, items, open: controlled, defaultOpen = false, onOpenChange, index: controlledIndex, defaultIndex = 0, onIndexChange, thumbnails = true, downloadable = false }) {
+function ImagePreviewGroup(rawProps) {
+    const { children, items, open: controlled, defaultOpen = false, onOpenChange, index: controlledIndex, defaultIndex = 0, onIndexChange, thumbnails = true, downloadable = false } = useComponentProps('ImagePreviewGroup', rawProps);
     const [open, setOpen] = useControllable(controlled, defaultOpen, onOpenChange);
     const [index, setIndex] = useControllable(controlledIndex, defaultIndex, onIndexChange);
     const [registered, setRegistered] = useState([]);
@@ -66,7 +69,7 @@ function ImagePreviewGroup({ children, items, open: controlled, defaultOpen = fa
         value: context,
         children: [
             children,
-            /*#__PURE__*/ jsx(ImagePreview, {
+            /*#__PURE__*/ jsx(ImagePreviewControl, {
                 items: items ?? registered.map((entry)=>entry.item),
                 open: open,
                 index: index,
@@ -78,8 +81,10 @@ function ImagePreviewGroup({ children, items, open: controlled, defaultOpen = fa
         ]
     });
 }
-const image_Image = /*#__PURE__*/ forwardRef(function({ src, alt = '', preview = true, previewSrc, fallback, fit = 'cover', className, style, width, height, onLoad, onError, ...props }, ref) {
+const image_Image = /*#__PURE__*/ forwardRef(function(rawProps, ref) {
+    const { src, alt = '', preview = true, previewSrc, fallback, fit = 'cover', className, style, width, height, onLoad, onError, ...props } = useComponentProps('Image', rawProps);
     const t = useText();
+    const format = useFormattedText();
     const group = useContext(GroupContext);
     const id = useId();
     const native = useRef(null);
@@ -142,7 +147,9 @@ const image_Image = /*#__PURE__*/ forwardRef(function({ src, alt = '', preview =
             preview && src ? /*#__PURE__*/ jsxs("button", {
                 type: "button",
                 className: "leaf-image__trigger",
-                "aria-label": `${t('预览图片', 'Preview image')}${alt ? `: ${alt}` : ''}`,
+                "aria-label": format('image.previewImage', {
+                    alt: alt ? `: ${alt}` : ''
+                }),
                 onClick: (event)=>{
                     if (!event.defaultPrevented && 'error' !== state) if (group) group.show(id);
                     else setOpen(true);
@@ -160,20 +167,20 @@ const image_Image = /*#__PURE__*/ forwardRef(function({ src, alt = '', preview =
             }) : image,
             'loading' === state && /*#__PURE__*/ jsx("span", {
                 className: "leaf-image__placeholder",
-                children: /*#__PURE__*/ jsx(Loading, {
+                children: /*#__PURE__*/ jsx(LoadingControl, {
                     size: "sm"
                 })
             }),
             'error' === state && /*#__PURE__*/ jsx("span", {
                 className: "leaf-image__placeholder",
                 role: "img",
-                "aria-label": alt || t('图片加载失败', 'Image unavailable'),
+                "aria-label": alt || t('image.imageUnavailable'),
                 children: fallback ?? /*#__PURE__*/ jsx(ImageOff, {
                     size: 24,
                     "aria-hidden": "true"
                 })
             }),
-            !group && /*#__PURE__*/ jsx(ImagePreview, {
+            !group && /*#__PURE__*/ jsx(ImagePreviewControl, {
                 items: src ? [
                     {
                         src: previewSrc ?? src,
@@ -186,6 +193,12 @@ const image_Image = /*#__PURE__*/ forwardRef(function({ src, alt = '', preview =
         ]
     });
 });
-export { ImagePreview, ImagePreviewGroup, image_Image as Image };
+function ImagePreview(rawProps) {
+    const props = useComponentProps('ImagePreview', rawProps);
+    return /*#__PURE__*/ jsx(ImagePreviewControl, {
+        ...props
+    });
+}
+export { ImagePreview, ImagePreviewControl, ImagePreviewGroup, image_Image as Image };
 
 //# sourceMappingURL=image.js.map

package/dist/esm/image/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image/image.js","sources":["../../../src/image/image.tsx"],"sourcesContent":["import { ImageOff, Scan } from 'lucide-react';\nimport {\n  createContext,\n  forwardRef,\n  type ImgHTMLAttributes,\n  lazy,\n  type ReactNode,\n  Suspense,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { Loading } from '../loading';\nimport { classes } from '../shared/classes';\nimport { useMergedRef } from '../shared/field';\nimport { useClient } from '../shared/use-client';\nimport { useControllable } from '../shared/use-controllable';\nimport { useText } from '../shared/use-text';\n\nexport interface ImagePreviewItem {\n  src: string;\n  thumbnailSrc?: string;\n  alt?: string;\n  width?: number;\n  height?: number;\n  download?: string | boolean;\n  downloadName?: string;\n}\nexport interface ImagePreviewProps {\n  items: readonly ImagePreviewItem[];\n  open: boolean;\n  index?: number;\n  onClose: () => void;\n  onIndexChange?: (index: number) => void;\n  thumbnails?: boolean;\n  downloadable?: boolean;\n}\nconst Viewer = lazy(() => import('./viewer').then((module) => ({ default: module.ImageViewer })));\nexport function ImagePreview(props: ImagePreviewProps) {\n  const client = useClient();\n  const [visited, setVisited] = useState(props.open);\n  useEffect(() => {\n    if (props.open) setVisited(true);\n  }, [props.open]);\n  if (!client || (!props.open && !visited)) return null;\n  return (\n    <Suspense fallback={null}>\n      <Viewer {...props} />\n    </Suspense>\n  );\n}\ninterface GroupContextValue {\n  register: (id: string, item: ImagePreviewItem | null) => void;\n  show: (id: string) => void;\n}\nconst GroupContext = createContext<GroupContextValue | null>(null);\nexport interface ImagePreviewGroupProps {\n  children?: ReactNode;\n  items?: readonly ImagePreviewItem[];\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  index?: number;\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n  thumbnails?: boolean;\n  downloadable?: boolean;\n}\nexport function ImagePreviewGroup({\n  children,\n  items,\n  open: controlled,\n  defaultOpen = false,\n  onOpenChange,\n  index: controlledIndex,\n  defaultIndex = 0,\n  onIndexChange,\n  thumbnails = true,\n  downloadable = false,\n}: ImagePreviewGroupProps) {\n  const [open, setOpen] = useControllable(controlled, defaultOpen, onOpenChange);\n  const [index, setIndex] = useControllable(controlledIndex, defaultIndex, onIndexChange);\n  const [registered, setRegistered] = useState<{ id: string; item: ImagePreviewItem }[]>([]);\n  // Registration must not depend on the list or opening a viewer would reorder images.\n  const register = useMemo(\n    () => (id: string, item: ImagePreviewItem | null) =>\n      setRegistered((previous) => {\n        const position = previous.findIndex((entry) => entry.id === id);\n        if (!item) return previous.filter((entry) => entry.id !== id);\n        if (position < 0) return [...previous, { id, item }];\n        return previous.map((entry) => (entry.id === id ? { id, item } : entry));\n      }),\n    [],\n  );\n  const context = useMemo<GroupContextValue>(\n    () => ({\n      register,\n      show(id) {\n        const position = registered.findIndex((entry) => entry.id === id);\n        if (position >= 0) {\n          setIndex(position);\n          setOpen(true);\n        }\n      },\n    }),\n    [registered, setIndex, setOpen, register],\n  );\n  return (\n    <GroupContext.Provider value={context}>\n      {children}\n      <ImagePreview\n        items={items ?? registered.map((entry) => entry.item)}\n        open={open}\n        index={index}\n        onClose={() => setOpen(false)}\n        onIndexChange={setIndex}\n        thumbnails={thumbnails}\n        downloadable={downloadable}\n      />\n    </GroupContext.Provider>\n  );\n}\nexport interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {\n  preview?: boolean;\n  previewSrc?: string;\n  fallback?: ReactNode;\n  fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';\n}\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(\n  {\n    src,\n    alt = '',\n    preview = true,\n    previewSrc,\n    fallback,\n    fit = 'cover',\n    className,\n    style,\n    width,\n    height,\n    onLoad,\n    onError,\n    ...props\n  },\n  ref,\n) {\n  const t = useText();\n  const group = useContext(GroupContext);\n  const id = useId();\n  const native = useRef<HTMLImageElement>(null);\n  const mergedRef = useMergedRef(native, ref);\n  const [state, setState] = useState<'loading' | 'ready' | 'error'>('loading');\n  const [open, setOpen] = useState(false);\n  // biome-ignore lint/correctness/useExhaustiveDependencies: A changed source begins a new image loading cycle.\n  useEffect(() => {\n    const node = native.current;\n    setState(node?.complete ? (node.naturalWidth > 0 ? 'ready' : 'error') : 'loading');\n  }, [src]);\n  const register = group?.register;\n  useEffect(() => {\n    register?.(id, preview && src ? { src: previewSrc ?? src, alt } : null);\n  }, [id, src, previewSrc, alt, preview, register]);\n  useEffect(() => () => register?.(id, null), [id, register]);\n  const image = (\n    <img\n      {...props}\n      ref={mergedRef}\n      src={src}\n      alt={alt}\n      width={width}\n      height={height}\n      loading={props.loading ?? 'lazy'}\n      style={{ objectFit: fit }}\n      onLoad={(event) => {\n        setState('ready');\n        onLoad?.(event);\n      }}\n      onError={(event) => {\n        setState('error');\n        onError?.(event);\n      }}\n    />\n  );\n  return (\n    <span\n      className={classes('leaf-image', className)}\n      style={{ width, height, ...style }}\n      data-state={state}\n    >\n      {preview && src ? (\n        <button\n          type=\"button\"\n          className=\"leaf-image__trigger\"\n          aria-label={`${t('预览图片', 'Preview image')}${alt ? `: ${alt}` : ''}`}\n          onClick={(event) => {\n            if (!event.defaultPrevented && state !== 'error') {\n              if (group) group.show(id);\n              else setOpen(true);\n            }\n          }}\n        >\n          {image}\n          <span className=\"leaf-image__zoom\" aria-hidden=\"true\">\n            <Scan size={20} />\n          </span>\n        </button>\n      ) : (\n        image\n      )}\n      {state === 'loading' && (\n        <span className=\"leaf-image__placeholder\">\n          <Loading size=\"sm\" />\n        </span>\n      )}\n      {state === 'error' && (\n        <span\n          className=\"leaf-image__placeholder\"\n          role=\"img\"\n          aria-label={alt || t('图片加载失败', 'Image unavailable')}\n        >\n          {fallback ?? <ImageOff size={24} aria-hidden=\"true\" />}\n        </span>\n      )}\n      {!group && (\n        <ImagePreview\n          items={src ? [{ src: previewSrc ?? src, alt }] : []}\n          open={open}\n          onClose={() => setOpen(false)}\n        />\n      )}\n    </span>\n  );\n});\n"],"names":["Viewer","lazy","module","ImagePreview","props","client","useClient","visited","setVisited","useState","useEffect","Suspense","GroupContext","createContext","ImagePreviewGroup","children","items","controlled","defaultOpen","onOpenChange","controlledIndex","defaultIndex","onIndexChange","thumbnails","downloadable","open","setOpen","useControllable","index","setIndex","registered","setRegistered","register","useMemo","id","item","previous","position","entry","context","Image","forwardRef","src","alt","preview","previewSrc","fallback","fit","className","style","width","height","onLoad","onError","ref","t","useText","group","useContext","useId","native","useRef","mergedRef","useMergedRef","state","setState","node","image","event","classes","Scan","Loading","ImageOff"],"mappings":"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"}
+{"version":3,"file":"image/image.js","sources":["../../../src/image/image.tsx"],"sourcesContent":["import { ImageOff, Scan } from 'lucide-react';\nimport {\n  createContext,\n  forwardRef,\n  type ImgHTMLAttributes,\n  lazy,\n  type ReactNode,\n  Suspense,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { LoadingControl as Loading } from '../loading/loading';\nimport { classes } from '../shared/classes';\nimport { useMergedRef } from '../shared/field';\nimport { useClient } from '../shared/use-client';\nimport { useControllable } from '../shared/use-controllable';\nimport { useFormattedText } from '../shared/use-formatted-text';\nimport { useText } from '../shared/use-text';\n\nexport interface ImagePreviewItem {\n  src: string;\n  thumbnailSrc?: string;\n  alt?: string;\n  width?: number;\n  height?: number;\n  download?: string | boolean;\n  downloadName?: string;\n}\nexport interface ImagePreviewProps {\n  items: readonly ImagePreviewItem[];\n  open: boolean;\n  index?: number;\n  onClose: () => void;\n  onIndexChange?: (index: number) => void;\n  thumbnails?: boolean;\n  downloadable?: boolean;\n}\nconst Viewer = lazy(() => import('./viewer').then((module) => ({ default: module.ImageViewer })));\nexport function ImagePreviewControl(props: ImagePreviewProps) {\n  const client = useClient();\n  const [visited, setVisited] = useState(props.open);\n  useEffect(() => {\n    if (props.open) setVisited(true);\n  }, [props.open]);\n  if (!client || (!props.open && !visited)) return null;\n  return (\n    <Suspense fallback={null}>\n      <Viewer {...props} />\n    </Suspense>\n  );\n}\ninterface GroupContextValue {\n  register: (id: string, item: ImagePreviewItem | null) => void;\n  show: (id: string) => void;\n}\nconst GroupContext = createContext<GroupContextValue | null>(null);\nexport interface ImagePreviewGroupProps {\n  children?: ReactNode;\n  items?: readonly ImagePreviewItem[];\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  index?: number;\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n  thumbnails?: boolean;\n  downloadable?: boolean;\n}\nexport function ImagePreviewGroup(rawProps: ImagePreviewGroupProps) {\n  const {\n    children,\n    items,\n    open: controlled,\n    defaultOpen = false,\n    onOpenChange,\n    index: controlledIndex,\n    defaultIndex = 0,\n    onIndexChange,\n    thumbnails = true,\n    downloadable = false,\n  } = useComponentProps('ImagePreviewGroup', rawProps);\n  const [open, setOpen] = useControllable(controlled, defaultOpen, onOpenChange);\n  const [index, setIndex] = useControllable(controlledIndex, defaultIndex, onIndexChange);\n  const [registered, setRegistered] = useState<{ id: string; item: ImagePreviewItem }[]>([]);\n  // Registration must not depend on the list or opening a viewer would reorder images.\n  const register = useMemo(\n    () => (id: string, item: ImagePreviewItem | null) =>\n      setRegistered((previous) => {\n        const position = previous.findIndex((entry) => entry.id === id);\n        if (!item) return previous.filter((entry) => entry.id !== id);\n        if (position < 0) return [...previous, { id, item }];\n        return previous.map((entry) => (entry.id === id ? { id, item } : entry));\n      }),\n    [],\n  );\n  const context = useMemo<GroupContextValue>(\n    () => ({\n      register,\n      show(id) {\n        const position = registered.findIndex((entry) => entry.id === id);\n        if (position >= 0) {\n          setIndex(position);\n          setOpen(true);\n        }\n      },\n    }),\n    [registered, setIndex, setOpen, register],\n  );\n  return (\n    <GroupContext.Provider value={context}>\n      {children}\n      <ImagePreviewControl\n        items={items ?? registered.map((entry) => entry.item)}\n        open={open}\n        index={index}\n        onClose={() => setOpen(false)}\n        onIndexChange={setIndex}\n        thumbnails={thumbnails}\n        downloadable={downloadable}\n      />\n    </GroupContext.Provider>\n  );\n}\nexport interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {\n  preview?: boolean;\n  previewSrc?: string;\n  fallback?: ReactNode;\n  fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';\n}\nexport const Image = forwardRef<HTMLImageElement, ImageProps>(function Image(\n  rawProps: ImageProps,\n  ref,\n) {\n  const {\n    src,\n    alt = '',\n    preview = true,\n    previewSrc,\n    fallback,\n    fit = 'cover',\n    className,\n    style,\n    width,\n    height,\n    onLoad,\n    onError,\n    ...props\n  } = useComponentProps('Image', rawProps);\n  const t = useText();\n  const format = useFormattedText();\n  const group = useContext(GroupContext);\n  const id = useId();\n  const native = useRef<HTMLImageElement>(null);\n  const mergedRef = useMergedRef(native, ref);\n  const [state, setState] = useState<'loading' | 'ready' | 'error'>('loading');\n  const [open, setOpen] = useState(false);\n  // biome-ignore lint/correctness/useExhaustiveDependencies: A changed source begins a new image loading cycle.\n  useEffect(() => {\n    const node = native.current;\n    setState(node?.complete ? (node.naturalWidth > 0 ? 'ready' : 'error') : 'loading');\n  }, [src]);\n  const register = group?.register;\n  useEffect(() => {\n    register?.(id, preview && src ? { src: previewSrc ?? src, alt } : null);\n  }, [id, src, previewSrc, alt, preview, register]);\n  useEffect(() => () => register?.(id, null), [id, register]);\n  const image = (\n    <img\n      {...props}\n      ref={mergedRef}\n      src={src}\n      alt={alt}\n      width={width}\n      height={height}\n      loading={props.loading ?? 'lazy'}\n      style={{ objectFit: fit }}\n      onLoad={(event) => {\n        setState('ready');\n        onLoad?.(event);\n      }}\n      onError={(event) => {\n        setState('error');\n        onError?.(event);\n      }}\n    />\n  );\n  return (\n    <span\n      className={classes('leaf-image', className)}\n      style={{ width, height, ...style }}\n      data-state={state}\n    >\n      {preview && src ? (\n        <button\n          type=\"button\"\n          className=\"leaf-image__trigger\"\n          aria-label={format('image.previewImage', { alt: alt ? `: ${alt}` : '' })}\n          onClick={(event) => {\n            if (!event.defaultPrevented && state !== 'error') {\n              if (group) group.show(id);\n              else setOpen(true);\n            }\n          }}\n        >\n          {image}\n          <span className=\"leaf-image__zoom\" aria-hidden=\"true\">\n            <Scan size={20} />\n          </span>\n        </button>\n      ) : (\n        image\n      )}\n      {state === 'loading' && (\n        <span className=\"leaf-image__placeholder\">\n          <Loading size=\"sm\" />\n        </span>\n      )}\n      {state === 'error' && (\n        <span\n          className=\"leaf-image__placeholder\"\n          role=\"img\"\n          aria-label={alt || t('image.imageUnavailable')}\n        >\n          {fallback ?? <ImageOff size={24} aria-hidden=\"true\" />}\n        </span>\n      )}\n      {!group && (\n        <ImagePreviewControl\n          items={src ? [{ src: previewSrc ?? src, alt }] : []}\n          open={open}\n          onClose={() => setOpen(false)}\n        />\n      )}\n    </span>\n  );\n});\n\nexport function ImagePreview(rawProps: ImagePreviewProps) {\n  const props = useComponentProps('ImagePreview', rawProps);\n  return <ImagePreviewControl {...props} />;\n}\n"],"names":["Viewer","lazy","module","ImagePreviewControl","props","client","useClient","visited","setVisited","useState","useEffect","Suspense","GroupContext","createContext","ImagePreviewGroup","rawProps","children","items","controlled","defaultOpen","onOpenChange","controlledIndex","defaultIndex","onIndexChange","thumbnails","downloadable","useComponentProps","open","setOpen","useControllable","index","setIndex","registered","setRegistered","register","useMemo","id","item","previous","position","entry","context","Image","forwardRef","ref","src","alt","preview","previewSrc","fallback","fit","className","style","width","height","onLoad","onError","t","useText","format","useFormattedText","group","useContext","useId","native","useRef","mergedRef","useMergedRef","state","setState","node","image","event","classes","Scan","Loading","ImageOff","ImagePreview"],"mappings":"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"}

package/dist/esm/image/viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"viewer.d.ts","sourceRoot":"","sources":["../../../src/image/viewer.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAoB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEnE,wBAAgB,WAAW,CAAC,KAAK,EAAE,iBAAiB,+BAMnD"}
+{"version":3,"file":"viewer.d.ts","sourceRoot":"","sources":["../../../src/image/viewer.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAoB,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEnE,wBAAgB,WAAW,CAAC,KAAK,EAAE,iBAAiB,+BAMnD"}

package/dist/esm/image/viewer.js

@@ -5,9 +5,10 @@ import { useEffect, useRef, useState } from "react";
 import yet_another_react_lightbox, { useController, useLightboxState, useNavigationState } from "yet-another-react-lightbox";
 import plugins_fullscreen from "yet-another-react-lightbox/plugins/fullscreen";
 import plugins_zoom from "yet-another-react-lightbox/plugins/zoom";
-import { Loading } from "../loading/index.js";
+import { LoadingControl } from "../loading/loading.js";
 import { motionDuration, useMotionEnabled } from "../shared/motion.js";
 import { ScopedPortal } from "../shared/scoped-portal.js";
+import { useFormattedText } from "../shared/use-formatted-text.js";
 import { useText } from "../shared/use-text.js";
 function ImageViewer(props) {
     return /*#__PURE__*/ jsx(ScopedPortal, {
@@ -30,6 +31,7 @@ function Control({ label, children, active, disabled, onClick, className = '' })
 }
 function ViewerChrome({ items, thumbnails, downloadable, zoomControl, fullscreenControl }) {
     const t = useText();
+    const format = useFormattedText();
     const motion = useMotionEnabled();
     const { currentIndex } = useLightboxState();
     const { prev, next, close } = useController();
@@ -100,7 +102,7 @@ function ViewerChrome({ items, thumbnails, downloadable, zoomControl, fullscreen
                         className: "leaf-image-viewer__title",
                         children: [
                             /*#__PURE__*/ jsx("span", {
-                                children: item?.alt || t('图片预览', 'Image preview')
+                                children: item?.alt || t('image.imagePreview')
                             }),
                             /*#__PURE__*/ jsxs("span", {
                                 className: "leaf-image-viewer__count",
@@ -117,17 +119,17 @@ function ViewerChrome({ items, thumbnails, downloadable, zoomControl, fullscreen
                         className: "leaf-image-viewer__header-actions",
                         children: [
                             downloadable && item?.download !== false && /*#__PURE__*/ jsx(Control, {
-                                label: t('下载图片', 'Download image'),
+                                label: t('image.downloadImage'),
                                 onClick: ()=>void download(),
                                 disabled: downloading,
-                                children: downloading ? /*#__PURE__*/ jsx(Loading, {
+                                children: downloading ? /*#__PURE__*/ jsx(LoadingControl, {
                                     size: "sm"
                                 }) : /*#__PURE__*/ jsx(Download, {
                                     size: 19
                                 })
                             }),
                             /*#__PURE__*/ jsx(Control, {
-                                label: fullscreen ? t('退出全屏', 'Exit fullscreen') : t('进入全屏', 'Enter fullscreen'),
+                                label: fullscreen ? t('image.exitFullscreen') : t('image.enterFullscreen'),
                                 disabled: !fullscreenControl || fullscreenControl.disabled,
                                 onClick: ()=>fullscreen ? fullscreenControl?.exit() : fullscreenControl?.enter(),
                                 children: fullscreen ? /*#__PURE__*/ jsx(Minimize2, {
@@ -137,7 +139,7 @@ function ViewerChrome({ items, thumbnails, downloadable, zoomControl, fullscreen
                                 })
                             }),
                             /*#__PURE__*/ jsx(Control, {
-                                label: t('关闭预览', 'Close preview'),
+                                label: t('image.closePreview'),
                                 onClick: close,
                                 children: /*#__PURE__*/ jsx(X, {
                                     size: 22
@@ -151,7 +153,7 @@ function ViewerChrome({ items, thumbnails, downloadable, zoomControl, fullscreen
                 children: [
                     /*#__PURE__*/ jsx(Control, {
                         className: "leaf-image-viewer__previous",
-                        label: t('上一张', 'Previous image'),
+                        label: t('image.previousImage'),
                         disabled: prevDisabled,
                         onClick: ()=>prev(),
                         children: /*#__PURE__*/ jsx(ChevronLeft, {
@@ -160,7 +162,7 @@ function ViewerChrome({ items, thumbnails, downloadable, zoomControl, fullscreen
                     }),
                     /*#__PURE__*/ jsx(Control, {
                         className: "leaf-image-viewer__next",
-                        label: t('下一张', 'Next image'),
+                        label: t('image.nextImage'),
                         disabled: nextDisabled,
                         onClick: ()=>next(),
                         children: /*#__PURE__*/ jsx(ChevronRight, {
@@ -176,13 +178,13 @@ function ViewerChrome({ items, thumbnails, downloadable, zoomControl, fullscreen
                         role: "alert",
                         className: "leaf-image-viewer__error",
                         children: [
-                            t('下载失败，可在新窗口打开原图保存', 'Download failed. Open the original image to save it.'),
+                            t('image.downloadFailedOpenTheOriginalImageToSaveIt'),
                             ' ',
                             /*#__PURE__*/ jsx("a", {
                                 href: downloadUrl,
                                 target: "_blank",
                                 rel: "noopener noreferrer",
-                                children: t('打开原图', 'Open original')
+                                children: t('image.openOriginal')
                             })
                         ]
                     }),
@@ -190,7 +192,7 @@ function ViewerChrome({ items, thumbnails, downloadable, zoomControl, fullscreen
                         className: "leaf-image-viewer__tools",
                         children: [
                             /*#__PURE__*/ jsx(Control, {
-                                label: t('缩小', 'Zoom out'),
+                                label: t('image.zoomOut'),
                                 disabled: !zoomControl || zoomControl.disabled || zoom <= 1,
                                 onClick: ()=>zoomControl?.zoomOut(),
                                 children: /*#__PURE__*/ jsx(ZoomOut, {
@@ -201,14 +203,14 @@ function ViewerChrome({ items, thumbnails, downloadable, zoomControl, fullscreen
                                 type: "button",
                                 className: "leaf-image-viewer__zoom-level",
                                 onClick: ()=>zoomControl?.changeZoom(1),
-                                title: t('重置缩放', 'Reset zoom'),
+                                title: t('image.resetZoom'),
                                 children: [
                                     Math.round(100 * zoom),
                                     "%"
                                 ]
                             }),
                             /*#__PURE__*/ jsx(Control, {
-                                label: t('放大', 'Zoom in'),
+                                label: t('image.zoomIn'),
                                 disabled: !zoomControl || zoomControl.disabled || zoom >= zoomControl.maxZoom,
                                 onClick: ()=>zoomControl?.zoomIn(),
                                 children: /*#__PURE__*/ jsx(ZoomIn, {
@@ -216,7 +218,7 @@ function ViewerChrome({ items, thumbnails, downloadable, zoomControl, fullscreen
                                 })
                             }),
                             /*#__PURE__*/ jsx(Control, {
-                                label: t('重置缩放', 'Reset zoom'),
+                                label: t('image.resetZoom'),
                                 disabled: zoom <= 1,
                                 onClick: ()=>zoomControl?.changeZoom(1),
                                 children: /*#__PURE__*/ jsx(RotateCcw, {
@@ -229,7 +231,7 @@ function ViewerChrome({ items, thumbnails, downloadable, zoomControl, fullscreen
                                         className: "leaf-image-viewer__tool-separator"
                                     }),
                                     /*#__PURE__*/ jsx(Control, {
-                                        label: t('显示缩略图', 'Show thumbnails'),
+                                        label: t('image.showThumbnails'),
                                         active: showThumbs,
                                         onClick: ()=>setShowThumbs((value)=>!value),
                                         children: /*#__PURE__*/ jsx(PanelBottom, {
@@ -244,7 +246,7 @@ function ViewerChrome({ items, thumbnails, downloadable, zoomControl, fullscreen
                         className: "leaf-image-viewer__gallery",
                         children: [
                             /*#__PURE__*/ jsx(Control, {
-                                label: t('向前滚动缩略图', 'Scroll thumbnails backward'),
+                                label: t('image.scrollThumbnailsBackward'),
                                 onClick: ()=>strip.current?.scrollBy({
                                         left: -(0.7 * strip.current.clientWidth),
                                         behavior: motion ? 'smooth' : 'auto'
@@ -256,13 +258,16 @@ function ViewerChrome({ items, thumbnails, downloadable, zoomControl, fullscreen
                             /*#__PURE__*/ jsx("fieldset", {
                                 className: "leaf-image-viewer__thumbnails",
                                 ref: strip,
-                                "aria-label": t('图片列表', 'Image list'),
+                                "aria-label": t('image.imageList'),
                                 children: items.map((image, target)=>/*#__PURE__*/ jsxs("button", {
                                         type: "button",
                                         className: "leaf-image-viewer__thumbnail",
                                         "data-index": target,
                                         "aria-current": currentIndex === target || void 0,
-                                        "aria-label": `${t('查看第', 'View image')} ${target + 1}${t('张图片', '')}${image.alt ? `: ${image.alt}` : ''}`,
+                                        "aria-label": format('image.viewImage', {
+                                            index: target + 1,
+                                            alt: image.alt ? `: ${image.alt}` : ''
+                                        }),
                                         title: image.alt || String(target + 1),
                                         tabIndex: currentIndex === target ? 0 : -1,
                                         onClick: ()=>choose(target),
@@ -293,7 +298,7 @@ function ViewerChrome({ items, thumbnails, downloadable, zoomControl, fullscreen
                                     }, `${image.src}-${target}`))
                             }),
                             /*#__PURE__*/ jsx(Control, {
-                                label: t('向后滚动缩略图', 'Scroll thumbnails forward'),
+                                label: t('image.scrollThumbnailsForward'),
                                 onClick: ()=>strip.current?.scrollBy({
                                         left: 0.7 * strip.current.clientWidth,
                                         behavior: motion ? 'smooth' : 'auto'
@@ -323,6 +328,7 @@ function Viewer({ items, open, index = 0, onClose, onIndexChange, thumbnails = t
             ...item
         })));
     const t = useText();
+    const format = useFormattedText();
     const motion = useMotionEnabled();
     const duration = root && motion ? motionDuration(root) : 0;
     return /*#__PURE__*/ jsx("div", {
@@ -372,7 +378,7 @@ function Viewer({ items, open, index = 0, onClose, onIndexChange, thumbnails = t
                 buttonNext: ()=>null,
                 buttonZoom: ()=>null,
                 buttonFullscreen: ()=>null,
-                iconLoading: ()=>/*#__PURE__*/ jsx(Loading, {}),
+                iconLoading: ()=>/*#__PURE__*/ jsx(LoadingControl, {}),
                 iconError: ()=>/*#__PURE__*/ jsx(ImageOff, {
                         size: 32
                     }),
@@ -385,11 +391,14 @@ function Viewer({ items, open, index = 0, onClose, onIndexChange, thumbnails = t
                     })
             },
             labels: {
-                Lightbox: t('图片预览', 'Image preview'),
-                'Photo gallery': t('图片列表', 'Image list'),
-                Slide: t('图片', 'Image'),
-                '{index} of {total}': t('第 {index} 张，共 {total} 张', '{index} of {total}'),
-                Close: t('关闭预览', 'Close preview')
+                Lightbox: t('image.imagePreview'),
+                'Photo gallery': t('image.imageList'),
+                Slide: t('image.image'),
+                '{index} of {total}': format('image.position', {
+                    index: index + 1,
+                    total: items.length
+                }),
+                Close: t('image.closePreview')
             },
             on: {
                 view: ({ index: next })=>{