@solibo/solibo-ui 1.0.14 → 1.0.16

package/dist/components/controls/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/controls/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { Children, cloneElement, isValidElement } from 'react';\n\nimport { Button, type ButtonProps } from '../button';\nimport styles from './styles.module.css';\n\nconst buttonVariantOrder = {\n  primary: 3,\n  danger: 2,\n  secondary: 1,\n  tertiary: 0,\n  simple: 0,\n} satisfies Record<NonNullable<ButtonProps['variant']>, number>;\n\nconst variants = {\n  default: styles.default,\n  fixed: styles.fixed,\n  inline: styles.inline,\n};\n\nexport type ControlsProps = React.HTMLAttributes<HTMLDivElement> & {\n  children?: React.ReactNode;\n  variant?: keyof typeof variants;\n};\n\nconst getButtonRank = (button: React.ReactElement<ButtonProps>) =>\n  buttonVariantOrder[button.props.variant ?? 'secondary'];\n\nexport const Controls = ({ children, className, variant = 'default', ...props }: ControlsProps) => {\n  const childArray = Children.toArray(children);\n  const buttons: React.ReactElement<ButtonProps>[] = [];\n  const nonButtons: React.ReactNode[] = [];\n\n  childArray.forEach((child) => {\n    if (isValidElement<ButtonProps>(child) && child.type === Button) {\n      buttons.push(child);\n    } else {\n      nonButtons.push(child);\n    }\n  });\n\n  const sortedButtons = buttons\n    .map((button, index) => ({ button, index, rank: getButtonRank(button) }))\n    .sort((a, b) => a.rank - b.rank || a.index - b.index)\n    .map(({ button, index }) =>\n      cloneElement(button, {\n        key: button.key ?? index,\n      })\n    );\n\n  if (childArray.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      data-dynamic-position={variant === 'fixed' ? true : undefined}\n      className={cx(styles.controls, variants[variant], className)}\n      {...props}\n    >\n      {nonButtons && <span>{nonButtons}</span>}\n      {sortedButtons}\n    </div>\n  );\n};\n"],"names":["buttonVariantOrder","primary","danger","secondary","tertiary","simple","variants","default","styles","fixed","inline","getButtonRank","button","props","variant","Controls","children","className","childArray","Children","toArray","buttons","nonButtons","forEach","child","isValidElement","type","Button","push","sortedButtons","map","index","rank","sort","a","b","cloneElement","key","length","undefined","cx","controls","jsx"],"mappings":"6UAMMA,EAAqB,CACzBC,QAAS,EACTC,OAAQ,EACRC,UAAW,EACXC,SAAU,EACVC,OAAQ,CACV,EAEMC,EAAW,CACfC,QAASC,EAAOD,QAChBE,MAAOD,EAAOC,MACdC,OAAQF,EAAOE,MACjB,EAOMC,EAAiBC,GACrBZ,EAAmBY,EAAOC,MAAMC,SAAW,WAAW,EAE3CC,EAAWA,CAAC,CAAEC,SAAAA,EAAUC,UAAAA,EAAWH,QAAAA,EAAU,UAAW,GAAGD,CAAqB,IAAM,CACjG,MAAMK,EAAaC,EAAAA,SAASC,QAAQJ,CAAQ,EACtCK,EAA6C,CAAA,EAC7CC,EAAgC,CAAA,EAEtCJ,EAAWK,QAASC,GAAU,CACxBC,EAAAA,eAA4BD,CAAK,GAAKA,EAAME,OAASC,EAAAA,OACvDN,EAAQO,KAAKJ,CAAK,EAElBF,EAAWM,KAAKJ,CAAK,CAEzB,CAAC,EAED,MAAMK,EAAgBR,EACnBS,IAAI,CAAClB,EAAQmB,KAAW,CAAEnB,OAAAA,EAAQmB,MAAAA,EAAOC,KAAMrB,EAAcC,CAAM,CAAA,EAAI,EACvEqB,KAAK,CAACC,EAAGC,IAAMD,EAAEF,KAAOG,EAAEH,MAAQE,EAAEH,MAAQI,EAAEJ,KAAK,EACnDD,IAAI,CAAC,CAAElB,OAAAA,EAAQmB,MAAAA,CAAAA,IACdK,EAAAA,aAAaxB,EAAQ,CACnByB,IAAKzB,EAAOyB,KAAON,CAAAA,CACpB,CACH,EAEF,OAAIb,EAAWoB,SAAW,EACjB,YAIN,MAAA,CACC,wBAAuBxB,IAAY,QAAU,GAAOyB,OACpD,UAAWC,EAAAA,EAAGhC,EAAOiC,SAAUnC,EAASQ,CAAO,EAAGG,CAAS,EAC3D,GAAIJ,EAAM,iBAAA,WAETS,SAAAA,CAAAA,GAAcoB,EAAAA,IAAC,QAAMpB,SAAAA,CAAAA,CAAW,EAChCO,CAAAA,EACH,CAEJ"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/controls/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Button, type ButtonProps } from '../button';\nimport { type MenuAction, MenuActionList } from '../menu/action-list';\nimport { MenuPopover } from '../menu/menu-popover';\nimport styles from './styles.module.css';\n\nconst buttonVariantOrder = {\n  primary: 3,\n  danger: 2,\n  secondary: 1,\n  tertiary: 0,\n  simple: 0,\n} satisfies Record<NonNullable<ButtonProps['variant']>, number>;\n\nconst variants = {\n  default: styles.default,\n  embedded: styles.embedded,\n  fixed: styles.fixed,\n  inline: styles.inline,\n};\n\nexport type ControlsProps = React.HTMLAttributes<HTMLDivElement> & {\n  children?: React.ReactNode;\n  maxVisibleButtons?: number;\n  overflow?: 'menu';\n  overflowAccessibleLabel?: string;\n  variant?: keyof typeof variants;\n};\n\nconst getButtonRank = (button: React.ReactElement<ButtonProps>) =>\n  buttonVariantOrder[button.props.variant ?? 'secondary'];\n\nfunction OverflowMenu({\n  buttons,\n  menuAccessibleLabel,\n  triggerAccessibleLabel,\n}: {\n  buttons: React.ReactElement<ButtonProps>[];\n  menuAccessibleLabel: string;\n  triggerAccessibleLabel: string;\n}) {\n  const actions: MenuAction<React.ReactElement<ButtonProps>>[] = buttons.map((button) => ({\n    button,\n    isDanger: button.props.variant === 'danger',\n    value: button,\n  }));\n\n  return (\n    <MenuPopover triggerAccessibleLabel={triggerAccessibleLabel}>\n      {({ close, initialFocus }) => (\n        <MenuActionList\n          actions={actions}\n          initialFocus={initialFocus}\n          menuAccessibleLabel={menuAccessibleLabel}\n          onSelect={() => close()}\n          usesMenuSemantics\n        />\n      )}\n    </MenuPopover>\n  );\n}\n\nconst numericStyle = (style: CSSStyleDeclaration, property: keyof CSSStyleDeclaration) => {\n  const value = Number.parseFloat(String(style[property]));\n  return Number.isFinite(value) ? value : 0;\n};\n\nconst pixelStyle = (value: string) => {\n  if (!value.trim().endsWith('px')) return undefined;\n  const parsedValue = Number.parseFloat(value);\n  return Number.isFinite(parsedValue) ? parsedValue : undefined;\n};\n\ntype EmbeddedLayout = {\n  availableWidth: number;\n  parent: HTMLElement;\n  parentWidth: number;\n};\n\nconst availableWidthToRight = (\n  controls: HTMLDivElement,\n  previousLayout?: EmbeddedLayout\n): EmbeddedLayout | undefined => {\n  const parent = controls.parentElement;\n  if (!parent) return undefined;\n\n  const parentRect = parent.getBoundingClientRect();\n  const parentStyle = getComputedStyle(parent);\n  const parentWidth = parentRect.width || parent.clientWidth;\n  const contentLeft =\n    parentRect.left +\n    numericStyle(parentStyle, 'borderLeftWidth') +\n    numericStyle(parentStyle, 'paddingLeft');\n  const contentRight =\n    parentRect.left +\n    parentWidth -\n    numericStyle(parentStyle, 'borderRightWidth') -\n    numericStyle(parentStyle, 'paddingRight');\n  const precedingSiblings = Array.from(parent.children).slice(\n    0,\n    Array.from(parent.children).indexOf(controls)\n  );\n  const occupiedRight = precedingSiblings.reduce(\n    (right, sibling) => Math.max(right, sibling.getBoundingClientRect().right),\n    contentLeft\n  );\n  const gap = precedingSiblings.length > 0 ? numericStyle(parentStyle, 'columnGap') : 0;\n\n  const measuredAvailableWidth = Math.max(0, contentRight - occupiedRight - gap);\n  const parentWidthIncrease =\n    previousLayout?.parent === parent ? Math.max(0, parentWidth - previousLayout.parentWidth) : 0;\n\n  return {\n    availableWidth:\n      parentWidthIncrease > 0\n        ? Math.max(\n            measuredAvailableWidth,\n            (previousLayout?.availableWidth ?? 0) + parentWidthIncrease\n          )\n        : measuredAvailableWidth,\n    parent,\n    parentWidth,\n  };\n};\n\nexport const Controls = ({\n  children,\n  className,\n  maxVisibleButtons,\n  overflow,\n  overflowAccessibleLabel = 'More actions',\n  variant = 'default',\n  ...props\n}: ControlsProps) => {\n  const childArray = Children.toArray(children);\n  const buttons: React.ReactElement<ButtonProps>[] = [];\n  const nonButtons: React.ReactNode[] = [];\n\n  childArray.forEach((child) => {\n    if (isValidElement<ButtonProps>(child) && child.type === Button) {\n      buttons.push(child);\n    } else {\n      nonButtons.push(child);\n    }\n  });\n\n  const sortedButtons = buttons\n    .map((button, index) => ({ button, index, rank: getButtonRank(button) }))\n    .sort((a, b) => a.rank - b.rank || a.index - b.index)\n    .map(({ button, index }) =>\n      cloneElement(button, {\n        key: button.key ?? index,\n      })\n    );\n\n  const adaptive = variant === 'embedded' || (variant === 'fixed' && overflow === 'menu');\n  const normalizedMaxVisibleButtons =\n    typeof maxVisibleButtons === 'number' && Number.isFinite(maxVisibleButtons)\n      ? Math.floor(maxVisibleButtons)\n      : 0;\n  const visibleButtonLimit =\n    variant === 'embedded' && normalizedMaxVisibleButtons > 0\n      ? Math.min(sortedButtons.length, normalizedMaxVisibleButtons)\n      : sortedButtons.length;\n  const controlsRef = useRef<HTMLDivElement>(null);\n  const embeddedLayoutRef = useRef<EmbeddedLayout>(undefined);\n  const measurementRef = useRef<HTMLDivElement>(null);\n  const nonButtonsRef = useRef<HTMLSpanElement>(null);\n  const [visibleButtonCount, setVisibleButtonCount] = useState(visibleButtonLimit);\n\n  const updateOverflow = useCallback(() => {\n    if (!adaptive) {\n      setVisibleButtonCount(visibleButtonLimit);\n      return;\n    }\n\n    const controls = controlsRef.current;\n    const measurement = measurementRef.current;\n    if (!controls || !measurement) return;\n\n    const measurementButtons = Array.from(\n      measurement.querySelectorAll<HTMLElement>('[data-component=\"button\"]')\n    );\n    const trigger = measurementButtons.at(-1);\n    if (!trigger) return;\n\n    const buttonWidths = measurementButtons\n      .slice(0, sortedButtons.length)\n      .map((button) => button.getBoundingClientRect().width);\n    if (buttonWidths.length !== sortedButtons.length) return;\n\n    const style = getComputedStyle(controls);\n    const horizontalChrome =\n      numericStyle(style, 'paddingLeft') +\n      numericStyle(style, 'paddingRight') +\n      numericStyle(style, 'borderLeftWidth') +\n      numericStyle(style, 'borderRightWidth');\n    const configuredMaxWidth = pixelStyle(style.maxWidth);\n    const embeddedLayout =\n      variant === 'embedded'\n        ? availableWidthToRight(controls, embeddedLayoutRef.current)\n        : undefined;\n    if (embeddedLayout) embeddedLayoutRef.current = embeddedLayout;\n    const layoutWidth = embeddedLayout?.availableWidth ?? controls.parentElement?.clientWidth ?? 0;\n    const viewportWidth = window.visualViewport?.width ?? document.documentElement.clientWidth;\n    const outerAvailableWidth = Math.min(\n      ...[configuredMaxWidth, layoutWidth, viewportWidth].filter(\n        (width): width is number => typeof width === 'number' && Number.isFinite(width) && width > 0\n      )\n    );\n    if (!Number.isFinite(outerAvailableWidth)) return;\n\n    const availableWidth = Math.max(0, outerAvailableWidth - horizontalChrome);\n    const prefixWidth = nonButtonsRef.current?.getBoundingClientRect().width ?? 0;\n    const actionWidth = buttonWidths.reduce((total, width) => total + width, 0);\n\n    if (\n      visibleButtonLimit === sortedButtons.length &&\n      prefixWidth + actionWidth <= availableWidth\n    ) {\n      setVisibleButtonCount((current) =>\n        current === visibleButtonLimit ? current : visibleButtonLimit\n      );\n      return;\n    }\n\n    let usedWidth = prefixWidth + trigger.getBoundingClientRect().width;\n    let nextVisibleButtonCount = 0;\n    for (let index = 0; index < visibleButtonLimit; index += 1) {\n      if (usedWidth + buttonWidths[index] > availableWidth) break;\n      usedWidth += buttonWidths[index];\n      nextVisibleButtonCount = index + 1;\n    }\n\n    setVisibleButtonCount((current) =>\n      current === nextVisibleButtonCount ? current : nextVisibleButtonCount\n    );\n  }, [adaptive, sortedButtons.length, variant, visibleButtonLimit]);\n\n  useLayoutEffect(() => {\n    updateOverflow();\n\n    if (!adaptive) return undefined;\n\n    const observer =\n      typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateOverflow);\n    if (controlsRef.current) observer?.observe(controlsRef.current);\n    if (controlsRef.current?.parentElement) observer?.observe(controlsRef.current.parentElement);\n    if (variant === 'embedded' && controlsRef.current?.parentElement) {\n      Array.from(controlsRef.current.parentElement.children).forEach((sibling) => {\n        if (sibling !== controlsRef.current) observer?.observe(sibling);\n      });\n    }\n    if (nonButtonsRef.current) observer?.observe(nonButtonsRef.current);\n\n    window.addEventListener('resize', updateOverflow);\n    window.visualViewport?.addEventListener('resize', updateOverflow);\n    void document.fonts?.ready.then(updateOverflow);\n\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener('resize', updateOverflow);\n      window.visualViewport?.removeEventListener('resize', updateOverflow);\n    };\n  }, [adaptive, children, updateOverflow, variant]);\n\n  if (childArray.length === 0) {\n    return null;\n  }\n\n  const visibleButtons = adaptive ? sortedButtons.slice(0, visibleButtonCount) : sortedButtons;\n  const overflowedButtons = adaptive ? sortedButtons.slice(visibleButtonCount) : [];\n\n  return (\n    <div\n      data-component='controls'\n      data-dynamic-position={variant === 'fixed' ? true : undefined}\n      className={cx(styles.controls, variants[variant], adaptive && styles.adaptive, className)}\n      ref={controlsRef}\n      {...props}\n    >\n      {adaptive && (\n        <div\n          aria-hidden='true'\n          className={styles.measurement}\n          ref={measurementRef}\n        >\n          {sortedButtons.map((button, index) =>\n            cloneElement(button, {\n              'aria-hidden': true,\n              id: undefined,\n              key: `measure-${String(button.key ?? index)}`,\n              onClick: undefined,\n              ref: undefined,\n              tabIndex: -1,\n            })\n          )}\n          <MenuPopover triggerAccessibleLabel={overflowAccessibleLabel}>{null}</MenuPopover>\n        </div>\n      )}\n      {variant !== 'embedded' && nonButtons.length > 0 && (\n        <span\n          className={styles['non-button-content']}\n          ref={nonButtonsRef}\n        >\n          {nonButtons}\n        </span>\n      )}\n      {visibleButtons}\n      {overflowedButtons.length > 0 && (\n        <span className={styles['overflow-trigger']}>\n          <OverflowMenu\n            buttons={overflowedButtons}\n            menuAccessibleLabel={overflowAccessibleLabel}\n            triggerAccessibleLabel={overflowAccessibleLabel}\n          />\n        </span>\n      )}\n    </div>\n  );\n};\n"],"names":["buttonVariantOrder","primary","danger","secondary","tertiary","simple","variants","default","styles","embedded","fixed","inline","getButtonRank","button","props","variant","OverflowMenu","buttons","menuAccessibleLabel","triggerAccessibleLabel","actions","map","isDanger","value","jsx","MenuPopover","close","initialFocus","MenuActionList","numericStyle","style","property","Number","parseFloat","String","isFinite","pixelStyle","trim","endsWith","parsedValue","undefined","availableWidthToRight","controls","previousLayout","parent","parentElement","parentRect","getBoundingClientRect","parentStyle","getComputedStyle","parentWidth","width","clientWidth","contentLeft","left","contentRight","precedingSiblings","Array","from","children","slice","indexOf","occupiedRight","reduce","right","sibling","Math","max","gap","length","measuredAvailableWidth","parentWidthIncrease","availableWidth","Controls","className","maxVisibleButtons","overflow","overflowAccessibleLabel","childArray","Children","toArray","nonButtons","forEach","child","isValidElement","type","Button","push","sortedButtons","index","rank","sort","a","b","cloneElement","key","adaptive","normalizedMaxVisibleButtons","floor","visibleButtonLimit","min","controlsRef","useRef","embeddedLayoutRef","measurementRef","nonButtonsRef","visibleButtonCount","setVisibleButtonCount","useState","updateOverflow","useCallback","current","measurement","measurementButtons","querySelectorAll","trigger","at","buttonWidths","horizontalChrome","configuredMaxWidth","maxWidth","embeddedLayout","layoutWidth","viewportWidth","window","visualViewport","document","documentElement","outerAvailableWidth","filter","prefixWidth","actionWidth","total","usedWidth","nextVisibleButtonCount","useLayoutEffect","observer","ResizeObserver","observe","addEventListener","fonts","ready","then","disconnect","removeEventListener","visibleButtons","overflowedButtons","jsxs","cx","id","onClick","ref","tabIndex"],"mappings":"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"}

