@namroodinc/liquid-editorial 0.1.5 → 0.1.7

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_Fragment","Icon","Fragment$1","cx","parts","matches","query","item","Thumb","EntryPicker","internal","setInternal","useState","defaultValue","selected","value","isOpen","setOpen","setQuery","byId","useMemo","items","results","atMax","mode","max","commit","isDisabled","next","onValueChange","toggle","id","chosen","canReorder","isReorderable","row","className","label","Badge","emptyLabel","SortableList","SortableListItem","Button","addLabel","Modal","SearchField","event","isSelected","isBlocked"],"sources":["../../../src/components/EntryPicker/index.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport { Badge } from \"../Badge\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Modal } from \"../Modal\";\nimport { SearchField } from \"../SearchField\";\nimport { SortableList, SortableListItem } from \"../SortableList\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface EntryItem {\n  id: string;\n  title: string;\n  /** Second line — a content type, a path, a file size. */\n  subtitle?: string;\n  /** Main image: an asset thumbnail, or the entry's hero. */\n  imageUrl?: string;\n  /** Words the search matches on top of the title and subtitle. */\n  keywords?: string[];\n  isDisabled?: boolean;\n}\n\nexport type EntryPickerMode = \"single\" | \"multiple\";\n\nexport interface EntryPickerProps {\n  items: EntryItem[];\n  /** Selected ids, in the order they will be stored. */\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n  mode?: EntryPickerMode;\n  /** Cap a multiple selection. Reaching it disables the unpicked rows. */\n  max?: number;\n  label?: string;\n  /** Copy shown when nothing is picked yet. */\n  emptyLabel?: string;\n  addLabel?: string;\n  /** Multiple selections are reorderable by default — the stored order is the shown order. */\n  isReorderable?: boolean;\n  isDisabled?: boolean;\n  className?: string;\n}\n\nfunction matches(item: EntryItem, query: string) {\n  if (!query) return true;\n  const haystack = [item.title, item.subtitle, ...(item.keywords ?? [])]\n    .filter(Boolean)\n    .join(\" \")\n    .toLowerCase();\n  return haystack.includes(query.toLowerCase());\n}\n\nfunction Thumb({ item }: { item: EntryItem }) {\n  return (\n    <span className=\"ds-entry__thumb\">\n      {item.imageUrl ? (\n        <img src={item.imageUrl} alt=\"\" loading=\"lazy\" />\n      ) : (\n        <Icon name=\"file-text\" size={20} />\n      )}\n    </span>\n  );\n}\n\n/**\n * Pick entries or assets out of a list. Search narrows it, a row toggles,\n * and a multiple selection keeps — and reorders — the order you chose.\n */\nexport function EntryPicker({\n  items,\n  value,\n  defaultValue = [],\n  onValueChange,\n  mode = \"multiple\",\n  max,\n  label = \"Entries\",\n  emptyLabel = \"Nothing selected yet.\",\n  addLabel = \"Choose entries\",\n  isReorderable = true,\n  isDisabled = false,\n  className,\n}: EntryPickerProps) {\n  const [internal, setInternal] = useState<string[]>(defaultValue);\n  const selected = value ?? internal;\n  const [isOpen, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n\n  const byId = useMemo(() => new Map(items.map((item) => [item.id, item])), [items]);\n  const results = useMemo(() => items.filter((item) => matches(item, query)), [items, query]);\n  const atMax = mode === \"multiple\" && max !== undefined && selected.length >= max;\n\n  const commit = (next: string[]) => {\n    if (isDisabled) return;\n    if (value === undefined) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  const toggle = (id: string) => {\n    if (mode === \"single\") {\n      commit(selected[0] === id ? [] : [id]);\n      setOpen(false);\n      return;\n    }\n    if (selected.includes(id)) commit(selected.filter((item) => item !== id));\n    else if (!atMax) commit([...selected, id]);\n  };\n\n  const chosen = selected.map((id) => byId.get(id) ?? { id, title: id });\n  const canReorder = !isDisabled && isReorderable && mode === \"multiple\" && chosen.length > 1;\n\n  const row = (item: EntryItem): ReactNode => (\n    <>\n      <Thumb item={item} />\n      <span className=\"ds-entry__body\">\n        <span className=\"ds-entry__title\">{item.title}</span>\n        {item.subtitle && <span className=\"ds-entry__subtitle\">{item.subtitle}</span>}\n      </span>\n    </>\n  );\n\n  return (\n    <div className={cx(\"ds-entry-picker\", className)}>\n      <div className=\"ds-entry-picker__head\">\n        <span className=\"ds-entry-picker__label\">{label}</span>\n        <Badge shape=\"count\">{selected.length}</Badge>\n      </div>\n\n      {chosen.length === 0 ? (\n        <p className=\"ds-entry-picker__empty\">{emptyLabel}</p>\n      ) : canReorder ? (\n        <SortableList\n          items={selected}\n          onReorder={commit}\n          renderDragOverlay={(id) => {\n            const item = byId.get(id);\n            return item ? <div className=\"ds-entry\">{row(item)}</div> : null;\n          }}\n        >\n          {chosen.map((item) => (\n            <SortableListItem\n              key={item.id}\n              id={item.id}\n              label={item.title}\n              action={\n                <Button\n                  variant=\"simple\"\n                  size=\"sm\"\n                  isIconOnly\n                  iconStart=\"x\"\n                  aria-label={`Remove ${item.title}`}\n                  isDisabled={isDisabled}\n                  onClick={() => commit(selected.filter((id) => id !== item.id))}\n                />\n              }\n            >\n              <div className=\"ds-entry\">{row(item)}</div>\n            </SortableListItem>\n          ))}\n        </SortableList>\n      ) : (\n        <ul className=\"ds-entry-picker__list\">\n          {chosen.map((item) => (\n            <li key={item.id} className=\"ds-entry-picker__row\">\n              <div className=\"ds-entry\">{row(item)}</div>\n              <Button\n                variant=\"simple\"\n                size=\"sm\"\n                isIconOnly\n                iconStart=\"x\"\n                aria-label={`Remove ${item.title}`}\n                isDisabled={isDisabled}\n                onClick={() => commit(selected.filter((id) => id !== item.id))}\n              />\n            </li>\n          ))}\n        </ul>\n      )}\n\n      <div className=\"ds-entry-picker__actions\">\n        <Button\n          variant=\"neutral\"\n          size=\"sm\"\n          iconStart=\"plus\"\n          isDisabled={isDisabled}\n          onClick={() => setOpen(true)}\n        >\n          {addLabel}\n        </Button>\n        {selected.length > 0 && (\n          <Button variant=\"simple\" size=\"sm\" isDisabled={isDisabled} onClick={() => commit([])}>\n            Clear\n          </Button>\n        )}\n      </div>\n\n      <Modal\n        isOpen={isOpen}\n        onClose={() => setOpen(false)}\n        title={addLabel}\n        description={\n          mode === \"single\"\n            ? \"Choose one entry.\"\n            : max !== undefined\n              ? `Choose up to ${max} entries.`\n              : \"Choose as many entries as you need.\"\n        }\n        footer={\n          <Button variant=\"primary\" onClick={() => setOpen(false)}>\n            Done\n          </Button>\n        }\n      >\n        <div className=\"ds-entry-picker__search\">\n          <SearchField\n            value={query}\n            placeholder=\"Search entries\"\n            onChange={(event) => setQuery(event.target.value)}\n            onClear={() => setQuery(\"\")}\n          />\n        </div>\n        <ul className=\"ds-entry-picker__results\">\n          {results.map((item) => {\n            const isSelected = selected.includes(item.id);\n            const isBlocked = isDisabled || item.isDisabled || (!isSelected && atMax);\n            return (\n              <li key={item.id}>\n                <button\n                  type=\"button\"\n                  className=\"ds-entry-picker__result\"\n                  aria-pressed={isSelected}\n                  disabled={isBlocked || undefined}\n                  onClick={() => toggle(item.id)}\n                >\n                  <div className=\"ds-entry\">{row(item)}</div>\n                  {isSelected && <Icon name=\"check\" size={20} />}\n                </button>\n              </li>\n            );\n          })}\n          {results.length === 0 && (\n            <li className=\"ds-entry-picker__no-results\">No entries match “{query}”.</li>\n          )}\n        </ul>\n      </Modal>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["_Fragment","Icon","Fragment$1","cx","parts","matches","query","item","Thumb","EntryPicker","internal","setInternal","useState","defaultValue","selected","value","isOpen","setOpen","setQuery","byId","useMemo","items","results","atMax","mode","max","commit","isDisabled","next","onValueChange","toggle","id","chosen","canReorder","isReorderable","row","className","label","Badge","emptyLabel","SortableList","SortableListItem","Button","addLabel","Modal","SearchField","event","isSelected","isBlocked"],"sources":["../../../src/components/EntryPicker/index.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport { Badge } from \"../Badge\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Modal } from \"../Modal\";\nimport { SearchField } from \"../SearchField\";\nimport { SortableList, SortableListItem } from \"../SortableList\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface EntryItem {\n  id: string;\n  title: string;\n  /** Second line — a content type, a path, a file size. */\n  subtitle?: string;\n  /** Main image: an asset thumbnail, or the entry's hero. */\n  imageUrl?: string;\n  /** Words the search matches on top of the title and subtitle. */\n  keywords?: string[];\n  isDisabled?: boolean;\n}\n\nexport type EntryPickerMode = \"single\" | \"multiple\";\n\nexport interface EntryPickerProps {\n  items: EntryItem[];\n  /** Selected ids, in the order they will be stored. */\n  value?: string[];\n  defaultValue?: string[];\n  onValueChange?: (value: string[]) => void;\n  mode?: EntryPickerMode;\n  /** Cap a multiple selection. Reaching it disables the unpicked rows. */\n  max?: number;\n  label?: string;\n  /** Copy shown when nothing is picked yet. */\n  emptyLabel?: string;\n  addLabel?: string;\n  /** Multiple selections are reorderable by default — the stored order is the shown order. */\n  isReorderable?: boolean;\n  isDisabled?: boolean;\n  className?: string;\n}\n\nfunction matches(item: EntryItem, query: string) {\n  if (!query) return true;\n  const haystack = [item.title, item.subtitle, ...(item.keywords ?? [])]\n    .filter(Boolean)\n    .join(\" \")\n    .toLowerCase();\n  return haystack.includes(query.toLowerCase());\n}\n\nfunction Thumb({ item }: { item: EntryItem }) {\n  return (\n    <span className=\"ds-entry__thumb\">\n      {item.imageUrl ? (\n        <img src={item.imageUrl} alt=\"\" loading=\"lazy\" />\n      ) : (\n        <Icon name=\"file-text\" size={20} />\n      )}\n    </span>\n  );\n}\n\n/**\n * Pick entries or assets out of a list. Search narrows it, a row toggles,\n * and a multiple selection keeps — and reorders — the order you chose.\n */\nexport function EntryPicker({\n  items,\n  value,\n  defaultValue = [],\n  onValueChange,\n  mode = \"multiple\",\n  max,\n  label = \"Entries\",\n  emptyLabel = \"Nothing selected yet.\",\n  addLabel = \"Choose entries\",\n  isReorderable = true,\n  isDisabled = false,\n  className,\n}: EntryPickerProps) {\n  const [internal, setInternal] = useState<string[]>(defaultValue);\n  const selected = value ?? internal;\n  const [isOpen, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n\n  const byId = useMemo(() => new Map(items.map((item) => [item.id, item])), [items]);\n  const results = useMemo(() => items.filter((item) => matches(item, query)), [items, query]);\n  const atMax = mode === \"multiple\" && max !== undefined && selected.length >= max;\n\n  const commit = (next: string[]) => {\n    if (isDisabled) return;\n    if (value === undefined) setInternal(next);\n    onValueChange?.(next);\n  };\n\n  const toggle = (id: string) => {\n    if (mode === \"single\") {\n      commit(selected[0] === id ? [] : [id]);\n      setOpen(false);\n      return;\n    }\n    if (selected.includes(id)) commit(selected.filter((item) => item !== id));\n    else if (!atMax) commit([...selected, id]);\n  };\n\n  const chosen = selected.map((id) => byId.get(id) ?? { id, title: id });\n  const canReorder = !isDisabled && isReorderable && mode === \"multiple\" && chosen.length > 1;\n\n  const row = (item: EntryItem): ReactNode => (\n    <>\n      <Thumb item={item} />\n      <span className=\"ds-entry__body\">\n        <span className=\"ds-entry__title\">{item.title}</span>\n        {item.subtitle && <span className=\"ds-entry__subtitle\">{item.subtitle}</span>}\n      </span>\n    </>\n  );\n\n  return (\n    <div className={cx(\"ds-entry-picker\", className)}>\n      <div className=\"ds-entry-picker__head\">\n        <span className=\"ds-entry-picker__label\">{label}</span>\n        <Badge shape=\"count\">{selected.length}</Badge>\n      </div>\n\n      {chosen.length === 0 ? (\n        <p className=\"ds-entry-picker__empty\">{emptyLabel}</p>\n      ) : canReorder ? (\n        <SortableList\n          items={selected}\n          onReorder={commit}\n          renderDragOverlay={(id) => {\n            const item = byId.get(id);\n            return item ? <div className=\"ds-entry\">{row(item)}</div> : null;\n          }}\n        >\n          {chosen.map((item) => (\n            <SortableListItem\n              key={item.id}\n              id={item.id}\n              label={item.title}\n              action={\n                <Button\n                  variant=\"simple\"\n                  size=\"sm\"\n                  isIconOnly\n                  iconStart=\"x\"\n                  aria-label={`Remove ${item.title}`}\n                  isDisabled={isDisabled}\n                  onClick={() => commit(selected.filter((id) => id !== item.id))}\n                />\n              }\n            >\n              <div className=\"ds-entry\">{row(item)}</div>\n            </SortableListItem>\n          ))}\n        </SortableList>\n      ) : (\n        <ul className=\"ds-entry-picker__list\">\n          {chosen.map((item) => (\n            <li key={item.id} className=\"ds-entry-picker__row\">\n              <div className=\"ds-entry\">{row(item)}</div>\n              <Button\n                variant=\"simple\"\n                size=\"sm\"\n                isIconOnly\n                iconStart=\"x\"\n                aria-label={`Remove ${item.title}`}\n                isDisabled={isDisabled}\n                onClick={() => commit(selected.filter((id) => id !== item.id))}\n              />\n            </li>\n          ))}\n        </ul>\n      )}\n\n      <div className=\"ds-entry-picker__actions\">\n        <Button\n          variant=\"neutral\"\n          size=\"sm\"\n          iconStart=\"plus\"\n          isDisabled={isDisabled}\n          onClick={() => setOpen(true)}\n        >\n          {addLabel}\n        </Button>\n        {selected.length > 0 && (\n          <Button variant=\"simple\" size=\"sm\" isDisabled={isDisabled} onClick={() => commit([])}>\n            Clear\n          </Button>\n        )}\n      </div>\n\n      <Modal\n        isOpen={isOpen}\n        onClose={() => setOpen(false)}\n        title={addLabel}\n        description={\n          mode === \"single\"\n            ? \"Choose one entry.\"\n            : max !== undefined\n              ? `Choose up to ${max} entries.`\n              : \"Choose as many entries as you need.\"\n        }\n        footer={\n          <Button variant=\"primary\" onClick={() => setOpen(false)}>\n            Done\n          </Button>\n        }\n      >\n        <div className=\"ds-entry-picker__search\">\n          <SearchField\n            value={query}\n            placeholder=\"Search entries\"\n            onChange={(event) => setQuery(event.target.value)}\n            onClear={() => setQuery(\"\")}\n          />\n        </div>\n        <ul className=\"ds-entry-picker__results\">\n          {results.map((item) => {\n            const isSelected = selected.includes(item.id);\n            const isBlocked = isDisabled || item.isDisabled || (!isSelected && atMax);\n            return (\n              <li key={item.id}>\n                <Button\n                  variant={isSelected ? \"active\" : \"simple\"}\n                  size=\"lg\"\n                  className=\"ds-entry-picker__result\"\n                  aria-pressed={isSelected}\n                  isDisabled={Boolean(isBlocked)}\n                  onClick={() => toggle(item.id)}\n                >\n                  <span className=\"ds-entry\">{row(item)}</span>\n                  {isSelected && <Icon name=\"check\" size={20} />}\n                </Button>\n              </li>\n            );\n          })}\n          {results.length === 0 && (\n            <li className=\"ds-entry-picker__no-results\">No entries match “{query}”.</li>\n          )}\n        </ul>\n      </Modal>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/EntryPicker/style.css

@@ -119,39 +119,12 @@
     list-style: none;
   }
 
-  .ds-entry-picker__result {
-    display: flex;
-    align-items: center;
+  .ds-entry-picker__result.ds-button {
     justify-content: space-between;
-    gap: var(--space-3);
     inline-size: 100%;
-    padding: var(--space-2) var(--space-3);
-    border: var(--control-border-width) solid transparent;
-    border-radius: var(--radius-md);
-    background: transparent;
-    color: var(--color-text);
+    height: auto;
+    min-block-size: var(--field-height-lg);
     text-align: start;
-    cursor: pointer;
-    transition: background-color var(--duration-fast) var(--ease-standard);
-  }
-
-  .ds-entry-picker__result:hover:not(:disabled) {
-    background: var(--field-hover);
-  }
-
-  .ds-entry-picker__result:focus-visible {
-    outline: var(--control-border-width) solid var(--color-focus);
-    outline-offset: 2px;
-  }
-
-  .ds-entry-picker__result[aria-pressed="true"] {
-    background: var(--color-primary-soft);
-    box-shadow: inset var(--rail-width) 0 0 0 var(--rail-color);
-  }
-
-  .ds-entry-picker__result:disabled {
-    opacity: 45%;
-    cursor: not-allowed;
   }
 
   .ds-entry-picker__no-results {

package/dist/components/Field/style.css

@@ -11,6 +11,11 @@
     transition: background-color var(--duration-fast) var(--ease-standard);
   }
 
+  .ds-button.ds-field-skin {
+    font-weight: var(--font-weight-regular);
+    line-height: normal;
+  }
+
   .ds-field-skin::placeholder {
     color: var(--color-text-muted);
   }
@@ -43,19 +48,22 @@
     cursor: default;
   }
 