package/dist/components/controls/index.js

@@ -1,48 +1,140 @@
-import { jsxs as f, jsx as m } from "react/jsx-runtime";
-import { t as p } from "../../classix-DG18itHa.js";
-import { Children as u, isValidElement as _, cloneElement as x } from "react";
-import { Button as y } from "../button/index.js";
-import '../../assets/index36.css';const k = "_controls_j1dk0_13", j = "_inline_j1dk0_35", h = "_fixed_j1dk0_40", o = {
-  controls: k,
-  default: "_default_j1dk0_20",
-  inline: j,
-  fixed: h
-}, B = {
+import { jsxs as G, jsx as v } from "react/jsx-runtime";
+import { t as Y } from "../../classix-DG18itHa.js";
+import { Children as Z, isValidElement as ee, cloneElement as P, useRef as E, useState as te, useCallback as ne, useLayoutEffect as ie } from "react";
+import { Button as re } from "../button/index.js";
+import { a as T, M as oe } from "../../menu-popover-DQHDIw-8.js";
+import '../../assets/index34.css';const de = "_controls_1bkuq_13", se = "_inline_1bkuq_43", ce = "_embedded_1bkuq_48", ae = "_fixed_1bkuq_49", le = "_adaptive_1bkuq_60", ue = "_measurement_1bkuq_65", f = {
+  controls: de,
+  default: "_default_1bkuq_28",
+  inline: se,
+  embedded: ce,
+  fixed: ae,
+  adaptive: le,
+  measurement: ue,
+  "non-button-content": "_non-button-content_1bkuq_99",
+  "overflow-trigger": "_overflow-trigger_1bkuq_128"
+}, me = {
   primary: 3,
   danger: 2,
   secondary: 1,
   tertiary: 0,
   simple: 0
-}, g = {
-  default: o.default,
-  fixed: o.fixed,
-  inline: o.inline
-}, v = (e) => B[e.props.variant ?? "secondary"], N = ({
-  children: e,
-  className: d,
-  variant: s = "default",
-  ...l
+}, fe = {
+  default: f.default,
+  embedded: f.embedded,
+  fixed: f.fixed,
+  inline: f.inline
+}, he = (d) => me[d.props.variant ?? "secondary"];
+function pe({
+  buttons: d,
+  menuAccessibleLabel: i,
+  triggerAccessibleLabel: n
+}) {
+  const g = d.map((o) => ({
+    button: o,
+    isDanger: o.props.variant === "danger",
+    value: o
+  }));
+  return /* @__PURE__ */ v(T, { triggerAccessibleLabel: n, "data-component": "overflowmenu", children: ({
+    close: o,
+    initialFocus: r
+  }) => /* @__PURE__ */ v(oe, { actions: g, initialFocus: r, menuAccessibleLabel: i, onSelect: () => o(), usesMenuSemantics: !0 }) });
+}
+const h = (d, i) => {
+  const n = Number.parseFloat(String(d[i]));
+  return Number.isFinite(n) ? n : 0;
+}, ge = (d) => {
+  if (!d.trim().endsWith("px")) return;
+  const i = Number.parseFloat(d);
+  return Number.isFinite(i) ? i : void 0;
+}, be = (d, i) => {
+  const n = d.parentElement;
+  if (!n) return;
+  const g = n.getBoundingClientRect(), o = getComputedStyle(n), r = g.width || n.clientWidth, M = g.left + h(o, "borderLeftWidth") + h(o, "paddingLeft"), y = g.left + r - h(o, "borderRightWidth") - h(o, "paddingRight"), _ = Array.from(n.children).slice(0, Array.from(n.children).indexOf(d)), W = _.reduce((m, l) => Math.max(m, l.getBoundingClientRect().right), M), c = _.length > 0 ? h(o, "columnGap") : 0, a = Math.max(0, y - W - c), x = (i == null ? void 0 : i.parent) === n ? Math.max(0, r - i.parentWidth) : 0;
+  return {
+    availableWidth: x > 0 ? Math.max(a, ((i == null ? void 0 : i.availableWidth) ?? 0) + x) : a,
+    parent: n,
+    parentWidth: r
+  };
+}, Re = ({
+  children: d,
+  className: i,
+  maxVisibleButtons: n,
+  overflow: g,
+  overflowAccessibleLabel: o = "More actions",
+  variant: r = "default",
+  ...M
 }) => {
-  const i = u.toArray(e), a = [], r = [];
-  i.forEach((n) => {
-    _(n) && n.type === y ? a.push(n) : r.push(n);
+  const y = Z.toArray(d), _ = [], W = [];
+  y.forEach((e) => {
+    ee(e) && e.type === re ? _.push(e) : W.push(e);
   });
-  const c = a.map((n, t) => ({
-    button: n,
-    index: t,
-    rank: v(n)
-  })).sort((n, t) => n.rank - t.rank || n.index - t.index).map(({
-    button: n,
-    index: t
-  }) => x(n, {
-    key: n.key ?? t
-  }));
-  return i.length === 0 ? null : /* @__PURE__ */ f("div", { "data-dynamic-position": s === "fixed" ? !0 : void 0, className: p(o.controls, g[s], d), ...l, "data-component": "controls", children: [
-    r && /* @__PURE__ */ m("span", { children: r }),
-    c
+  const c = _.map((e, s) => ({
+    button: e,
+    index: s,
+    rank: he(e)
+  })).sort((e, s) => e.rank - s.rank || e.index - s.index).map(({
+    button: e,
+    index: s
+  }) => P(e, {
+    key: e.key ?? s
+  })), a = r === "embedded" || r === "fixed" && g === "menu", x = typeof n == "number" && Number.isFinite(n) ? Math.floor(n) : 0, m = r === "embedded" && x > 0 ? Math.min(c.length, x) : c.length, l = E(null), A = E(void 0), N = E(null), B = E(null), [q, C] = te(m), p = ne(() => {
+    var j, I, D;
+    if (!a) {
+      C(m);
+      return;
+    }
+    const e = l.current, s = N.current;
+    if (!e || !s) return;
+    const w = Array.from(s.querySelectorAll('[data-component="button"]')), R = w.at(-1);
+    if (!R) return;
+    const b = w.slice(0, c.length).map((t) => t.getBoundingClientRect().width);
+    if (b.length !== c.length) return;
+    const u = getComputedStyle(e), H = h(u, "paddingLeft") + h(u, "paddingRight") + h(u, "borderLeftWidth") + h(u, "borderRightWidth"), J = ge(u.maxWidth), k = r === "embedded" ? be(e, A.current) : void 0;
+    k && (A.current = k);
+    const K = (k == null ? void 0 : k.availableWidth) ?? ((j = e.parentElement) == null ? void 0 : j.clientWidth) ?? 0, Q = ((I = window.visualViewport) == null ? void 0 : I.width) ?? document.documentElement.clientWidth, F = Math.min(...[J, K, Q].filter((t) => typeof t == "number" && Number.isFinite(t) && t > 0));
+    if (!Number.isFinite(F)) return;
+    const V = Math.max(0, F - H), O = ((D = B.current) == null ? void 0 : D.getBoundingClientRect().width) ?? 0, U = b.reduce((t, X) => t + X, 0);
+    if (m === c.length && O + U <= V) {
+      C((t) => t === m ? t : m);
+      return;
+    }
+    let L = O + R.getBoundingClientRect().width, S = 0;
+    for (let t = 0; t < m && !(L + b[t] > V); t += 1)
+      L += b[t], S = t + 1;
+    C((t) => t === S ? t : S);
+  }, [a, c.length, r, m]);
+  if (ie(() => {
+    var s, w, R, b;
+    if (p(), !a) return;
+    const e = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(p);
+    return l.current && (e == null || e.observe(l.current)), (s = l.current) != null && s.parentElement && (e == null || e.observe(l.current.parentElement)), r === "embedded" && ((w = l.current) != null && w.parentElement) && Array.from(l.current.parentElement.children).forEach((u) => {
+      u !== l.current && (e == null || e.observe(u));
+    }), B.current && (e == null || e.observe(B.current)), window.addEventListener("resize", p), (R = window.visualViewport) == null || R.addEventListener("resize", p), (b = document.fonts) == null || b.ready.then(p), () => {
+      var u;
+      e == null || e.disconnect(), window.removeEventListener("resize", p), (u = window.visualViewport) == null || u.removeEventListener("resize", p);
+    };
+  }, [a, d, p, r]), y.length === 0)
+    return null;
+  const $ = a ? c.slice(0, q) : c, z = a ? c.slice(q) : [];
+  return /* @__PURE__ */ G("div", { "data-component": "controls", "data-dynamic-position": r === "fixed" ? !0 : void 0, className: Y(f.controls, fe[r], a && f.adaptive, i), ref: l, ...M, children: [
+    a && /* @__PURE__ */ G("div", { "aria-hidden": "true", className: f.measurement, ref: N, children: [
+      c.map((e, s) => P(e, {
+        "aria-hidden": !0,
+        id: void 0,
+        key: `measure-${String(e.key ?? s)}`,
+        onClick: void 0,
+        ref: void 0,
+        tabIndex: -1
+      })),
+      /* @__PURE__ */ v(T, { triggerAccessibleLabel: o, children: null })
+    ] }),
+    r !== "embedded" && W.length > 0 && /* @__PURE__ */ v("span", { className: f["non-button-content"], ref: B, children: W }),
+    $,
+    z.length > 0 && /* @__PURE__ */ v("span", { className: f["overflow-trigger"], children: /* @__PURE__ */ v(pe, { buttons: z, menuAccessibleLabel: o, triggerAccessibleLabel: o }) })
   ] });
 };
 export {
-  N as Controls
+  Re as Controls
 };
 //# sourceMappingURL=index.js.map

package/dist/components/controls/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/controls/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { Children, cloneElement, isValidElement } from 'react';\n\nimport { Button, type ButtonProps } from '../button';\nimport styles from './styles.module.css';\n\nconst buttonVariantOrder = {\n  primary: 3,\n  danger: 2,\n  secondary: 1,\n  tertiary: 0,\n  simple: 0,\n} satisfies Record<NonNullable<ButtonProps['variant']>, number>;\n\nconst variants = {\n  default: styles.default,\n  fixed: styles.fixed,\n  inline: styles.inline,\n};\n\nexport type ControlsProps = React.HTMLAttributes<HTMLDivElement> & {\n  children?: React.ReactNode;\n  variant?: keyof typeof variants;\n};\n\nconst getButtonRank = (button: React.ReactElement<ButtonProps>) =>\n  buttonVariantOrder[button.props.variant ?? 'secondary'];\n\nexport const Controls = ({ children, className, variant = 'default', ...props }: ControlsProps) => {\n  const childArray = Children.toArray(children);\n  const buttons: React.ReactElement<ButtonProps>[] = [];\n  const nonButtons: React.ReactNode[] = [];\n\n  childArray.forEach((child) => {\n    if (isValidElement<ButtonProps>(child) && child.type === Button) {\n      buttons.push(child);\n    } else {\n      nonButtons.push(child);\n    }\n  });\n\n  const sortedButtons = buttons\n    .map((button, index) => ({ button, index, rank: getButtonRank(button) }))\n    .sort((a, b) => a.rank - b.rank || a.index - b.index)\n    .map(({ button, index }) =>\n      cloneElement(button, {\n        key: button.key ?? index,\n      })\n    );\n\n  if (childArray.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      data-dynamic-position={variant === 'fixed' ? true : undefined}\n      className={cx(styles.controls, variants[variant], className)}\n      {...props}\n    >\n      {nonButtons && <span>{nonButtons}</span>}\n      {sortedButtons}\n    </div>\n  );\n};\n"],"names":["buttonVariantOrder","primary","danger","secondary","tertiary","simple","variants","default","styles","fixed","inline","getButtonRank","button","props","variant","Controls","children","className","childArray","Children","toArray","buttons","nonButtons","forEach","child","isValidElement","type","Button","push","sortedButtons","map","index","rank","sort","a","b","cloneElement","key","length","undefined","cx","controls","jsx"],"mappings":";;;;;;;;;GAMMA,IAAqB;AAAA,EACzBC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,WAAW;AAAA,EACXC,UAAU;AAAA,EACVC,QAAQ;AACV,GAEMC,IAAW;AAAA,EACfC,SAASC,EAAOD;AAAAA,EAChBE,OAAOD,EAAOC;AAAAA,EACdC,QAAQF,EAAOE;AACjB,GAOMC,IAAgBA,CAACC,MACrBZ,EAAmBY,EAAOC,MAAMC,WAAW,WAAW,GAE3CC,IAAWA,CAAC;AAAA,EAAEC,UAAAA;AAAAA,EAAUC,WAAAA;AAAAA,EAAWH,SAAAA,IAAU;AAAA,EAAW,GAAGD;AAAqB,MAAM;AACjG,QAAMK,IAAaC,EAASC,QAAQJ,CAAQ,GACtCK,IAA6C,CAAA,GAC7CC,IAAgC,CAAA;AAEtCJ,EAAAA,EAAWK,QAASC,CAAAA,MAAU;AAC5B,IAAIC,EAA4BD,CAAK,KAAKA,EAAME,SAASC,IACvDN,EAAQO,KAAKJ,CAAK,IAElBF,EAAWM,KAAKJ,CAAK;AAAA,EAEzB,CAAC;AAED,QAAMK,IAAgBR,EACnBS,IAAI,CAAClB,GAAQmB,OAAW;AAAA,IAAEnB,QAAAA;AAAAA,IAAQmB,OAAAA;AAAAA,IAAOC,MAAMrB,EAAcC,CAAM;AAAA,EAAA,EAAI,EACvEqB,KAAK,CAACC,GAAGC,MAAMD,EAAEF,OAAOG,EAAEH,QAAQE,EAAEH,QAAQI,EAAEJ,KAAK,EACnDD,IAAI,CAAC;AAAA,IAAElB,QAAAA;AAAAA,IAAQmB,OAAAA;AAAAA,EAAAA,MACdK,EAAaxB,GAAQ;AAAA,IACnByB,KAAKzB,EAAOyB,OAAON;AAAAA,EAAAA,CACpB,CACH;AAEF,SAAIb,EAAWoB,WAAW,IACjB,yBAIN,OAAA,EACC,yBAAuBxB,MAAY,UAAU,KAAOyB,QACpD,WAAWC,EAAGhC,EAAOiC,UAAUnC,EAASQ,CAAO,GAAGG,CAAS,GAC3D,GAAIJ,GAAM,kBAAA,YAETS,UAAAA;AAAAA,IAAAA,KAAc,gBAAAoB,EAAC,UAAMpB,UAAAA,EAAAA,CAAW;AAAA,IAChCO;AAAAA,EAAAA,GACH;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/controls/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Button, type ButtonProps } from '../button';\nimport { type MenuAction, MenuActionList } from '../menu/action-list';\nimport { MenuPopover } from '../menu/menu-popover';\nimport styles from './styles.module.css';\n\nconst buttonVariantOrder = {\n  primary: 3,\n  danger: 2,\n  secondary: 1,\n  tertiary: 0,\n  simple: 0,\n} satisfies Record<NonNullable<ButtonProps['variant']>, number>;\n\nconst variants = {\n  default: styles.default,\n  embedded: styles.embedded,\n  fixed: styles.fixed,\n  inline: styles.inline,\n};\n\nexport type ControlsProps = React.HTMLAttributes<HTMLDivElement> & {\n  children?: React.ReactNode;\n  maxVisibleButtons?: number;\n  overflow?: 'menu';\n  overflowAccessibleLabel?: string;\n  variant?: keyof typeof variants;\n};\n\nconst getButtonRank = (button: React.ReactElement<ButtonProps>) =>\n  buttonVariantOrder[button.props.variant ?? 'secondary'];\n\nfunction OverflowMenu({\n  buttons,\n  menuAccessibleLabel,\n  triggerAccessibleLabel,\n}: {\n  buttons: React.ReactElement<ButtonProps>[];\n  menuAccessibleLabel: string;\n  triggerAccessibleLabel: string;\n}) {\n  const actions: MenuAction<React.ReactElement<ButtonProps>>[] = buttons.map((button) => ({\n    button,\n    isDanger: button.props.variant === 'danger',\n    value: button,\n  }));\n\n  return (\n    <MenuPopover triggerAccessibleLabel={triggerAccessibleLabel}>\n      {({ close, initialFocus }) => (\n        <MenuActionList\n          actions={actions}\n          initialFocus={initialFocus}\n          menuAccessibleLabel={menuAccessibleLabel}\n          onSelect={() => close()}\n          usesMenuSemantics\n        />\n      )}\n    </MenuPopover>\n  );\n}\n\nconst numericStyle = (style: CSSStyleDeclaration, property: keyof CSSStyleDeclaration) => {\n  const value = Number.parseFloat(String(style[property]));\n  return Number.isFinite(value) ? value : 0;\n};\n\nconst pixelStyle = (value: string) => {\n  if (!value.trim().endsWith('px')) return undefined;\n  const parsedValue = Number.parseFloat(value);\n  return Number.isFinite(parsedValue) ? parsedValue : undefined;\n};\n\ntype EmbeddedLayout = {\n  availableWidth: number;\n  parent: HTMLElement;\n  parentWidth: number;\n};\n\nconst availableWidthToRight = (\n  controls: HTMLDivElement,\n  previousLayout?: EmbeddedLayout\n): EmbeddedLayout | undefined => {\n  const parent = controls.parentElement;\n  if (!parent) return undefined;\n\n  const parentRect = parent.getBoundingClientRect();\n  const parentStyle = getComputedStyle(parent);\n  const parentWidth = parentRect.width || parent.clientWidth;\n  const contentLeft =\n    parentRect.left +\n    numericStyle(parentStyle, 'borderLeftWidth') +\n    numericStyle(parentStyle, 'paddingLeft');\n  const contentRight =\n    parentRect.left +\n    parentWidth -\n    numericStyle(parentStyle, 'borderRightWidth') -\n    numericStyle(parentStyle, 'paddingRight');\n  const precedingSiblings = Array.from(parent.children).slice(\n    0,\n    Array.from(parent.children).indexOf(controls)\n  );\n  const occupiedRight = precedingSiblings.reduce(\n    (right, sibling) => Math.max(right, sibling.getBoundingClientRect().right),\n    contentLeft\n  );\n  const gap = precedingSiblings.length > 0 ? numericStyle(parentStyle, 'columnGap') : 0;\n\n  const measuredAvailableWidth = Math.max(0, contentRight - occupiedRight - gap);\n  const parentWidthIncrease =\n    previousLayout?.parent === parent ? Math.max(0, parentWidth - previousLayout.parentWidth) : 0;\n\n  return {\n    availableWidth:\n      parentWidthIncrease > 0\n        ? Math.max(\n            measuredAvailableWidth,\n            (previousLayout?.availableWidth ?? 0) + parentWidthIncrease\n          )\n        : measuredAvailableWidth,\n    parent,\n    parentWidth,\n  };\n};\n\nexport const Controls = ({\n  children,\n  className,\n  maxVisibleButtons,\n  overflow,\n  overflowAccessibleLabel = 'More actions',\n  variant = 'default',\n  ...props\n}: ControlsProps) => {\n  const childArray = Children.toArray(children);\n  const buttons: React.ReactElement<ButtonProps>[] = [];\n  const nonButtons: React.ReactNode[] = [];\n\n  childArray.forEach((child) => {\n    if (isValidElement<ButtonProps>(child) && child.type === Button) {\n      buttons.push(child);\n    } else {\n      nonButtons.push(child);\n    }\n  });\n\n  const sortedButtons = buttons\n    .map((button, index) => ({ button, index, rank: getButtonRank(button) }))\n    .sort((a, b) => a.rank - b.rank || a.index - b.index)\n    .map(({ button, index }) =>\n      cloneElement(button, {\n        key: button.key ?? index,\n      })\n    );\n\n  const adaptive = variant === 'embedded' || (variant === 'fixed' && overflow === 'menu');\n  const normalizedMaxVisibleButtons =\n    typeof maxVisibleButtons === 'number' && Number.isFinite(maxVisibleButtons)\n      ? Math.floor(maxVisibleButtons)\n      : 0;\n  const visibleButtonLimit =\n    variant === 'embedded' && normalizedMaxVisibleButtons > 0\n      ? Math.min(sortedButtons.length, normalizedMaxVisibleButtons)\n      : sortedButtons.length;\n  const controlsRef = useRef<HTMLDivElement>(null);\n  const embeddedLayoutRef = useRef<EmbeddedLayout>(undefined);\n  const measurementRef = useRef<HTMLDivElement>(null);\n  const nonButtonsRef = useRef<HTMLSpanElement>(null);\n  const [visibleButtonCount, setVisibleButtonCount] = useState(visibleButtonLimit);\n\n  const updateOverflow = useCallback(() => {\n    if (!adaptive) {\n      setVisibleButtonCount(visibleButtonLimit);\n      return;\n    }\n\n    const controls = controlsRef.current;\n    const measurement = measurementRef.current;\n    if (!controls || !measurement) return;\n\n    const measurementButtons = Array.from(\n      measurement.querySelectorAll<HTMLElement>('[data-component=\"button\"]')\n    );\n    const trigger = measurementButtons.at(-1);\n    if (!trigger) return;\n\n    const buttonWidths = measurementButtons\n      .slice(0, sortedButtons.length)\n      .map((button) => button.getBoundingClientRect().width);\n    if (buttonWidths.length !== sortedButtons.length) return;\n\n    const style = getComputedStyle(controls);\n    const horizontalChrome =\n      numericStyle(style, 'paddingLeft') +\n      numericStyle(style, 'paddingRight') +\n      numericStyle(style, 'borderLeftWidth') +\n      numericStyle(style, 'borderRightWidth');\n    const configuredMaxWidth = pixelStyle(style.maxWidth);\n    const embeddedLayout =\n      variant === 'embedded'\n        ? availableWidthToRight(controls, embeddedLayoutRef.current)\n        : undefined;\n    if (embeddedLayout) embeddedLayoutRef.current = embeddedLayout;\n    const layoutWidth = embeddedLayout?.availableWidth ?? controls.parentElement?.clientWidth ?? 0;\n    const viewportWidth = window.visualViewport?.width ?? document.documentElement.clientWidth;\n    const outerAvailableWidth = Math.min(\n      ...[configuredMaxWidth, layoutWidth, viewportWidth].filter(\n        (width): width is number => typeof width === 'number' && Number.isFinite(width) && width > 0\n      )\n    );\n    if (!Number.isFinite(outerAvailableWidth)) return;\n\n    const availableWidth = Math.max(0, outerAvailableWidth - horizontalChrome);\n    const prefixWidth = nonButtonsRef.current?.getBoundingClientRect().width ?? 0;\n    const actionWidth = buttonWidths.reduce((total, width) => total + width, 0);\n\n    if (\n      visibleButtonLimit === sortedButtons.length &&\n      prefixWidth + actionWidth <= availableWidth\n    ) {\n      setVisibleButtonCount((current) =>\n        current === visibleButtonLimit ? current : visibleButtonLimit\n      );\n      return;\n    }\n\n    let usedWidth = prefixWidth + trigger.getBoundingClientRect().width;\n    let nextVisibleButtonCount = 0;\n    for (let index = 0; index < visibleButtonLimit; index += 1) {\n      if (usedWidth + buttonWidths[index] > availableWidth) break;\n      usedWidth += buttonWidths[index];\n      nextVisibleButtonCount = index + 1;\n    }\n\n    setVisibleButtonCount((current) =>\n      current === nextVisibleButtonCount ? current : nextVisibleButtonCount\n    );\n  }, [adaptive, sortedButtons.length, variant, visibleButtonLimit]);\n\n  useLayoutEffect(() => {\n    updateOverflow();\n\n    if (!adaptive) return undefined;\n\n    const observer =\n      typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateOverflow);\n    if (controlsRef.current) observer?.observe(controlsRef.current);\n    if (controlsRef.current?.parentElement) observer?.observe(controlsRef.current.parentElement);\n    if (variant === 'embedded' && controlsRef.current?.parentElement) {\n      Array.from(controlsRef.current.parentElement.children).forEach((sibling) => {\n        if (sibling !== controlsRef.current) observer?.observe(sibling);\n      });\n    }\n    if (nonButtonsRef.current) observer?.observe(nonButtonsRef.current);\n\n    window.addEventListener('resize', updateOverflow);\n    window.visualViewport?.addEventListener('resize', updateOverflow);\n    void document.fonts?.ready.then(updateOverflow);\n\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener('resize', updateOverflow);\n      window.visualViewport?.removeEventListener('resize', updateOverflow);\n    };\n  }, [adaptive, children, updateOverflow, variant]);\n\n  if (childArray.length === 0) {\n    return null;\n  }\n\n  const visibleButtons = adaptive ? sortedButtons.slice(0, visibleButtonCount) : sortedButtons;\n  const overflowedButtons = adaptive ? sortedButtons.slice(visibleButtonCount) : [];\n\n  return (\n    <div\n      data-component='controls'\n      data-dynamic-position={variant === 'fixed' ? true : undefined}\n      className={cx(styles.controls, variants[variant], adaptive && styles.adaptive, className)}\n      ref={controlsRef}\n      {...props}\n    >\n      {adaptive && (\n        <div\n          aria-hidden='true'\n          className={styles.measurement}\n          ref={measurementRef}\n        >\n          {sortedButtons.map((button, index) =>\n            cloneElement(button, {\n              'aria-hidden': true,\n              id: undefined,\n              key: `measure-${String(button.key ?? index)}`,\n              onClick: undefined,\n              ref: undefined,\n              tabIndex: -1,\n            })\n          )}\n          <MenuPopover triggerAccessibleLabel={overflowAccessibleLabel}>{null}</MenuPopover>\n        </div>\n      )}\n      {variant !== 'embedded' && nonButtons.length > 0 && (\n        <span\n          className={styles['non-button-content']}\n          ref={nonButtonsRef}\n        >\n          {nonButtons}\n        </span>\n      )}\n      {visibleButtons}\n      {overflowedButtons.length > 0 && (\n        <span className={styles['overflow-trigger']}>\n          <OverflowMenu\n            buttons={overflowedButtons}\n            menuAccessibleLabel={overflowAccessibleLabel}\n            triggerAccessibleLabel={overflowAccessibleLabel}\n          />\n        </span>\n      )}\n    </div>\n  );\n};\n"],"names":["buttonVariantOrder","primary","danger","secondary","tertiary","simple","variants","default","styles","embedded","fixed","inline","getButtonRank","button","props","variant","OverflowMenu","buttons","menuAccessibleLabel","triggerAccessibleLabel","actions","map","isDanger","value","jsx","MenuPopover","close","initialFocus","MenuActionList","numericStyle","style","property","Number","parseFloat","String","isFinite","pixelStyle","trim","endsWith","parsedValue","undefined","availableWidthToRight","controls","previousLayout","parent","parentElement","parentRect","getBoundingClientRect","parentStyle","getComputedStyle","parentWidth","width","clientWidth","contentLeft","left","contentRight","precedingSiblings","Array","from","children","slice","indexOf","occupiedRight","reduce","right","sibling","Math","max","gap","length","measuredAvailableWidth","parentWidthIncrease","availableWidth","Controls","className","maxVisibleButtons","overflow","overflowAccessibleLabel","childArray","Children","toArray","nonButtons","forEach","child","isValidElement","type","Button","push","sortedButtons","index","rank","sort","a","b","cloneElement","key","adaptive","normalizedMaxVisibleButtons","floor","visibleButtonLimit","min","controlsRef","useRef","embeddedLayoutRef","measurementRef","nonButtonsRef","visibleButtonCount","setVisibleButtonCount","useState","updateOverflow","useCallback","current","measurement","measurementButtons","querySelectorAll","trigger","at","buttonWidths","horizontalChrome","configuredMaxWidth","maxWidth","embeddedLayout","layoutWidth","viewportWidth","window","visualViewport","document","documentElement","outerAvailableWidth","filter","prefixWidth","actionWidth","total","usedWidth","nextVisibleButtonCount","useLayoutEffect","observer","ResizeObserver","observe","addEventListener","fonts","ready","then","disconnect","removeEventListener","visibleButtons","overflowedButtons","jsxs","cx","id","onClick","ref","tabIndex"],"mappings":";;;;;;;;;;;;;;;GAgBMA,KAAqB;AAAA,EACzBC,SAAS;AAAA,EACTC,QAAQ;AAAA,EACRC,WAAW;AAAA,EACXC,UAAU;AAAA,EACVC,QAAQ;AACV,GAEMC,KAAW;AAAA,EACfC,SAASC,EAAOD;AAAAA,EAChBE,UAAUD,EAAOC;AAAAA,EACjBC,OAAOF,EAAOE;AAAAA,EACdC,QAAQH,EAAOG;AACjB,GAUMC,KAAgBA,CAACC,MACrBb,GAAmBa,EAAOC,MAAMC,WAAW,WAAW;AAExD,SAASC,GAAa;AAAA,EACpBC,SAAAA;AAAAA,EACAC,qBAAAA;AAAAA,EACAC,wBAAAA;AAKF,GAAG;AACD,QAAMC,IAAyDH,EAAQI,IAAKR,CAAAA,OAAY;AAAA,IACtFA,QAAAA;AAAAA,IACAS,UAAUT,EAAOC,MAAMC,YAAY;AAAA,IACnCQ,OAAOV;AAAAA,EAAAA,EACP;AAEF,SACE,gBAAAW,EAACC,GAAA,EAAY,wBAAAN,GAA+C,kBAAA,gBACzD,UAAA,CAAC;AAAA,IAAEO,OAAAA;AAAAA,IAAOC,cAAAA;AAAAA,EAAAA,MACT,gBAAAH,EAACI,IAAA,EACC,SAAAR,GACA,cAAAO,GACA,qBAAAT,GACA,UAAU,MAAMQ,EAAAA,GAChB,mBAAiB,GAAA,CAAA,EAAA,CAGvB;AAEJ;AAEA,MAAMG,IAAeA,CAACC,GAA4BC,MAAwC;AACxF,QAAMR,IAAQS,OAAOC,WAAWC,OAAOJ,EAAMC,CAAQ,CAAC,CAAC;AACvD,SAAOC,OAAOG,SAASZ,CAAK,IAAIA,IAAQ;AAC1C,GAEMa,KAAaA,CAACb,MAAkB;AACpC,MAAI,CAACA,EAAMc,KAAAA,EAAOC,SAAS,IAAI,EAAG;AAClC,QAAMC,IAAcP,OAAOC,WAAWV,CAAK;AAC3C,SAAOS,OAAOG,SAASI,CAAW,IAAIA,IAAcC;AACtD,GAQMC,KAAwBA,CAC5BC,GACAC,MAC+B;AAC/B,QAAMC,IAASF,EAASG;AACxB,MAAI,CAACD,EAAQ;AAEb,QAAME,IAAaF,EAAOG,sBAAAA,GACpBC,IAAcC,iBAAiBL,CAAM,GACrCM,IAAcJ,EAAWK,SAASP,EAAOQ,aACzCC,IACJP,EAAWQ,OACXzB,EAAamB,GAAa,iBAAiB,IAC3CnB,EAAamB,GAAa,aAAa,GACnCO,IACJT,EAAWQ,OACXJ,IACArB,EAAamB,GAAa,kBAAkB,IAC5CnB,EAAamB,GAAa,cAAc,GACpCQ,IAAoBC,MAAMC,KAAKd,EAAOe,QAAQ,EAAEC,MACpD,GACAH,MAAMC,KAAKd,EAAOe,QAAQ,EAAEE,QAAQnB,CAAQ,CAC9C,GACMoB,IAAgBN,EAAkBO,OACtC,CAACC,GAAOC,MAAYC,KAAKC,IAAIH,GAAOC,EAAQlB,sBAAAA,EAAwBiB,KAAK,GACzEX,CACF,GACMe,IAAMZ,EAAkBa,SAAS,IAAIxC,EAAamB,GAAa,WAAW,IAAI,GAE9EsB,IAAyBJ,KAAKC,IAAI,GAAGZ,IAAeO,IAAgBM,CAAG,GACvEG,KACJ5B,KAAAA,gBAAAA,EAAgBC,YAAWA,IAASsB,KAAKC,IAAI,GAAGjB,IAAcP,EAAeO,WAAW,IAAI;AAE9F,SAAO;AAAA,IACLsB,gBACED,IAAsB,IAClBL,KAAKC,IACHG,KACC3B,KAAAA,gBAAAA,EAAgB6B,mBAAkB,KAAKD,CAC1C,IACAD;AAAAA,IACN1B,QAAAA;AAAAA,IACAM,aAAAA;AAAAA,EAAAA;AAEJ,GAEauB,KAAWA,CAAC;AAAA,EACvBd,UAAAA;AAAAA,EACAe,WAAAA;AAAAA,EACAC,mBAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,yBAAAA,IAA0B;AAAA,EAC1B9D,SAAAA,IAAU;AAAA,EACV,GAAGD;AACU,MAAM;AACnB,QAAMgE,IAAaC,EAASC,QAAQrB,CAAQ,GACtC1C,IAA6C,CAAA,GAC7CgE,IAAgC,CAAA;AAEtCH,EAAAA,EAAWI,QAASC,CAAAA,MAAU;AAC5B,IAAIC,GAA4BD,CAAK,KAAKA,EAAME,SAASC,KACvDrE,EAAQsE,KAAKJ,CAAK,IAElBF,EAAWM,KAAKJ,CAAK;AAAA,EAEzB,CAAC;AAED,QAAMK,IAAgBvE,EACnBI,IAAI,CAACR,GAAQ4E,OAAW;AAAA,IAAE5E,QAAAA;AAAAA,IAAQ4E,OAAAA;AAAAA,IAAOC,MAAM9E,GAAcC,CAAM;AAAA,EAAA,EAAI,EACvE8E,KAAK,CAACC,GAAGC,MAAMD,EAAEF,OAAOG,EAAEH,QAAQE,EAAEH,QAAQI,EAAEJ,KAAK,EACnDpE,IAAI,CAAC;AAAA,IAAER,QAAAA;AAAAA,IAAQ4E,OAAAA;AAAAA,EAAAA,MACdK,EAAajF,GAAQ;AAAA,IACnBkF,KAAKlF,EAAOkF,OAAON;AAAAA,EAAAA,CACpB,CACH,GAEIO,IAAWjF,MAAY,cAAeA,MAAY,WAAW6D,MAAa,QAC1EqB,IACJ,OAAOtB,KAAsB,YAAY3C,OAAOG,SAASwC,CAAiB,IACtET,KAAKgC,MAAMvB,CAAiB,IAC5B,GACAwB,IACJpF,MAAY,cAAckF,IAA8B,IACpD/B,KAAKkC,IAAIZ,EAAcnB,QAAQ4B,CAA2B,IAC1DT,EAAcnB,QACdgC,IAAcC,EAAuB,IAAI,GACzCC,IAAoBD,EAAuB9D,MAAS,GACpDgE,IAAiBF,EAAuB,IAAI,GAC5CG,IAAgBH,EAAwB,IAAI,GAC5C,CAACI,GAAoBC,CAAqB,IAAIC,GAAST,CAAkB,GAEzEU,IAAiBC,GAAY,MAAM;;AACvC,QAAI,CAACd,GAAU;AACbW,MAAAA,EAAsBR,CAAkB;AACxC;AAAA,IACF;AAEA,UAAMzD,IAAW2D,EAAYU,SACvBC,IAAcR,EAAeO;AACnC,QAAI,CAACrE,KAAY,CAACsE,EAAa;AAE/B,UAAMC,IAAqBxD,MAAMC,KAC/BsD,EAAYE,iBAA8B,2BAA2B,CACvE,GACMC,IAAUF,EAAmBG,GAAG,EAAE;AACxC,QAAI,CAACD,EAAS;AAEd,UAAME,IAAeJ,EAClBrD,MAAM,GAAG4B,EAAcnB,MAAM,EAC7BhD,IAAKR,CAAAA,MAAWA,EAAOkC,sBAAAA,EAAwBI,KAAK;AACvD,QAAIkE,EAAahD,WAAWmB,EAAcnB,OAAQ;AAElD,UAAMvC,IAAQmB,iBAAiBP,CAAQ,GACjC4E,IACJzF,EAAaC,GAAO,aAAa,IACjCD,EAAaC,GAAO,cAAc,IAClCD,EAAaC,GAAO,iBAAiB,IACrCD,EAAaC,GAAO,kBAAkB,GAClCyF,IAAqBnF,GAAWN,EAAM0F,QAAQ,GAC9CC,IACJ1G,MAAY,aACR0B,GAAsBC,GAAU6D,EAAkBQ,OAAO,IACzDvE;AACN,IAAIiF,QAAkCV,UAAUU;AAChD,UAAMC,KAAcD,KAAAA,gBAAAA,EAAgBjD,qBAAkB9B,IAAAA,EAASG,kBAATH,gBAAAA,EAAwBU,gBAAe,GACvFuE,MAAgBC,IAAAA,OAAOC,mBAAPD,gBAAAA,EAAuBzE,UAAS2E,SAASC,gBAAgB3E,aACzE4E,IAAsB9D,KAAKkC,IAC/B,GAAG,CAACmB,GAAoBG,GAAaC,CAAa,EAAEM,OAClD,CAAC9E,MAA2B,OAAOA,KAAU,YAAYnB,OAAOG,SAASgB,CAAK,KAAKA,IAAQ,CAC7F,CACF;AACA,QAAI,CAACnB,OAAOG,SAAS6F,CAAmB,EAAG;AAE3C,UAAMxD,IAAiBN,KAAKC,IAAI,GAAG6D,IAAsBV,CAAgB,GACnEY,MAAczB,IAAAA,EAAcM,YAAdN,gBAAAA,EAAuB1D,wBAAwBI,UAAS,GACtEgF,IAAcd,EAAatD,OAAO,CAACqE,GAAOjF,MAAUiF,IAAQjF,GAAO,CAAC;AAE1E,QACEgD,MAAuBX,EAAcnB,UACrC6D,IAAcC,KAAe3D,GAC7B;AACAmC,MAAAA,EAAuBI,CAAAA,MACrBA,MAAYZ,IAAqBY,IAAUZ,CAC7C;AACA;AAAA,IACF;AAEA,QAAIkC,IAAYH,IAAcf,EAAQpE,sBAAAA,EAAwBI,OAC1DmF,IAAyB;AAC7B,aAAS7C,IAAQ,GAAGA,IAAQU,KACtBkC,EAAAA,IAAYhB,EAAa5B,CAAK,IAAIjB,IADQiB,KAAS;AAEvD4C,MAAAA,KAAahB,EAAa5B,CAAK,GAC/B6C,IAAyB7C,IAAQ;AAGnCkB,IAAAA,EAAuBI,CAAAA,MACrBA,MAAYuB,IAAyBvB,IAAUuB,CACjD;AAAA,EACF,GAAG,CAACtC,GAAUR,EAAcnB,QAAQtD,GAASoF,CAAkB,CAAC;AA6BhE,MA3BAoC,GAAgB,MAAM;;AAGpB,QAFA1B,EAAAA,GAEI,CAACb,EAAU;AAEf,UAAMwC,IACJ,OAAOC,iBAAmB,MAAcjG,SAAY,IAAIiG,eAAe5B,CAAc;AACvF,WAAIR,EAAYU,YAASyB,KAAAA,QAAAA,EAAUE,QAAQrC,EAAYU,YACnDV,IAAAA,EAAYU,YAAZV,QAAAA,EAAqBxD,iCAAyB6F,QAAQrC,EAAYU,QAAQlE,iBAC1E9B,MAAY,gBAAcsF,IAAAA,EAAYU,YAAZV,QAAAA,EAAqBxD,kBACjDY,MAAMC,KAAK2C,EAAYU,QAAQlE,cAAcc,QAAQ,EAAEuB,QAASjB,CAAAA,MAAY;AAC1E,MAAIA,MAAYoC,EAAYU,YAASyB,KAAAA,QAAAA,EAAUE,QAAQzE;AAAAA,IACzD,CAAC,GAECwC,EAAcM,YAASyB,KAAAA,QAAAA,EAAUE,QAAQjC,EAAcM,WAE3Da,OAAOe,iBAAiB,UAAU9B,CAAc,IAChDe,IAAAA,OAAOC,mBAAPD,QAAAA,EAAuBe,iBAAiB,UAAU9B,KAC7CiB,IAAAA,SAASc,UAATd,QAAAA,EAAgBe,MAAMC,KAAKjC,IAEzB,MAAM;;AACX2B,MAAAA,KAAAA,QAAAA,EAAUO,cACVnB,OAAOoB,oBAAoB,UAAUnC,CAAc,IACnDe,IAAAA,OAAOC,mBAAPD,QAAAA,EAAuBoB,oBAAoB,UAAUnC;AAAAA,IACvD;AAAA,EACF,GAAG,CAACb,GAAUrC,GAAUkD,GAAgB9F,CAAO,CAAC,GAE5C+D,EAAWT,WAAW;AACxB,WAAO;AAGT,QAAM4E,IAAiBjD,IAAWR,EAAc5B,MAAM,GAAG8C,CAAkB,IAAIlB,GACzE0D,IAAoBlD,IAAWR,EAAc5B,MAAM8C,CAAkB,IAAI,CAAA;AAE/E,SACE,gBAAAyC,EAAC,OAAA,EACC,kBAAe,YACf,yBAAuBpI,MAAY,UAAU,KAAOyB,QACpD,WAAW4G,EAAG5I,EAAOkC,UAAUpC,GAASS,CAAO,GAAGiF,KAAYxF,EAAOwF,UAAUtB,CAAS,GACxF,KAAK2B,GACL,GAAIvF,GAEHkF,UAAAA;AAAAA,IAAAA,KACC,gBAAAmD,EAAC,SACC,eAAY,QACZ,WAAW3I,EAAOwG,aAClB,KAAKR,GAEJhB,UAAAA;AAAAA,MAAAA,EAAcnE,IAAI,CAACR,GAAQ4E,MAC1BK,EAAajF,GAAQ;AAAA,QACnB,eAAe;AAAA,QACfwI,IAAI7G;AAAAA,QACJuD,KAAK,WAAW7D,OAAOrB,EAAOkF,OAAON,CAAK,CAAC;AAAA,QAC3C6D,SAAS9G;AAAAA,QACT+G,KAAK/G;AAAAA,QACLgH,UAAU;AAAA,MAAA,CACX,CACH;AAAA,MACA,gBAAAhI,EAACC,GAAA,EAAY,wBAAwBoD,GAA0B,UAAA,KAAA,CAAK;AAAA,IAAA,GACtE;AAAA,IAED9D,MAAY,cAAckE,EAAWZ,SAAS,KAC7C,gBAAA7C,EAAC,QAAA,EACC,WAAWhB,EAAO,oBAAoB,GACtC,KAAKiG,GAEJxB,UAAAA,GACH;AAAA,IAEDgE;AAAAA,IACAC,EAAkB7E,SAAS,KAC1B,gBAAA7C,EAAC,QAAA,EAAK,WAAWhB,EAAO,kBAAkB,GACxC,UAAA,gBAAAgB,EAACR,MACC,SAASkI,GACT,qBAAqBrE,GACrB,wBAAwBA,GAAwB,EAAA,CAEpD;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/croppable/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index37.css');const d=require("react/jsx-runtime"),tt=require("../../classix-5H4IWnMA.cjs"),c=require("react"),mt=require("../button/index.cjs"),pt=require("../figure/index.cjs"),gt=require("../icon/index.cjs"),S=10,W=.1,Ot=.92,m=(h,x,R)=>Math.min(R,Math.max(x,h)),St=h=>new Promise((x,R)=>{const f=URL.createObjectURL(h),a=new globalThis.Image;a.onload=()=>{URL.revokeObjectURL(f),x(a)},a.onerror=()=>{URL.revokeObjectURL(f),R(new Error("croppable-image-load-failed"))},a.src=f}),Ut=async({file:h,fill:x,transform:R,viewport:f})=>{const a=await St(h),U=f.width/a.naturalWidth,M=f.height/a.naturalHeight,y=Math.max(U,M),H=a.naturalWidth*y,E=a.naturalHeight*y,Q=x==="width"?Math.max(W,U/y):x==="height"?Math.max(W,M/y):W,j=m(R.zoom,Q,S),w=y*j,b=H*j,N=E*j,p=(f.width-b)/2+R.offset.x,L=(f.height-N)/2+R.offset.y,I=m(-p/w,0,a.naturalWidth),T=m(-L/w,0,a.naturalHeight),v=m(f.width/w,1,Math.max(1,a.naturalWidth-I)),s=m(f.height/w,1,Math.max(1,a.naturalHeight-T)),_=document.createElement("canvas"),u=_.getContext("2d");if(!u)throw new Error("croppable-image-context-missing");_.width=Math.max(1,Math.round(v)),_.height=Math.max(1,Math.round(s)),u.drawImage(a,I,T,v,s,0,0,_.width,_.height);const P=h.type.startsWith("image/")?h.type:"image/jpeg",Y=await new Promise(q=>{_.toBlob(q,P,Ot)});if(!Y)throw new Error("croppable-image-export-failed");return new globalThis.File([Y],h.name,{lastModified:Date.now(),type:Y.type||P})},It="_croppable_1rdsr_1",Pt="_empty_1rdsr_14",Yt="_media_1rdsr_22",Xt="_overlay_1rdsr_33",At="_viewport_1rdsr_41",Dt="_draggable_1rdsr_53",Wt="_dragging_1rdsr_57",Ht="_inner_1rdsr_61",Zt="_standalone_1rdsr_77",z={croppable:It,empty:Pt,media:Yt,overlay:Xt,viewport:At,draggable:Dt,dragging:Wt,inner:Ht,standalone:Zt},kt=192,B={offset:{x:0,y:0},zoom:1},xt="Select image",Bt=({children:h,fill:x="none",height:R,image:f,label:a,onCroppableChange:U,onFileChange:M,onImageChange:y,onTransformChange:H,transform:E,standalone:Q})=>{const j=c.useRef(null),w=c.useRef(null),b=c.useRef(null),N=c.useRef(null),p=c.useRef(y),L=c.useRef(null),I=c.useRef(null),T=c.useRef(null),v=c.useRef(new Map),s=c.useRef(B),_=c.useRef(null),[u,P]=c.useState(null),[Y,q]=c.useState(null),[et,V]=c.useState(!1),[wt,nt]=c.useState(B),[F,rt]=c.useState(null),[g,yt]=c.useState({width:0,height:0}),Z=(()=>{const t=g.width,n=g.height;if(!t||!n)return{width:0,height:0,minZoom:W};if(!u)return{width:t,height:n,minZoom:W};const r=t/u.width,e=n/u.height,o=Math.max(r,e),i=x==="width"?r/o:x==="height"?e/o:0;return{width:u.width*o,height:u.height*o,minZoom:Math.max(W,i)}})(),X=Z.minZoom,k=E??wt,A=m(k.zoom,X,S),$=Y??f??null,ot=!h&&!!f&&!Y&&!F,G=!ot,ct=h??($?d.jsx("img",{alt:"",draggable:!1,onLoad:t=>{const n=t.currentTarget;n.naturalWidth&&n.naturalHeight&&P({width:n.naturalWidth,height:n.naturalHeight})},src:$}):null),D=ct==null,J=(t,n)=>{const{maxX:r,maxY:e}=it(n);return{x:m(t.x,-r,r),y:m(t.y,-e,e)}},st=(t,n)=>{const r=_.current;if(!r)return null;const e=r.getBoundingClientRect(),o=t-e.left-e.width/2,i=n-e.top-e.height/2;return{x:o,y:i}},bt=(t,n,r,e)=>{const o=m(n,X,S),i=m(r,X,S);if(o===0)return t;const l=i/o;return{x:(1-l)*e.x+l*t.x,y:(1-l)*e.y+l*t.y}},_t=(t,n,r)=>{const e=s.current.zoom,o=m(t,X,S),i=s.current.offset,l=r?bt(i,e,o,r):n,O=J(l,o);s.current={zoom:o,offset:O},E||nt({zoom:o,offset:O}),H==null||H({zoom:o,offset:O})},K=(t,n,r)=>{I.current={zoom:t,offset:n,anchor:r??null},w.current==null&&(w.current=window.requestAnimationFrame(()=>{w.current=null;const e=I.current;I.current=null;const o=(e==null?void 0:e.zoom)??s.current.zoom,i=(e==null?void 0:e.offset)??s.current.offset,l=(e==null?void 0:e.anchor)??null;_t(o,i,l)}))},zt=t=>{if(D||!G)return;const n=t.ctrlKey?.001:25e-5,r=s.current.zoom*Math.exp(-t.deltaY*n),e=st(t.clientX,t.clientY);K(r,s.current.offset,e)},it=t=>{const n=g.width,r=g.height;if(!n||!r)return{maxX:0,maxY:0};const e=m(t,X,S),o=Z.width*e,i=Z.height*e,l=Math.max(0,(o-n)/2),O=Math.max(0,(i-r)/2);return{maxX:l,maxY:O}},Rt=t=>{var o;const n=t.target,r=((o=n.files)==null?void 0:o[0])??null;if(L.current&&(URL.revokeObjectURL(L.current),L.current=null),!r){q(null),rt(null),M==null||M(null),n.value="";return}const e=URL.createObjectURL(r);L.current=e,q(e),P(null),rt(r),K(B.zoom,B.offset),s.current=B,M==null||M(r),n.value=""},Mt=t=>{if(!(D||!G||t.pointerType==="mouse"&&t.button!==0)){if(t.currentTarget.setPointerCapture(t.pointerId),t.pointerType==="touch"){const n=v.current;if(n.set(t.pointerId,{x:t.clientX,y:t.clientY}),n.size===2){b.current=null,j.current=null,V(!1);const[r,e]=Array.from(n.values());T.current=Math.hypot(r.x-e.x,r.y-e.y);return}}j.current=t.pointerId,b.current={x:t.clientX,y:t.clientY,originX:s.current.offset.x,originY:s.current.offset.y}}},Et=t=>{if(D||!G)return;if(t.pointerType==="touch"){const o=v.current;if(!o.has(t.pointerId))return;if(o.set(t.pointerId,{x:t.clientX,y:t.clientY}),o.size===2){const[i,l]=Array.from(o.values()),O=i.x-l.x,jt=i.y-l.y,ht=Math.hypot(O,jt),ft={x:(i.x+l.x)/2,y:(i.y+l.y)/2};if(T.current){const Lt=ht/T.current,Tt=s.current.zoom*Lt,vt=st(ft.x,ft.y);K(Tt,s.current.offset,vt)}T.current=ht;return}}if(j.current!==t.pointerId||!b.current||!C)return;const n=t.clientX-b.current.x,r=t.clientY-b.current.y,e=Math.abs(n)+Math.abs(r);!et&&e>2&&V(!0),!(e<=1)&&K(s.current.zoom,{x:b.current.originX+n,y:b.current.originY+r})},at=t=>{t.pointerType==="touch"&&(v.current.delete(t.pointerId),v.current.size<2&&(T.current=null)),j.current===t.pointerId&&(j.current=null,b.current=null,V(!1))};c.useEffect(()=>{if(!E)return;const t=m(E.zoom,X,S);s.current={zoom:t,offset:J(E.offset,t)}},[E,g.width,g.height,u==null?void 0:u.width,u==null?void 0:u.height]),c.useEffect(()=>()=>{L.current&&URL.revokeObjectURL(L.current)},[]),c.useEffect(()=>{const t=_.current;if(!t)return;const n=()=>{const o=t.getBoundingClientRect();yt(i=>i.width===o.width&&i.height===o.height?i:{width:o.width,height:o.height}),U&&U(o)};n();const r=()=>n();if(window.addEventListener("scroll",r,!0),typeof ResizeObserver>"u"){const o=()=>n();return window.addEventListener("resize",o),()=>{window.removeEventListener("resize",o),window.removeEventListener("scroll",r,!0)}}const e=new ResizeObserver(()=>n());return e.observe(t),()=>{e.disconnect(),window.removeEventListener("scroll",r,!0)}},[U]),c.useEffect(()=>{if(E)return;const t=s.current.offset,n=J(t,A);t.x===n.x&&t.y===n.y||(s.current={zoom:s.current.zoom,offset:n},nt(r=>({...r,offset:n})))},[A,u,g.width,g.height]),c.useEffect(()=>{$||P(null)},[$]),c.useEffect(()=>{p.current=y},[y]),c.useEffect(()=>{var r;if(!y)return;if(!F||!g.width||!g.height||h){(r=p.current)==null||r.call(p,null);return}let t=!0;const n=window.setTimeout(()=>{Ut({file:F,fill:x,transform:{zoom:A,offset:k.offset},viewport:g}).then(e=>{var o;t&&((o=p.current)==null||o.call(p,e))}).catch(()=>{var e;t&&((e=p.current)==null||e.call(p,null))})},75);return()=>{t=!1,window.clearTimeout(n)}},[h,A,k.offset,x,F,g]),c.useEffect(()=>()=>{w.current!=null&&(window.cancelAnimationFrame(w.current),w.current=null)},[]);const ut=it(A),C=!D&&G&&(ut.maxX>0||ut.maxY>0),lt=()=>{var t;return(t=N.current)==null?void 0:t.click()},dt=t=>{t.preventDefault(),t.stopPropagation(),lt()};return d.jsxs("div",{className:tt.t(z.croppable,Q&&z.standalone),onClick:()=>{D&&lt()},"data-component":"croppable",children:[d.jsx("input",{accept:"image/*",onChange:Rt,ref:N,type:"file"}),d.jsx("div",{className:z.viewport,ref:_,onDragStart:t=>t.preventDefault(),onPointerDown:Mt,onPointerMove:Et,onPointerUp:at,onPointerCancel:at,onWheel:zt,style:{"--croppable-height":`${R??kt}px`,"--croppable-zoom":A,"--croppable-x":`${k.offset.x}px`,"--croppable-y":`${k.offset.y}px`,...u?{"--croppable-image-width":`${Z.width}px`,"--croppable-image-height":`${Z.height}px`}:null},children:D?d.jsxs("div",{className:z.empty,children:[d.jsx(pt.Figure,{children:d.jsx(gt.Icon,{name:"image",size:"large"})}),d.jsx(mt.Button,{onClick:dt,children:a??xt})]}):d.jsxs("div",{className:tt.t(z.media,C&&z.draggable,C&&et&&z.dragging),children:[d.jsx("div",{className:tt.t(z.inner),children:ct}),ot&&d.jsx("div",{className:z.overlay,children:d.jsxs("div",{className:z.empty,children:[d.jsx(pt.Figure,{children:d.jsx(gt.Icon,{name:"image",size:"large"})}),d.jsx(mt.Button,{onClick:dt,children:a??xt})]})})]})})]})};exports.Croppable=Bt;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index35.css');const d=require("react/jsx-runtime"),tt=require("../../classix-5H4IWnMA.cjs"),c=require("react"),mt=require("../button/index.cjs"),pt=require("../figure/index.cjs"),gt=require("../icon/index.cjs"),O=10,A=.1,kt=.92,m=(h,x,R)=>Math.min(R,Math.max(x,h)),Ot=h=>new Promise((x,R)=>{const f=URL.createObjectURL(h),a=new globalThis.Image;a.onload=()=>{URL.revokeObjectURL(f),x(a)},a.onerror=()=>{URL.revokeObjectURL(f),R(new Error("croppable-image-load-failed"))},a.src=f}),St=async({file:h,fill:x,transform:R,viewport:f})=>{const a=await Ot(h),S=f.width/a.naturalWidth,M=f.height/a.naturalHeight,y=Math.max(S,M),D=a.naturalWidth*y,E=a.naturalHeight*y,Q=x==="width"?Math.max(A,S/y):x==="height"?Math.max(A,M/y):A,j=m(R.zoom,Q,O),w=y*j,b=D*j,B=E*j,p=(f.width-b)/2+R.offset.x,L=(f.height-B)/2+R.offset.y,U=m(-p/w,0,a.naturalWidth),T=m(-L/w,0,a.naturalHeight),v=m(f.width/w,1,Math.max(1,a.naturalWidth-U)),s=m(f.height/w,1,Math.max(1,a.naturalHeight-T)),_=document.createElement("canvas"),u=_.getContext("2d");if(!u)throw new Error("croppable-image-context-missing");_.width=Math.max(1,Math.round(v)),_.height=Math.max(1,Math.round(s)),u.drawImage(a,U,T,v,s,0,0,_.width,_.height);const I=h.type.startsWith("image/")?h.type:"image/jpeg",P=await new Promise(N=>{_.toBlob(N,I,kt)});if(!P)throw new Error("croppable-image-export-failed");return new globalThis.File([P],h.name,{lastModified:Date.now(),type:P.type||I})},Ut="_croppable_1kqo4_1",It="_empty_1kqo4_14",Pt="_media_1kqo4_22",qt="_overlay_1kqo4_33",Yt="_viewport_1kqo4_41",Xt="_draggable_1kqo4_53",At="_dragging_1kqo4_57",Dt="_inner_1kqo4_61",Wt="_standalone_1kqo4_77",z={croppable:Ut,empty:It,media:Pt,overlay:qt,viewport:Yt,draggable:Xt,dragging:At,inner:Dt,standalone:Wt},Ht=192,Z={offset:{x:0,y:0},zoom:1},xt="Select image",Zt=({children:h,fill:x="none",height:R,image:f,label:a,onCroppableChange:S,onFileChange:M,onImageChange:y,onTransformChange:D,transform:E,standalone:Q})=>{const j=c.useRef(null),w=c.useRef(null),b=c.useRef(null),B=c.useRef(null),p=c.useRef(y),L=c.useRef(null),U=c.useRef(null),T=c.useRef(null),v=c.useRef(new Map),s=c.useRef(Z),_=c.useRef(null),[u,I]=c.useState(null),[P,N]=c.useState(null),[et,V]=c.useState(!1),[wt,nt]=c.useState(Z),[F,ot]=c.useState(null),[g,yt]=c.useState({width:0,height:0}),W=(()=>{const t=g.width,n=g.height;if(!t||!n)return{width:0,height:0,minZoom:A};if(!u)return{width:t,height:n,minZoom:A};const o=t/u.width,e=n/u.height,r=Math.max(o,e),i=x==="width"?o/r:x==="height"?e/r:0;return{width:u.width*r,height:u.height*r,minZoom:Math.max(A,i)}})(),q=W.minZoom,H=E??wt,Y=m(H.zoom,q,O),$=P??f??null,rt=!h&&!!f&&!P&&!F,G=!rt,ct=h??($?d.jsx("img",{alt:"",draggable:!1,onLoad:t=>{const n=t.currentTarget;n.naturalWidth&&n.naturalHeight&&I({width:n.naturalWidth,height:n.naturalHeight})},src:$}):null),X=ct==null,J=(t,n)=>{const{maxX:o,maxY:e}=it(n);return{x:m(t.x,-o,o),y:m(t.y,-e,e)}},st=(t,n)=>{const o=_.current;if(!o)return null;const e=o.getBoundingClientRect(),r=t-e.left-e.width/2,i=n-e.top-e.height/2;return{x:r,y:i}},bt=(t,n,o,e)=>{const r=m(n,q,O),i=m(o,q,O);if(r===0)return t;const l=i/r;return{x:(1-l)*e.x+l*t.x,y:(1-l)*e.y+l*t.y}},_t=(t,n,o)=>{const e=s.current.zoom,r=m(t,q,O),i=s.current.offset,l=o?bt(i,e,r,o):n,k=J(l,r);s.current={zoom:r,offset:k},E||nt({zoom:r,offset:k}),D==null||D({zoom:r,offset:k})},K=(t,n,o)=>{U.current={zoom:t,offset:n,anchor:o??null},w.current==null&&(w.current=window.requestAnimationFrame(()=>{w.current=null;const e=U.current;U.current=null;const r=(e==null?void 0:e.zoom)??s.current.zoom,i=(e==null?void 0:e.offset)??s.current.offset,l=(e==null?void 0:e.anchor)??null;_t(r,i,l)}))},zt=t=>{if(X||!G)return;const n=t.ctrlKey?.001:25e-5,o=s.current.zoom*Math.exp(-t.deltaY*n),e=st(t.clientX,t.clientY);K(o,s.current.offset,e)},it=t=>{const n=g.width,o=g.height;if(!n||!o)return{maxX:0,maxY:0};const e=m(t,q,O),r=W.width*e,i=W.height*e,l=Math.max(0,(r-n)/2),k=Math.max(0,(i-o)/2);return{maxX:l,maxY:k}},Rt=t=>{var r;const n=t.target,o=((r=n.files)==null?void 0:r[0])??null;if(L.current&&(URL.revokeObjectURL(L.current),L.current=null),!o){N(null),ot(null),M==null||M(null),n.value="";return}const e=URL.createObjectURL(o);L.current=e,N(e),I(null),ot(o),K(Z.zoom,Z.offset),s.current=Z,M==null||M(o),n.value=""},Mt=t=>{if(!(X||!G||t.pointerType==="mouse"&&t.button!==0)){if(t.currentTarget.setPointerCapture(t.pointerId),t.pointerType==="touch"){const n=v.current;if(n.set(t.pointerId,{x:t.clientX,y:t.clientY}),n.size===2){b.current=null,j.current=null,V(!1);const[o,e]=Array.from(n.values());T.current=Math.hypot(o.x-e.x,o.y-e.y);return}}j.current=t.pointerId,b.current={x:t.clientX,y:t.clientY,originX:s.current.offset.x,originY:s.current.offset.y}}},Et=t=>{if(X||!G)return;if(t.pointerType==="touch"){const r=v.current;if(!r.has(t.pointerId))return;if(r.set(t.pointerId,{x:t.clientX,y:t.clientY}),r.size===2){const[i,l]=Array.from(r.values()),k=i.x-l.x,jt=i.y-l.y,ht=Math.hypot(k,jt),ft={x:(i.x+l.x)/2,y:(i.y+l.y)/2};if(T.current){const Lt=ht/T.current,Tt=s.current.zoom*Lt,vt=st(ft.x,ft.y);K(Tt,s.current.offset,vt)}T.current=ht;return}}if(j.current!==t.pointerId||!b.current||!C)return;const n=t.clientX-b.current.x,o=t.clientY-b.current.y,e=Math.abs(n)+Math.abs(o);!et&&e>2&&V(!0),!(e<=1)&&K(s.current.zoom,{x:b.current.originX+n,y:b.current.originY+o})},at=t=>{t.pointerType==="touch"&&(v.current.delete(t.pointerId),v.current.size<2&&(T.current=null)),j.current===t.pointerId&&(j.current=null,b.current=null,V(!1))};c.useEffect(()=>{if(!E)return;const t=m(E.zoom,q,O);s.current={zoom:t,offset:J(E.offset,t)}},[E,g.width,g.height,u==null?void 0:u.width,u==null?void 0:u.height]),c.useEffect(()=>()=>{L.current&&URL.revokeObjectURL(L.current)},[]),c.useEffect(()=>{const t=_.current;if(!t)return;const n=()=>{const r=t.getBoundingClientRect();yt(i=>i.width===r.width&&i.height===r.height?i:{width:r.width,height:r.height}),S&&S(r)};n();const o=()=>n();if(window.addEventListener("scroll",o,!0),typeof ResizeObserver>"u"){const r=()=>n();return window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r),window.removeEventListener("scroll",o,!0)}}const e=new ResizeObserver(()=>n());return e.observe(t),()=>{e.disconnect(),window.removeEventListener("scroll",o,!0)}},[S]),c.useEffect(()=>{if(E)return;const t=s.current.offset,n=J(t,Y);t.x===n.x&&t.y===n.y||(s.current={zoom:s.current.zoom,offset:n},nt(o=>({...o,offset:n})))},[Y,u,g.width,g.height]),c.useEffect(()=>{$||I(null)},[$]),c.useEffect(()=>{p.current=y},[y]),c.useEffect(()=>{var o;if(!y)return;if(!F||!g.width||!g.height||h){(o=p.current)==null||o.call(p,null);return}let t=!0;const n=window.setTimeout(()=>{St({file:F,fill:x,transform:{zoom:Y,offset:H.offset},viewport:g}).then(e=>{var r;t&&((r=p.current)==null||r.call(p,e))}).catch(()=>{var e;t&&((e=p.current)==null||e.call(p,null))})},75);return()=>{t=!1,window.clearTimeout(n)}},[h,Y,H.offset,x,F,g]),c.useEffect(()=>()=>{w.current!=null&&(window.cancelAnimationFrame(w.current),w.current=null)},[]);const ut=it(Y),C=!X&&G&&(ut.maxX>0||ut.maxY>0),lt=()=>{var t;return(t=B.current)==null?void 0:t.click()},dt=t=>{t.preventDefault(),t.stopPropagation(),lt()};return d.jsxs("div",{className:tt.t(z.croppable,Q&&z.standalone),onClick:()=>{X&&lt()},"data-component":"croppable",children:[d.jsx("input",{accept:"image/*",onChange:Rt,ref:B,type:"file"}),d.jsx("div",{className:z.viewport,ref:_,onDragStart:t=>t.preventDefault(),onPointerDown:Mt,onPointerMove:Et,onPointerUp:at,onPointerCancel:at,onWheel:zt,style:{"--croppable-height":`${R??Ht}px`,"--croppable-zoom":Y,"--croppable-x":`${H.offset.x}px`,"--croppable-y":`${H.offset.y}px`,...u?{"--croppable-image-width":`${W.width}px`,"--croppable-image-height":`${W.height}px`}:null},children:X?d.jsxs("div",{className:z.empty,children:[d.jsx(pt.Figure,{children:d.jsx(gt.Icon,{name:"image",size:"large"})}),d.jsx(mt.Button,{onClick:dt,children:a??xt})]}):d.jsxs("div",{className:tt.t(z.media,C&&z.draggable,C&&et&&z.dragging),children:[d.jsx("div",{className:tt.t(z.inner),children:ct}),rt&&d.jsx("div",{className:z.overlay,children:d.jsxs("div",{className:z.empty,children:[d.jsx(pt.Figure,{children:d.jsx(gt.Icon,{name:"image",size:"large"})}),d.jsx(mt.Button,{onClick:dt,children:a??xt})]})})]})})]})};exports.Croppable=Zt;
 //# sourceMappingURL=index.cjs.map