-  input.ds-field-skin[data-size="sm"] {
+  input.ds-field-skin[data-size="sm"],
+  .ds-button.ds-field-skin[data-size="sm"] {
     block-size: var(--field-height-sm);
     padding: 0 10px;
     font-size: var(--field-font-size-sm);
   }
 
-  input.ds-field-skin[data-size="md"] {
+  input.ds-field-skin[data-size="md"],
+  .ds-button.ds-field-skin[data-size="md"] {
     block-size: var(--field-height-md);
     padding: 0 10px;
     font-size: var(--field-font-size-md);
   }
 
-  input.ds-field-skin[data-size="lg"] {
+  input.ds-field-skin[data-size="lg"],
+  .ds-button.ds-field-skin[data-size="lg"] {
     block-size: var(--field-height-lg);
     padding: 0 10px;
     font-size: var(--field-font-size-md);

package/dist/components/ImageCropper/index.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../Button/index.cjs"),t=require("../ButtonGroup/index.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=[{label:`1:1`,value:1},{label:`4:5`,value:4/5},{label:`4:3`,value:4/3},{label:`16:9`,value:16/9}],a=1,o={offsetX:0,offsetY:0,zoom:1,rotation:0},s=(0,n.forwardRef)(function({src:i,alt:s=``,aspect:c=1,ratios:l,onAspectChange:u,maxZoom:d=3,rotatable:f=!0,onChange:p,className:m,...h},g){let _=(0,n.useRef)(null),[v,y]=(0,n.useState)({width:0,height:0}),[b,x]=(0,n.useState)({width:0,height:0}),[S,C]=(0,n.useState)(o),[w,T]=(0,n.useState)(c),E=(0,n.useRef)(null),D=(0,n.useRef)(null);(0,n.useEffect)(()=>{T(c),C(e=>({...o,rotation:e.rotation}))},[c]);let O=e=>{T(e),C(e=>({...o,rotation:e.rotation})),u?.(e)},k=e=>C(t=>({...o,rotation:(t.rotation+e+360)%360})),A=(0,n.useCallback)(e=>{e.naturalWidth&&(x({width:e.naturalWidth,height:e.naturalHeight}),C(o))},[]);(0,n.useEffect)(()=>{let e=D.current;e?.complete&&A(e)},[A,i]);let j=S.rotation%180!=0,M={width:j?b.height:b.width,height:j?b.width:b.height},N=M.width&&v.width?Math.max(v.width/M.width,v.height/M.height):0,P=N*S.zoom,F=P?Math.max(0,(M.width*P-v.width)/2):0,I=P?Math.max(0,(M.height*P-v.height)/2):0;(0,n.useLayoutEffect)(()=>{let e=_.current;if(!e)return;let t=()=>y({width:e.clientWidth,height:e.clientHeight});t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[]);let L=(0,n.useCallback)(e=>{let t=N*e.zoom,n=t?Math.max(0,(M.width*t-v.width)/2):0,r=t?Math.max(0,(M.height*t-v.height)/2):0;return{rotation:e.rotation,zoom:Math.min(d,Math.max(a,e.zoom)),offsetX:Math.min(n,Math.max(-n,e.offsetX)),offsetY:Math.min(r,Math.max(-r,e.offsetY))}},[N,d,M.height,M.width,v.height,v.width]);(0,n.useEffect)(()=>{if(!P||!v.width)return;let e=v.width/P,t=v.height/P;p?.({x:Math.round(M.width/2-S.offsetX/P-e/2),y:Math.round(M.height/2-S.offsetY/P-t/2),width:Math.round(e),height:Math.round(t)},S)},[P,v.width,v.height,M.width,M.height,S]);let R=e=>{e.button===0&&(E.current={pointerId:e.pointerId,x:e.clientX,y:e.clientY},e.currentTarget.setPointerCapture(e.pointerId))},z=e=>{let t=E.current;if(!t||t.pointerId!==e.pointerId)return;let n=e.clientX-t.x,r=e.clientY-t.y;E.current={...t,x:e.clientX,y:e.clientY},C(e=>L({...e,offsetX:e.offsetX+n,offsetY:e.offsetY+r}))},B=e=>{E.current?.pointerId===e.pointerId&&(E.current=null,e.currentTarget.releasePointerCapture?.(e.pointerId))},V=(e,t)=>C(n=>L({...n,offsetX:n.offsetX+e,offsetY:n.offsetY+t}));return(0,r.jsxs)(`div`,{ref:g,className:[`ds-cropper`,m].filter(Boolean).join(` `),...h,children:[l&&l.length>1&&(0,r.jsx)(t.ButtonGroup,{"aria-label":`Crop ratio`,className:`ds-cropper__ratios`,children:l.map(t=>(0,r.jsx)(e.Button,{size:`sm`,variant:t.value===w?`active`:`neutral`,"aria-pressed":t.value===w,onClick:()=>O(t.value),children:t.label},t.label))}),(0,r.jsxs)(`div`,{role:`application`,"aria-label":`Crop area — drag to reposition, arrow keys to nudge`,tabIndex:0,className:`ds-cropper__stage`,style:{"--cropper-aspect":String(w)},onPointerDown:R,onPointerMove:z,onPointerUp:B,onPointerCancel:B,onKeyDown:e=>{let t=e.shiftKey?24:8,n={ArrowLeft:[-t,0],ArrowRight:[t,0],ArrowUp:[0,-t],ArrowDown:[0,t]}[e.key];n&&(e.preventDefault(),V(n[0],n[1]))},children:[(0,r.jsx)(`img`,{ref:D,src:i,alt:s,draggable:!1,className:`ds-cropper__image`,onLoad:e=>A(e.currentTarget),style:{inlineSize:b.width*P||void 0,blockSize:b.height*P||void 0,transform:`translate(calc(-50% + ${S.offsetX}px), calc(-50% + ${S.offsetY}px)) rotate(${S.rotation}deg)`}}),(0,r.jsx)(`div`,{className:`ds-cropper__frame`,ref:_,"aria-hidden":`true`,children:(0,r.jsx)(`div`,{className:`ds-cropper__guides`})})]}),(0,r.jsxs)(`div`,{className:`ds-cropper__controls`,children:[(0,r.jsxs)(`label`,{className:`ds-cropper__zoom`,children:[(0,r.jsx)(`span`,{className:`ds-cropper__zoom-label`,children:`Zoom`}),(0,r.jsx)(`input`,{type:`range`,min:a,max:d,step:.01,value:S.zoom,className:`ds-cropper__slider`,onChange:e=>C(t=>L({...t,zoom:Number(e.target.value)}))}),(0,r.jsxs)(`span`,{className:`ds-cropper__value`,children:[S.zoom.toFixed(2),`×`]})]}),(0,r.jsxs)(t.ButtonGroup,{"aria-label":`Crop actions`,children:[f&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.Button,{size:`sm`,iconStart:`rotate-ccw`,"aria-label":`Rotate left`,onClick:()=>k(-90)}),(0,r.jsx)(e.Button,{size:`sm`,iconStart:`rotate-cw`,"aria-label":`Rotate right`,onClick:()=>k(90)})]}),(0,r.jsx)(e.Button,{size:`sm`,onClick:()=>C(o),children:`Reset`})]})]}),(0,r.jsxs)(`p`,{className:`ds-cropper__hint`,children:[`Drag the picture to reposition it. Nothing is written until you save —`,` `,F===0&&I===0?`at this zoom the whole picture is in frame.`:`the veiled edges are what gets trimmed.`]})]})});async function c(e,t,{outputWidth:n,rotation:r=0,type:i=`image/png`,quality:a=.92}={}){let o=new Image;o.crossOrigin=`anonymous`,o.src=e,await o.decode();let s=r%180!=0,c=document.createElement(`canvas`);c.width=s?o.naturalHeight:o.naturalWidth,c.height=s?o.naturalWidth:o.naturalHeight;let l=c.getContext(`2d`);if(!l)throw Error(`Canvas 2D context unavailable`);l.translate(c.width/2,c.height/2),l.rotate(r*Math.PI/180),l.drawImage(o,-o.naturalWidth/2,-o.naturalHeight/2);let u=n??t.width,d=Math.round(t.height/t.width*u),f=document.createElement(`canvas`);f.width=u,f.height=d;let p=f.getContext(`2d`);if(!p)throw Error(`Canvas 2D context unavailable`);return p.drawImage(c,t.x,t.y,t.width,t.height,0,0,u,d),new Promise((e,t)=>{f.toBlob(n=>n?e(n):t(Error(`Could not encode the crop`)),i,a)})}exports.ImageCropper=s,exports.cropRatios=i,exports.cropToBlob=c;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../Button/index.cjs"),t=require("../ButtonGroup/index.cjs"),n=require("../Field/index.cjs"),r=require("../Grid/index.cjs"),i=require("../Slider/index.cjs");let a=require("react"),o=require("react/jsx-runtime");var s=1,c={offsetX:0,offsetY:0,zoom:1,rotation:0},l=(0,a.forwardRef)(function({src:l,alt:u=``,aspect:d,maxZoom:f=3,rotatable:p=!0,onChange:m,className:h,...g},_){let v=(0,a.useRef)(null),[y,b]=(0,a.useState)({width:0,height:0}),[x,S]=(0,a.useState)({width:0,height:0}),[C,w]=(0,a.useState)(c),T=(0,a.useRef)(null),E=(0,a.useRef)(null);(0,a.useEffect)(()=>{w(e=>({...c,rotation:e.rotation}))},[d]);let D=e=>w(t=>({...c,rotation:(t.rotation+e+360)%360})),O=(0,a.useCallback)(e=>{e.naturalWidth&&(S({width:e.naturalWidth,height:e.naturalHeight}),w(c))},[]);(0,a.useEffect)(()=>{let e=E.current;e?.complete&&O(e)},[O,l]);let k=C.rotation%180!=0,A={width:k?x.height:x.width,height:k?x.width:x.height},j=A.width&&y.width?Math.max(y.width/A.width,y.height/A.height):0;(0,a.useLayoutEffect)(()=>{let e=v.current;if(!e)return;let t=()=>b({width:e.clientWidth,height:e.clientHeight});t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[d]);let M=(0,a.useCallback)(e=>{let t=Math.min(Math.max(s,f),Math.max(s,e.zoom)),n=j*t,r=n?Math.max(0,(A.width*n-y.width)/2):0,i=n?Math.max(0,(A.height*n-y.height)/2):0,a=Math.min(r,Math.max(-r,e.offsetX)),o=Math.min(i,Math.max(-i,e.offsetY));return t===e.zoom&&a===e.offsetX&&o===e.offsetY?e:{...e,zoom:t,offsetX:a,offsetY:o}},[j,f,A.height,A.width,y.height,y.width]),N=(0,a.useMemo)(()=>M(C),[M,C]);(0,a.useEffect)(()=>{w(N)},[N]);let P=j*N.zoom,F=P?Math.max(0,(A.width*P-y.width)/2):0,I=P?Math.max(0,(A.height*P-y.height)/2):0,L=`Drag the picture to reposition it. Nothing is written until you save — ${F===0&&I===0?`at this zoom the whole picture is in frame.`:`the veiled edges are what gets trimmed.`}`;(0,a.useEffect)(()=>{if(!P||!y.width)return;let e=Math.min(A.width,Math.round(y.width/P)),t=Math.min(A.height,Math.round(y.height/P));m?.({x:Math.max(0,Math.min(A.width-e,Math.round(A.width/2-N.offsetX/P-y.width/P/2))),y:Math.max(0,Math.min(A.height-t,Math.round(A.height/2-N.offsetY/P-y.height/P/2))),width:e,height:t},N)},[P,y.width,y.height,A.width,A.height,N]);let R=e=>{e.button===0&&(T.current={pointerId:e.pointerId,x:e.clientX,y:e.clientY},e.currentTarget.setPointerCapture(e.pointerId))},z=e=>{let t=T.current;if(!t||t.pointerId!==e.pointerId)return;let n=e.clientX-t.x,r=e.clientY-t.y;T.current={...t,x:e.clientX,y:e.clientY},w(e=>M({...e,offsetX:e.offsetX+n,offsetY:e.offsetY+r}))},B=e=>{T.current?.pointerId===e.pointerId&&(T.current=null,e.currentTarget.releasePointerCapture?.(e.pointerId))},V=(e,t)=>w(n=>M({...n,offsetX:n.offsetX+e,offsetY:n.offsetY+t}));return(0,o.jsxs)(r.Stack,{ref:_,className:[`ds-cropper`,h].filter(Boolean).join(` `),...g,children:[(0,o.jsxs)(`div`,{role:`application`,"aria-label":`Crop area — drag to reposition, arrow keys to nudge`,tabIndex:0,className:`ds-cropper__stage`,style:{"--cropper-aspect":String(d)},onPointerDown:R,onPointerMove:z,onPointerUp:B,onPointerCancel:B,onKeyDown:e=>{let t=e.shiftKey?24:8,n={ArrowLeft:[-t,0],ArrowRight:[t,0],ArrowUp:[0,-t],ArrowDown:[0,t]}[e.key];n&&(e.preventDefault(),V(n[0],n[1]))},children:[(0,o.jsx)(`img`,{ref:E,src:l,alt:u,draggable:!1,className:`ds-cropper__image`,onLoad:e=>O(e.currentTarget),style:{inlineSize:x.width*P||void 0,blockSize:x.height*P||void 0,transform:`translate(calc(-50% + ${N.offsetX}px), calc(-50% + ${N.offsetY}px)) rotate(${N.rotation}deg)`}}),(0,o.jsx)(`div`,{className:`ds-cropper__frame`,ref:v,"aria-hidden":`true`,children:(0,o.jsx)(`div`,{className:`ds-cropper__guides`})})]}),(0,o.jsx)(n.Field,{label:`Zoom`,hint:L,children:n=>(0,o.jsxs)(r.Stack,{direction:`horizontal`,gap:`md`,align:`center`,wrap:!0,children:[(0,o.jsx)(r.Stack,{style:{flex:`1 1 50%`,minInlineSize:0},children:(0,o.jsx)(i.Slider,{...n,min:s,max:Math.max(s,f),step:.01,value:N.zoom,suffix:`×`,onValueChange:e=>w(t=>M({...t,zoom:e}))})}),(0,o.jsxs)(t.ButtonGroup,{"aria-label":`Crop actions`,children:[p&&(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.Button,{size:`sm`,iconStart:`rotate-ccw`,"aria-label":`Rotate left`,onClick:()=>D(-90)}),(0,o.jsx)(e.Button,{size:`sm`,iconStart:`rotate-cw`,"aria-label":`Rotate right`,onClick:()=>D(90)})]}),(0,o.jsx)(e.Button,{size:`sm`,onClick:()=>w(c),children:`Reset`})]})]})})]})});async function u(e,t,{outputWidth:n,rotation:r=0,type:i=`image/png`,quality:a=.92}={}){let o=new Image;o.crossOrigin=`anonymous`,o.src=e,await o.decode();let s=r%180!=0,c=document.createElement(`canvas`);c.width=s?o.naturalHeight:o.naturalWidth,c.height=s?o.naturalWidth:o.naturalHeight;let l=c.getContext(`2d`);if(!l)throw Error(`Canvas 2D context unavailable`);l.translate(c.width/2,c.height/2),l.rotate(r*Math.PI/180),l.drawImage(o,-o.naturalWidth/2,-o.naturalHeight/2);let u=n??t.width,d=Math.round(t.height/t.width*u),f=document.createElement(`canvas`);f.width=u,f.height=d;let p=f.getContext(`2d`);if(!p)throw Error(`Canvas 2D context unavailable`);return p.drawImage(c,t.x,t.y,t.width,t.height,0,0,u,d),new Promise((e,t)=>{f.toBlob(n=>n?e(n):t(Error(`Could not encode the crop`)),i,a)})}exports.ImageCropper=l,exports.cropToBlob=u;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["forwardRef","useRef","useState","useCallback","ButtonGroup","Button","_Fragment","require_components_Button_index","require_components_ButtonGroup_index","react","react_jsx_runtime","cropRatios","MIN_ZOOM","REST","ImageCropper","rest","frameRef","frame","setFrame","natural","setNatural","state","setState","ratio","setRatio","aspect","dragRef","imageRef","prev","chooseRatio","next","onAspectChange","turn","by","adopt","img","src","quarter","view","baseScale","scale","maxOffsetX","maxOffsetY","node","measure","observer","clamp","nextScale","limitX","limitY","maxZoom","width","height","onChange","onPointerDown","event","onPointerMove","drag","dx","dy","endDrag","nudge","className","ratios","option","step","move","rotatable","cropToBlob","image","rotation","turned","turnedContext","outputWidth","crop","canvas","context","blob","resolve","reject","type","quality"],"sources":["../../../src/components/ImageCropper/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type PointerEvent as ReactPointerEvent,\n} from \"react\";\nimport { Button } from \"../Button\";\nimport { ButtonGroup } from \"../ButtonGroup\";\nimport \"./style.css\";\n\nexport interface CropRect {\n  /** Left edge of the crop, in the (rotated) image's own pixels. */\n  x: number;\n  /** Top edge of the crop, in the (rotated) image's own pixels. */\n  y: number;\n  width: number;\n  height: number;\n}\n\nexport interface CropState {\n  /** Pan, in stage pixels, from the centre. */\n  offsetX: number;\n  offsetY: number;\n  /** 1 is \"cover the crop window exactly\". */\n  zoom: number;\n  /** Quarter turns applied to the picture, clockwise: 0, 90, 180 or 270. */\n  rotation: number;\n}\n\n/** One offered output shape. `value` is width / height. */\nexport interface CropRatio {\n  label: string;\n  value: number;\n}\n\n/** The house set: square, portrait, landscape, wide. */\nexport const cropRatios: CropRatio[] = [\n  { label: \"1:1\", value: 1 },\n  { label: \"4:5\", value: 4 / 5 },\n  { label: \"4:3\", value: 4 / 3 },\n  { label: \"16:9\", value: 16 / 9 },\n];\n\nexport interface ImageCropperProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  src: string;\n  /** Describes the picture for people who cannot see the stage. */\n  alt?: string;\n  /** Output shape, width / height. 1 for an avatar, 16 / 9 for a hero. */\n  aspect?: number;\n  /**\n   * Offer the reader a choice of output shapes. Omit it — or pass one ratio —\n   * when the shape is fixed by the slot the picture is going into.\n   */\n  ratios?: CropRatio[];\n  /** Fires when the reader picks a different shape. */\n  onAspectChange?: (aspect: number) => void;\n  /** Highest allowed zoom. Past 3 the result is mush on most uploads. */\n  maxZoom?: number;\n  /** Offer the quarter-turn controls. */\n  rotatable?: boolean;\n  /** Fires on every pan, zoom, turn and reset, with the crop in image pixels. */\n  onChange?: (crop: CropRect, state: CropState) => void;\n}\n\nconst MIN_ZOOM = 1;\nconst REST: CropState = { offsetX: 0, offsetY: 0, zoom: 1, rotation: 0 };\n\n/**\n * Pan-and-zoom cropping over a fixed frame. The frame never moves — the\n * picture does — and the parts that fall outside it stay visible under a\n * veil, so the reader can see what they are trimming away.\n * Drag with a pointer, or focus the stage and use the arrow keys.\n */\nexport const ImageCropper = forwardRef<HTMLDivElement, ImageCropperProps>(\n  function ImageCropper(\n    {\n      src,\n      alt = \"\",\n      aspect = 1,\n      ratios,\n      onAspectChange,\n      maxZoom = 3,\n      rotatable = true,\n      onChange,\n      className,\n      ...rest\n    },\n    ref,\n  ) {\n    const frameRef = useRef<HTMLDivElement | null>(null);\n    const [frame, setFrame] = useState({ width: 0, height: 0 });\n    const [natural, setNatural] = useState({ width: 0, height: 0 });\n    const [state, setState] = useState<CropState>(REST);\n    const [ratio, setRatio] = useState(aspect);\n    const dragRef = useRef<{ pointerId: number; x: number; y: number } | null>(null);\n    const imageRef = useRef<HTMLImageElement | null>(null);\n\n    // The prop stays the source of truth when the caller drives the shape.\n    useEffect(() => {\n      setRatio(aspect);\n      setState((prev) => ({ ...REST, rotation: prev.rotation }));\n    }, [aspect]);\n\n    const chooseRatio = (next: number) => {\n      setRatio(next);\n      setState((prev) => ({ ...REST, rotation: prev.rotation }));\n      onAspectChange?.(next);\n    };\n\n    const turn = (by: number) =>\n      setState((prev) => ({ ...REST, rotation: (prev.rotation + by + 360) % 360 }));\n\n    /** Take the picture's own pixels and start from a centred, unzoomed view. */\n    const adopt = useCallback((img: HTMLImageElement) => {\n      if (!img.naturalWidth) return;\n      setNatural({ width: img.naturalWidth, height: img.naturalHeight });\n      setState(REST);\n    }, []);\n\n    // A cached or server-rendered image can already be decoded before React\n    // attaches onLoad, and then that event never fires.\n    useEffect(() => {\n      const img = imageRef.current;\n      if (img?.complete) adopt(img);\n    }, [adopt, src]);\n\n    // After a quarter turn the picture presents its other side to the frame.\n    const quarter = state.rotation % 180 !== 0;\n    const view = {\n      width: quarter ? natural.height : natural.width,\n      height: quarter ? natural.width : natural.height,\n    };\n\n    // The scale at which the image exactly covers the frame; zoom multiplies it.\n    const baseScale =\n      view.width && frame.width\n        ? Math.max(frame.width / view.width, frame.height / view.height)\n        : 0;\n    const scale = baseScale * state.zoom;\n    const maxOffsetX = scale ? Math.max(0, (view.width * scale - frame.width) / 2) : 0;\n    const maxOffsetY = scale ? Math.max(0, (view.height * scale - frame.height) / 2) : 0;\n\n    useLayoutEffect(() => {\n      const node = frameRef.current;\n      if (!node) return;\n      const measure = () =>\n        setFrame({ width: node.clientWidth, height: node.clientHeight });\n      measure();\n      const observer = new ResizeObserver(measure);\n      observer.observe(node);\n      return () => observer.disconnect();\n    }, []);\n\n    const clamp = useCallback(\n      (next: CropState): CropState => {\n        const nextScale = baseScale * next.zoom;\n        const limitX = nextScale\n          ? Math.max(0, (view.width * nextScale - frame.width) / 2)\n          : 0;\n        const limitY = nextScale\n          ? Math.max(0, (view.height * nextScale - frame.height) / 2)\n          : 0;\n        return {\n          rotation: next.rotation,\n          zoom: Math.min(maxZoom, Math.max(MIN_ZOOM, next.zoom)),\n          offsetX: Math.min(limitX, Math.max(-limitX, next.offsetX)),\n          offsetY: Math.min(limitY, Math.max(-limitY, next.offsetY)),\n        };\n      },\n      [baseScale, maxZoom, view.height, view.width, frame.height, frame.width],\n    );\n\n    useEffect(() => {\n      if (!scale || !frame.width) return;\n      const width = frame.width / scale;\n      const height = frame.height / scale;\n      onChange?.(\n        {\n          x: Math.round(view.width / 2 - state.offsetX / scale - width / 2),\n          y: Math.round(view.height / 2 - state.offsetY / scale - height / 2),\n          width: Math.round(width),\n          height: Math.round(height),\n        },\n        state,\n      );\n      // onChange is intentionally not a dependency: callers pass inline handlers.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [scale, frame.width, frame.height, view.width, view.height, state]);\n\n    const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n      if (event.button !== 0) return;\n      dragRef.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY };\n      event.currentTarget.setPointerCapture(event.pointerId);\n    };\n\n    const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n      const drag = dragRef.current;\n      if (!drag || drag.pointerId !== event.pointerId) return;\n      const dx = event.clientX - drag.x;\n      const dy = event.clientY - drag.y;\n      dragRef.current = { ...drag, x: event.clientX, y: event.clientY };\n      setState((prev) => clamp({ ...prev, offsetX: prev.offsetX + dx, offsetY: prev.offsetY + dy }));\n    };\n\n    const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {\n      if (dragRef.current?.pointerId !== event.pointerId) return;\n      dragRef.current = null;\n      event.currentTarget.releasePointerCapture?.(event.pointerId);\n    };\n\n    const nudge = (dx: number, dy: number) =>\n      setState((prev) => clamp({ ...prev, offsetX: prev.offsetX + dx, offsetY: prev.offsetY + dy }));\n\n    return (\n      <div ref={ref} className={[\"ds-cropper\", className].filter(Boolean).join(\" \")} {...rest}>\n        {ratios && ratios.length > 1 && (\n          <ButtonGroup aria-label=\"Crop ratio\" className=\"ds-cropper__ratios\">\n            {ratios.map((option) => (\n              <Button\n                key={option.label}\n                size=\"sm\"\n                variant={option.value === ratio ? \"active\" : \"neutral\"}\n                aria-pressed={option.value === ratio}\n                onClick={() => chooseRatio(option.value)}\n              >\n                {option.label}\n              </Button>\n            ))}\n          </ButtonGroup>\n        )}\n        <div\n          role=\"application\"\n          aria-label=\"Crop area — drag to reposition, arrow keys to nudge\"\n          tabIndex={0}\n          className=\"ds-cropper__stage\"\n          style={{ \"--cropper-aspect\": String(ratio) } as CSSProperties}\n          onPointerDown={onPointerDown}\n          onPointerMove={onPointerMove}\n          onPointerUp={endDrag}\n          onPointerCancel={endDrag}\n          onKeyDown={(event) => {\n            const step = event.shiftKey ? 24 : 8;\n            const moves: Record<string, [number, number]> = {\n              ArrowLeft: [-step, 0],\n              ArrowRight: [step, 0],\n              ArrowUp: [0, -step],\n              ArrowDown: [0, step],\n            };\n            const move = moves[event.key];\n            if (!move) return;\n            event.preventDefault();\n            nudge(move[0], move[1]);\n          }}\n        >\n          <img\n            ref={imageRef}\n            src={src}\n            alt={alt}\n            draggable={false}\n            className=\"ds-cropper__image\"\n            onLoad={(event) => adopt(event.currentTarget)}\n            style={{\n              inlineSize: natural.width * scale || undefined,\n              blockSize: natural.height * scale || undefined,\n              transform: `translate(calc(-50% + ${state.offsetX}px), calc(-50% + ${state.offsetY}px)) rotate(${state.rotation}deg)`,\n            }}\n          />\n          {/* The window: everything outside it is veiled, not hidden. */}\n          <div className=\"ds-cropper__frame\" ref={frameRef} aria-hidden=\"true\">\n            <div className=\"ds-cropper__guides\" />\n          </div>\n        </div>\n\n        <div className=\"ds-cropper__controls\">\n          <label className=\"ds-cropper__zoom\">\n            <span className=\"ds-cropper__zoom-label\">Zoom</span>\n            <input\n              type=\"range\"\n              min={MIN_ZOOM}\n              max={maxZoom}\n              step={0.01}\n              value={state.zoom}\n              className=\"ds-cropper__slider\"\n              onChange={(event) =>\n                setState((prev) => clamp({ ...prev, zoom: Number(event.target.value) }))\n              }\n            />\n            <span className=\"ds-cropper__value\">{state.zoom.toFixed(2)}×</span>\n          </label>\n          <ButtonGroup aria-label=\"Crop actions\">\n            {rotatable && (\n              <>\n                <Button\n                  size=\"sm\"\n                  iconStart=\"rotate-ccw\"\n                  aria-label=\"Rotate left\"\n                  onClick={() => turn(-90)}\n                />\n                <Button\n                  size=\"sm\"\n                  iconStart=\"rotate-cw\"\n                  aria-label=\"Rotate right\"\n                  onClick={() => turn(90)}\n                />\n              </>\n            )}\n            <Button size=\"sm\" onClick={() => setState(REST)}>\n              Reset\n            </Button>\n          </ButtonGroup>\n        </div>\n\n        <p className=\"ds-cropper__hint\">\n          Drag the picture to reposition it. Nothing is written until you save —{\" \"}\n          {maxOffsetX === 0 && maxOffsetY === 0\n            ? \"at this zoom the whole picture is in frame.\"\n            : \"the veiled edges are what gets trimmed.\"}\n        </p>\n      </div>\n    );\n  },\n);\n\nexport interface CropToBlobOptions {\n  /** Width of the output in pixels; the height follows the crop's aspect. */\n  outputWidth?: number;\n  /** Quarter turns applied before cropping — pass `state.rotation`. */\n  rotation?: number;\n  type?: \"image/png\" | \"image/jpeg\" | \"image/webp\";\n  quality?: number;\n}\n\n/**\n * Renders a `CropRect` to an image blob in the browser. Same-origin or\n * CORS-enabled sources only — a tainted canvas cannot be exported.\n */\nexport async function cropToBlob(\n  src: string,\n  crop: CropRect,\n  { outputWidth, rotation = 0, type = \"image/png\", quality = 0.92 }: CropToBlobOptions = {},\n): Promise<Blob> {\n  const image = new Image();\n  image.crossOrigin = \"anonymous\";\n  image.src = src;\n  await image.decode();\n\n  // The crop is expressed against the turned picture, so turn it first.\n  const quarter = rotation % 180 !== 0;\n  const turned = document.createElement(\"canvas\");\n  turned.width = quarter ? image.naturalHeight : image.naturalWidth;\n  turned.height = quarter ? image.naturalWidth : image.naturalHeight;\n  const turnedContext = turned.getContext(\"2d\");\n  if (!turnedContext) throw new Error(\"Canvas 2D context unavailable\");\n  turnedContext.translate(turned.width / 2, turned.height / 2);\n  turnedContext.rotate((rotation * Math.PI) / 180);\n  turnedContext.drawImage(image, -image.naturalWidth / 2, -image.naturalHeight / 2);\n\n  const width = outputWidth ?? crop.width;\n  const height = Math.round((crop.height / crop.width) * width);\n  const canvas = document.createElement(\"canvas\");\n  canvas.width = width;\n  canvas.height = height;\n  const context = canvas.getContext(\"2d\");\n  if (!context) throw new Error(\"Canvas 2D context unavailable\");\n  context.drawImage(turned, crop.x, crop.y, crop.width, crop.height, 0, 0, width, height);\n\n  return new Promise((resolve, reject) => {\n    canvas.toBlob(\n      (blob) => (blob ? resolve(blob) : reject(new Error(\"Could not encode the crop\"))),\n      type,\n      quality,\n    );\n  });\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["forwardRef","useRef","useState","useCallback","useMemo","Stack","Field","Slider","ButtonGroup","_Fragment","Button","require_components_Button_index","require_components_ButtonGroup_index","require_components_Field_index","require_components_Grid_index","require_components_Slider_index","react","react_jsx_runtime","MIN_ZOOM","REST","ImageCropper","rest","frameRef","frame","setFrame","natural","setNatural","state","setState","dragRef","imageRef","prev","aspect","turn","by","adopt","img","src","quarter","view","baseScale","node","measure","observer","clamp","zoom","maxZoom","next","nextScale","limitX","limitY","offsetX","offsetY","bounded","scale","maxOffsetX","maxOffsetY","hint","width","height","onChange","onPointerDown","event","onPointerMove","drag","dx","dy","endDrag","nudge","className","step","move","props","rotatable","cropToBlob","image","rotation","turned","turnedContext","outputWidth","crop","canvas","context","blob","resolve","reject","type","quality"],"sources":["../../../src/components/ImageCropper/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type PointerEvent as ReactPointerEvent,\n} from \"react\";\nimport { Button } from \"../Button\";\nimport { ButtonGroup } from \"../ButtonGroup\";\nimport { Field } from \"../Field\";\nimport { Stack } from \"../Grid\";\nimport { Slider } from \"../Slider\";\nimport \"./style.css\";\n\nexport interface CropRect {\n  /** Left edge of the crop, in the (rotated) image's own pixels. */\n  x: number;\n  /** Top edge of the crop, in the (rotated) image's own pixels. */\n  y: number;\n  width: number;\n  height: number;\n}\n\nexport interface CropState {\n  /** Pan, in stage pixels, from the centre. */\n  offsetX: number;\n  offsetY: number;\n  /** 1 is \"cover the crop window exactly\". */\n  zoom: number;\n  /** Quarter turns applied to the picture, clockwise: 0, 90, 180 or 270. */\n  rotation: number;\n}\n\nexport interface ImageCropperProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"onChange\"\n> {\n  src: string;\n  /** Describes the picture for people who cannot see the stage. */\n  alt?: string;\n  /** Required output shape, width / height. Must be positive and finite. */\n  aspect: number;\n  /** Highest allowed zoom. Past 3 the result is mush on most uploads. */\n  maxZoom?: number;\n  /** Offer the quarter-turn controls. */\n  rotatable?: boolean;\n  /** Fires on every pan, zoom, turn and reset, with the crop in image pixels. */\n  onChange?: (crop: CropRect, state: CropState) => void;\n}\n\nconst MIN_ZOOM = 1;\nconst REST: CropState = { offsetX: 0, offsetY: 0, zoom: 1, rotation: 0 };\n\n/**\n * Pan-and-zoom cropping over a fixed frame. The frame never moves — the\n * picture does — and the parts that fall outside it stay visible under a\n * veil, so the reader can see what they are trimming away.\n * Drag with a pointer, or focus the stage and use the arrow keys.\n */\nexport const ImageCropper = forwardRef<HTMLDivElement, ImageCropperProps>(\n  function ImageCropper(\n    {\n      src,\n      alt = \"\",\n      aspect,\n      maxZoom = 3,\n      rotatable = true,\n      onChange,\n      className,\n      ...rest\n    },\n    ref,\n  ) {\n    const frameRef = useRef<HTMLDivElement | null>(null);\n    const [frame, setFrame] = useState({ width: 0, height: 0 });\n    const [natural, setNatural] = useState({ width: 0, height: 0 });\n    const [state, setState] = useState<CropState>(REST);\n    const dragRef = useRef<{ pointerId: number; x: number; y: number } | null>(\n      null,\n    );\n    const imageRef = useRef<HTMLImageElement | null>(null);\n\n    // The prop stays the source of truth when the caller drives the shape.\n    useEffect(() => {\n      setState((prev) => ({ ...REST, rotation: prev.rotation }));\n    }, [aspect]);\n\n    const turn = (by: number) =>\n      setState((prev) => ({\n        ...REST,\n        rotation: (prev.rotation + by + 360) % 360,\n      }));\n\n    /** Take the picture's own pixels and start from a centred, unzoomed view. */\n    const adopt = useCallback((img: HTMLImageElement) => {\n      if (!img.naturalWidth) return;\n      setNatural({ width: img.naturalWidth, height: img.naturalHeight });\n      setState(REST);\n    }, []);\n\n    // A cached or server-rendered image can already be decoded before React\n    // attaches onLoad, and then that event never fires.\n    useEffect(() => {\n      const img = imageRef.current;\n      if (img?.complete) adopt(img);\n    }, [adopt, src]);\n\n    // After a quarter turn the picture presents its other side to the frame.\n    const quarter = state.rotation % 180 !== 0;\n    const view = {\n      width: quarter ? natural.height : natural.width,\n      height: quarter ? natural.width : natural.height,\n    };\n\n    // The scale at which the image exactly covers the frame; zoom multiplies it.\n    const baseScale =\n      view.width && frame.width\n        ? Math.max(frame.width / view.width, frame.height / view.height)\n        : 0;\n\n    useLayoutEffect(() => {\n      const node = frameRef.current;\n      if (!node) return;\n      const measure = () =>\n        setFrame({ width: node.clientWidth, height: node.clientHeight });\n      measure();\n      const observer = new ResizeObserver(measure);\n      observer.observe(node);\n      return () => observer.disconnect();\n    }, [aspect]);\n\n    const clamp = useCallback(\n      (next: CropState): CropState => {\n        const zoom = Math.min(\n          Math.max(MIN_ZOOM, maxZoom),\n          Math.max(MIN_ZOOM, next.zoom),\n        );\n        const nextScale = baseScale * zoom;\n        const limitX = nextScale\n          ? Math.max(0, (view.width * nextScale - frame.width) / 2)\n          : 0;\n        const limitY = nextScale\n          ? Math.max(0, (view.height * nextScale - frame.height) / 2)\n          : 0;\n        const offsetX = Math.min(limitX, Math.max(-limitX, next.offsetX));\n        const offsetY = Math.min(limitY, Math.max(-limitY, next.offsetY));\n        if (\n          zoom === next.zoom &&\n          offsetX === next.offsetX &&\n          offsetY === next.offsetY\n        )\n          return next;\n        return { ...next, zoom, offsetX, offsetY };\n      },\n      [baseScale, maxZoom, view.height, view.width, frame.height, frame.width],\n    );\n\n    // Keep the rendered transform bounded when the frame or zoom limit changes too.\n    const bounded = useMemo(() => clamp(state), [clamp, state]);\n    useEffect(() => {\n      setState(bounded);\n    }, [bounded]);\n    const scale = baseScale * bounded.zoom;\n    const maxOffsetX = scale\n      ? Math.max(0, (view.width * scale - frame.width) / 2)\n      : 0;\n    const maxOffsetY = scale\n      ? Math.max(0, (view.height * scale - frame.height) / 2)\n      : 0;\n    const hint = `Drag the picture to reposition it. Nothing is written until you save — ${\n      maxOffsetX === 0 && maxOffsetY === 0\n        ? \"at this zoom the whole picture is in frame.\"\n        : \"the veiled edges are what gets trimmed.\"\n    }`;\n\n    useEffect(() => {\n      if (!scale || !frame.width) return;\n      const width = Math.min(view.width, Math.round(frame.width / scale));\n      const height = Math.min(view.height, Math.round(frame.height / scale));\n      onChange?.(\n        {\n          x: Math.max(\n            0,\n            Math.min(\n              view.width - width,\n              Math.round(\n                view.width / 2 -\n                  bounded.offsetX / scale -\n                  frame.width / scale / 2,\n              ),\n            ),\n          ),\n          y: Math.max(\n            0,\n            Math.min(\n              view.height - height,\n              Math.round(\n                view.height / 2 -\n                  bounded.offsetY / scale -\n                  frame.height / scale / 2,\n              ),\n            ),\n          ),\n          width,\n          height,\n        },\n        bounded,\n      );\n      // onChange is intentionally not a dependency: callers pass inline handlers.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [scale, frame.width, frame.height, view.width, view.height, bounded]);\n\n    const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n      if (event.button !== 0) return;\n      dragRef.current = {\n        pointerId: event.pointerId,\n        x: event.clientX,\n        y: event.clientY,\n      };\n      event.currentTarget.setPointerCapture(event.pointerId);\n    };\n\n    const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n      const drag = dragRef.current;\n      if (!drag || drag.pointerId !== event.pointerId) return;\n      const dx = event.clientX - drag.x;\n      const dy = event.clientY - drag.y;\n      dragRef.current = { ...drag, x: event.clientX, y: event.clientY };\n      setState((prev) =>\n        clamp({\n          ...prev,\n          offsetX: prev.offsetX + dx,\n          offsetY: prev.offsetY + dy,\n        }),\n      );\n    };\n\n    const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {\n      if (dragRef.current?.pointerId !== event.pointerId) return;\n      dragRef.current = null;\n      event.currentTarget.releasePointerCapture?.(event.pointerId);\n    };\n\n    const nudge = (dx: number, dy: number) =>\n      setState((prev) =>\n        clamp({\n          ...prev,\n          offsetX: prev.offsetX + dx,\n          offsetY: prev.offsetY + dy,\n        }),\n      );\n\n    return (\n      <Stack\n        ref={ref}\n        className={[\"ds-cropper\", className].filter(Boolean).join(\" \")}\n        {...rest}\n      >\n        <div\n          role=\"application\"\n          aria-label=\"Crop area — drag to reposition, arrow keys to nudge\"\n          tabIndex={0}\n          className=\"ds-cropper__stage\"\n          style={{ \"--cropper-aspect\": String(aspect) } as CSSProperties}\n          onPointerDown={onPointerDown}\n          onPointerMove={onPointerMove}\n          onPointerUp={endDrag}\n          onPointerCancel={endDrag}\n          onKeyDown={(event) => {\n            const step = event.shiftKey ? 24 : 8;\n            const moves: Record<string, [number, number]> = {\n              ArrowLeft: [-step, 0],\n              ArrowRight: [step, 0],\n              ArrowUp: [0, -step],\n              ArrowDown: [0, step],\n            };\n            const move = moves[event.key];\n            if (!move) return;\n            event.preventDefault();\n            nudge(move[0], move[1]);\n          }}\n        >\n          <img\n            ref={imageRef}\n            src={src}\n            alt={alt}\n            draggable={false}\n            className=\"ds-cropper__image\"\n            onLoad={(event) => adopt(event.currentTarget)}\n            style={{\n              inlineSize: natural.width * scale || undefined,\n              blockSize: natural.height * scale || undefined,\n              transform: `translate(calc(-50% + ${bounded.offsetX}px), calc(-50% + ${bounded.offsetY}px)) rotate(${bounded.rotation}deg)`,\n            }}\n          />\n          {/* The window: everything outside it is veiled, not hidden. */}\n          <div className=\"ds-cropper__frame\" ref={frameRef} aria-hidden=\"true\">\n            <div className=\"ds-cropper__guides\" />\n          </div>\n        </div>\n\n        <Field label=\"Zoom\" hint={hint}>\n          {(props) => (\n            <Stack direction=\"horizontal\" gap=\"md\" align=\"center\" wrap>\n              <Stack style={{ flex: \"1 1 50%\", minInlineSize: 0 }}>\n                <Slider\n                  {...props}\n                  min={MIN_ZOOM}\n                  max={Math.max(MIN_ZOOM, maxZoom)}\n                  step={0.01}\n                  value={bounded.zoom}\n                  suffix=\"×\"\n                  onValueChange={(zoom) =>\n                    setState((prev) => clamp({ ...prev, zoom }))\n                  }\n                />\n              </Stack>\n              <ButtonGroup aria-label=\"Crop actions\">\n                {rotatable && (\n                  <>\n                    <Button\n                      size=\"sm\"\n                      iconStart=\"rotate-ccw\"\n                      aria-label=\"Rotate left\"\n                      onClick={() => turn(-90)}\n                    />\n                    <Button\n                      size=\"sm\"\n                      iconStart=\"rotate-cw\"\n                      aria-label=\"Rotate right\"\n                      onClick={() => turn(90)}\n                    />\n                  </>\n                )}\n                <Button size=\"sm\" onClick={() => setState(REST)}>\n                  Reset\n                </Button>\n              </ButtonGroup>\n            </Stack>\n          )}\n        </Field>\n      </Stack>\n    );\n  },\n);\n\nexport interface CropToBlobOptions {\n  /** Width of the output in pixels; the height follows the crop's aspect. */\n  outputWidth?: number;\n  /** Quarter turns applied before cropping — pass `state.rotation`. */\n  rotation?: number;\n  type?: \"image/png\" | \"image/jpeg\" | \"image/webp\";\n  quality?: number;\n}\n\n/**\n * Renders a `CropRect` to an image blob in the browser. Same-origin or\n * CORS-enabled sources only — a tainted canvas cannot be exported.\n */\nexport async function cropToBlob(\n  src: string,\n  crop: CropRect,\n  {\n    outputWidth,\n    rotation = 0,\n    type = \"image/png\",\n    quality = 0.92,\n  }: CropToBlobOptions = {},\n): Promise<Blob> {\n  const image = new Image();\n  image.crossOrigin = \"anonymous\";\n  image.src = src;\n  await image.decode();\n\n  // The crop is expressed against the turned picture, so turn it first.\n  const quarter = rotation % 180 !== 0;\n  const turned = document.createElement(\"canvas\");\n  turned.width = quarter ? image.naturalHeight : image.naturalWidth;\n  turned.height = quarter ? image.naturalWidth : image.naturalHeight;\n  const turnedContext = turned.getContext(\"2d\");\n  if (!turnedContext) throw new Error(\"Canvas 2D context unavailable\");\n  turnedContext.translate(turned.width / 2, turned.height / 2);\n  turnedContext.rotate((rotation * Math.PI) / 180);\n  turnedContext.drawImage(\n    image,\n    -image.naturalWidth / 2,\n    -image.naturalHeight / 2,\n  );\n\n  const width = outputWidth ?? crop.width;\n  const height = Math.round((crop.height / crop.width) * width);\n  const canvas = document.createElement(\"canvas\");\n  canvas.width = width;\n  canvas.height = height;\n  const context = canvas.getContext(\"2d\");\n  if (!context) throw new Error(\"Canvas 2D context unavailable\");\n  context.drawImage(\n    turned,\n    crop.x,\n    crop.y,\n    crop.width,\n    crop.height,\n    0,\n    0,\n    width,\n    height,\n  );\n\n  return new Promise((resolve, reject) => {\n    canvas.toBlob(\n      (blob) =>\n        blob ? resolve(blob) : reject(new Error(\"Could not encode the crop\")),\n      type,\n      quality,\n    );\n  });\n}\n"],"mappings":"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"}

package/dist/components/ImageCropper/index.d.cts

@@ -16,26 +16,12 @@ export interface CropState {
     /** Quarter turns applied to the picture, clockwise: 0, 90, 180 or 270. */
     rotation: number;
 }
-/** One offered output shape. `value` is width / height. */
-export interface CropRatio {
-    label: string;
-    value: number;
-}
-/** The house set: square, portrait, landscape, wide. */
-export declare const cropRatios: CropRatio[];
 export interface ImageCropperProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     src: string;
     /** Describes the picture for people who cannot see the stage. */
     alt?: string;
-    /** Output shape, width / height. 1 for an avatar, 16 / 9 for a hero. */
-    aspect?: number;
-    /**
-     * Offer the reader a choice of output shapes. Omit it — or pass one ratio —
-     * when the shape is fixed by the slot the picture is going into.
-     */
-    ratios?: CropRatio[];
-    /** Fires when the reader picks a different shape. */
-    onAspectChange?: (aspect: number) => void;
+    /** Required output shape, width / height. Must be positive and finite. */
+    aspect: number;
     /** Highest allowed zoom. Past 3 the result is mush on most uploads. */
     maxZoom?: number;
     /** Offer the quarter-turn controls. */
@@ -62,5 +48,5 @@ export interface CropToBlobOptions {
  * Renders a `CropRect` to an image blob in the browser. Same-origin or
  * CORS-enabled sources only — a tainted canvas cannot be exported.
  */
-export declare function cropToBlob(src: string, crop: CropRect, { outputWidth, rotation, type, quality }?: CropToBlobOptions): Promise<Blob>;
+export declare function cropToBlob(src: string, crop: CropRect, { outputWidth, rotation, type, quality, }?: CropToBlobOptions): Promise<Blob>;
 //# sourceMappingURL=index.d.cts.map

package/dist/components/ImageCropper/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ImageCropper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAGf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,QAAQ;IACvB,kEAAkE;IAClE,CAAC,EAAE,MAAM,CAAC;IACV,iEAAiE;IACjE,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,2DAA2D;AAC3D,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wDAAwD;AACxD,eAAO,MAAM,UAAU,EAAE,SAAS,EAKjC,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxD,GAAG,EAAE,MAAM,CAAC;IACZ,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,qDAAqD;IACrD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvD;AAKD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,8GAwPxB,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,YAAY,CAAC;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAsB,UAAU,CAC9B,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,QAAQ,EACd,EAAE,WAAW,EAAE,QAAY,EAAE,IAAkB,EAAE,OAAc,EAAE,GAAE,iBAAsB,GACxF,OAAO,CAAC,IAAI,CAAC,CAiCf"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ImageCropper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAMf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,QAAQ;IACvB,kEAAkE;IAClE,CAAC,EAAE,MAAM,CAAC;IACV,iEAAiE;IACjE,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,GAAG,EAAE,MAAM,CAAC;IACZ,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvD;AAKD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,8GA6RxB,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,YAAY,CAAC;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAsB,UAAU,CAC9B,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,QAAQ,EACd,EACE,WAAW,EACX,QAAY,EACZ,IAAkB,EAClB,OAAc,GACf,GAAE,iBAAsB,GACxB,OAAO,CAAC,IAAI,CAAC,CAgDf"}

package/dist/components/ImageCropper/index.d.ts

@@ -16,26 +16,12 @@ export interface CropState {
     /** Quarter turns applied to the picture, clockwise: 0, 90, 180 or 270. */
     rotation: number;
 }
-/** One offered output shape. `value` is width / height. */
-export interface CropRatio {
-    label: string;
-    value: number;
-}
-/** The house set: square, portrait, landscape, wide. */
-export declare const cropRatios: CropRatio[];
 export interface ImageCropperProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     src: string;
     /** Describes the picture for people who cannot see the stage. */
     alt?: string;
-    /** Output shape, width / height. 1 for an avatar, 16 / 9 for a hero. */
-    aspect?: number;
-    /**
-     * Offer the reader a choice of output shapes. Omit it — or pass one ratio —
-     * when the shape is fixed by the slot the picture is going into.
-     */
-    ratios?: CropRatio[];
-    /** Fires when the reader picks a different shape. */
-    onAspectChange?: (aspect: number) => void;
+    /** Required output shape, width / height. Must be positive and finite. */
+    aspect: number;
     /** Highest allowed zoom. Past 3 the result is mush on most uploads. */
     maxZoom?: number;
     /** Offer the quarter-turn controls. */
@@ -62,5 +48,5 @@ export interface CropToBlobOptions {
  * Renders a `CropRect` to an image blob in the browser. Same-origin or
  * CORS-enabled sources only — a tainted canvas cannot be exported.
  */
-export declare function cropToBlob(src: string, crop: CropRect, { outputWidth, rotation, type, quality }?: CropToBlobOptions): Promise<Blob>;
+export declare function cropToBlob(src: string, crop: CropRect, { outputWidth, rotation, type, quality, }?: CropToBlobOptions): Promise<Blob>;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ImageCropper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ImageCropper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAGf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,QAAQ;IACvB,kEAAkE;IAClE,CAAC,EAAE,MAAM,CAAC;IACV,iEAAiE;IACjE,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,2DAA2D;AAC3D,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wDAAwD;AACxD,eAAO,MAAM,UAAU,EAAE,SAAS,EAKjC,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxD,GAAG,EAAE,MAAM,CAAC;IACZ,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,qDAAqD;IACrD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvD;AAKD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,8GAwPxB,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,YAAY,CAAC;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAsB,UAAU,CAC9B,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,QAAQ,EACd,EAAE,WAAW,EAAE,QAAY,EAAE,IAAkB,EAAE,OAAc,EAAE,GAAE,iBAAsB,GACxF,OAAO,CAAC,IAAI,CAAC,CAiCf"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ImageCropper/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAMf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,QAAQ;IACvB,kEAAkE;IAClE,CAAC,EAAE,MAAM,CAAC;IACV,iEAAiE;IACjE,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAS;IACxB,6CAA6C;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,GAAG,EAAE,MAAM,CAAC;IACZ,iEAAiE;IACjE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACvD;AAKD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,8GA6RxB,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,2EAA2E;IAC3E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,WAAW,GAAG,YAAY,GAAG,YAAY,CAAC;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;GAGG;AACH,wBAAsB,UAAU,CAC9B,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,QAAQ,EACd,EACE,WAAW,EACX,QAAY,EACZ,IAAkB,EAClB,OAAc,GACf,GAAE,iBAAsB,GACxB,OAAO,CAAC,IAAI,CAAC,CAgDf"}