itmar-block-packages 2.1.2 → 3.0.2

package/build/esm/MasonryControl.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Masonry グリッドを初期化する共通関数
+ *
+ * @param {HTMLElement} gridEl - `.itmar-masonry-grid` のコンテナ要素
+ * @param {Array<{ url: string, alt?: string }>} images - 描画する画像リスト
+ * @param {Object} options
+ * @param {number} options.columns - カラム数
+ * @param {boolean} [options.renderItems=true]
+ *   true: この関数内で gridEl をクリアして <figure><img> を追加する
+ *   false: 既にある .itmar-masonry-item をそのまま使い、幅だけ更新する
+ *
+ * @returns {any|null} Masonry インスタンス（なければ null）
+ */
+declare global {
+    interface Window {
+        Masonry: any;
+        imagesLoaded: any;
+    }
+    interface HTMLElement {
+        __masonryInstance?: any;
+    }
+}
+interface MasonryImage {
+    url: string;
+    alt?: string;
+}
+interface MasonryOptions {
+    columns?: number;
+    renderItems?: boolean;
+}
+/**
+ * Masonry レイアウトを初期化・更新する
+ */
+export default function MasonryControl(gridEl: HTMLElement | null, images?: MasonryImage[], { columns, renderItems }?: MasonryOptions): any;
+export {};

package/build/esm/MasonryControl.js

@@ -11,109 +11,104 @@
  *
  * @returns {any|null} Masonry インスタンス（なければ null）
  */
-
-function MasonryControl(gridEl) {
-  var images = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  var {
-    columns = 1,
-    renderItems = true
-  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  if (!gridEl) return null;
-  var columnWidthPercent = 100 / (columns || 1);
-
-  // 既存インスタンスがあれば破棄（再初期化に対応）
-  if (gridEl.__masonryInstance) {
-    try {
-      gridEl.__masonryInstance.destroy();
-    } catch (e) {
-      console.warn("Failed to destroy previous Masonry instance", e);
+/**
+ * Masonry レイアウトを初期化・更新する
+ */
+function MasonryControl(gridEl, images = [], { columns = 1, renderItems = true } = {}) {
+    if (!gridEl)
+        return null;
+    const columnWidthPercent = 100 / (columns || 1);
+    // 既存インスタンスがあれば破棄（再初期化に対応）
+    if (gridEl.__masonryInstance) {
+        try {
+            gridEl.__masonryInstance.destroy();
+        }
+        catch (e) {
+            console.warn("Failed to destroy previous Masonry instance", e);
+        }
+        gridEl.__masonryInstance = null;
     }
-    gridEl.__masonryInstance = null;
-  }
-
-  // ---------------------------
-  // 1) アイテムの DOM を構築 or 更新
-  // ---------------------------
-  if (renderItems) {
-    // ★ コンテナ全部は消さない。マソンリー用の要素だけを削除する
-    gridEl.querySelectorAll(".itmar-masonry-sizer, .itmar-masonry-item").forEach(node => node.remove());
-
-    // sizer 追加
-    var sizer = document.createElement("div");
-    sizer.className = "itmar-masonry-sizer";
-    sizer.style.width = "".concat(columnWidthPercent, "%");
-    gridEl.appendChild(sizer);
-
-    // 画像アイテム追加
-    images.forEach((item, index) => {
-      var fig = document.createElement("figure");
-      fig.className = "itmar-masonry-item";
-      fig.style.width = "".concat(columnWidthPercent, "%");
-
-      // クリック検知用の a タグ
-      var link = document.createElement("a");
-      link.href = "#";
-      link.className = "itmar-masonry-link";
-      link.dataset.masonryIndex = String(index);
-      //img要素
-      var img = document.createElement("img");
-      img.src = item.url;
-      img.alt = item.alt || "";
-      img.style.display = "block";
-      img.style.width = "100%";
-      img.style.height = "auto";
-      link.appendChild(img);
-      fig.appendChild(link);
-      gridEl.appendChild(fig);
-    });
-  } else {
-    // React 側（edit.js）みたいに、すでに <figure> が描画されている場合
-    // sizer がなければ作る
-    var _sizer = gridEl.querySelector(".itmar-masonry-sizer");
-    if (!_sizer) {
-      _sizer = document.createElement("div");
-      _sizer.className = "itmar-masonry-sizer";
-      gridEl.insertBefore(_sizer, gridEl.firstChild || null);
+    // ---------------------------
+    // 1) アイテムの DOM を構築 or 更新
+    // ---------------------------
+    if (renderItems) {
+        // ★ コンテナ全部は消さない。マソンリー用の要素だけを削除する
+        gridEl
+            .querySelectorAll(".itmar-masonry-sizer, .itmar-masonry-item")
+            .forEach((node) => node.remove());
+        // sizer 追加
+        const sizer = document.createElement("div");
+        sizer.className = "itmar-masonry-sizer";
+        sizer.style.width = `${columnWidthPercent}%`;
+        gridEl.appendChild(sizer);
+        // 画像アイテム追加
+        images.forEach((item, index) => {
+            const fig = document.createElement("figure");
+            fig.className = "itmar-masonry-item";
+            fig.style.width = `${columnWidthPercent}%`;
+            // クリック検知用の a タグ
+            const link = document.createElement("a");
+            link.href = "#";
+            link.className = "itmar-masonry-link";
+            link.dataset.masonryIndex = String(index);
+            //img要素
+            const img = document.createElement("img");
+            img.src = item.url;
+            img.alt = item.alt || "";
+            img.style.display = "block";
+            img.style.width = "100%";
+            img.style.height = "auto";
+            link.appendChild(img);
+            fig.appendChild(link);
+            gridEl.appendChild(fig);
+        });
     }
-    _sizer.style.width = "".concat(columnWidthPercent, "%");
-
-    // 既存 item の幅だけ更新
-    gridEl.querySelectorAll(".itmar-masonry-item").forEach(fig => {
-      fig.style.width = "".concat(columnWidthPercent, "%");
+    else {
+        // React 側（edit.js）みたいに、すでに <figure> が描画されている場合
+        // sizer がなければ作る
+        let sizer = gridEl.querySelector(".itmar-masonry-sizer");
+        if (!sizer) {
+            sizer = document.createElement("div");
+            sizer.className = "itmar-masonry-sizer";
+            gridEl.insertBefore(sizer, gridEl.firstChild || null);
+        }
+        sizer.style.width = `${columnWidthPercent}%`;
+        // 既存 item の幅だけ更新
+        gridEl.querySelectorAll(".itmar-masonry-item").forEach((node) => {
+            node.style.width = `${columnWidthPercent}%`;
+        });
+    }
+    // ---------------------------
+    // 2) Masonry / imagesLoaded を iframe-aware に取得
+    // ---------------------------
+    let win = null;
+    if (gridEl.ownerDocument && gridEl.ownerDocument.defaultView) {
+        // サイトエディタ・ブロックエディタの iframe 内ならこっち
+        win = gridEl.ownerDocument.defaultView;
+    }
+    else if (typeof window !== "undefined") {
+        // フロントなら普通に window
+        win = window;
+    }
+    if (!win || !win.Masonry || !win.imagesLoaded) {
+        // ライブラリが読み込まれていない場合は、
+        // DOM だけ作って終了（レイアウトはブラウザ任せ）
+        return null;
+    }
+    const MasonryCtor = win.Masonry;
+    const imagesLoadedFn = win.imagesLoaded;
+    const msnry = new MasonryCtor(gridEl, {
+        itemSelector: ".itmar-masonry-item",
+        columnWidth: ".itmar-masonry-sizer",
+        percentPosition: true,
     });
-  }
-
-  // ---------------------------
-  // 2) Masonry / imagesLoaded を iframe-aware に取得
-  // ---------------------------
-  var win = null;
-  if (gridEl.ownerDocument && gridEl.ownerDocument.defaultView) {
-    // サイトエディタ・ブロックエディタの iframe 内ならこっち
-    win = gridEl.ownerDocument.defaultView;
-  } else if (typeof window !== "undefined") {
-    // フロントなら普通に window
-    win = window;
-  }
-  if (!win || !win.Masonry || !win.imagesLoaded) {
-    // ライブラリが読み込まれていない場合は、
-    // DOM だけ作って終了（レイアウトはブラウザ任せ）
-    return null;
-  }
-  var MasonryCtor = win.Masonry;
-  var imagesLoadedFn = win.imagesLoaded;
-  var msnry = new MasonryCtor(gridEl, {
-    itemSelector: ".itmar-masonry-item",
-    columnWidth: ".itmar-masonry-sizer",
-    percentPosition: true
-  });
-  var imgLoad = imagesLoadedFn(gridEl);
-  imgLoad.on("progress", () => {
-    msnry.layout();
-  });
-
-  // 後から破棄できるように要素に紐付けておく
-  gridEl.__masonryInstance = msnry;
-  return msnry;
+    const imgLoad = imagesLoadedFn(gridEl);
+    imgLoad.on("progress", () => {
+        msnry.layout();
+    });
+    // 後から破棄できるように要素に紐付けておく
+    gridEl.__masonryInstance = msnry;
+    return msnry;
 }
 
 export { MasonryControl as default };

package/build/esm/MasonryControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"MasonryControl.js","sources":["../../src/MasonryControl.js"],"sourcesContent":["/**\n * Masonry グリッドを初期化する共通関数\n *\n * @param {HTMLElement} gridEl - `.itmar-masonry-grid` のコンテナ要素\n * @param {Array<{ url: string, alt?: string }>} images - 描画する画像リスト\n * @param {Object} options\n * @param {number} options.columns - カラム数\n * @param {boolean} [options.renderItems=true]\n *   true: この関数内で gridEl をクリアして <figure><img> を追加する\n *   false: 既にある .itmar-masonry-item をそのまま使い、幅だけ更新する\n *\n * @returns {any|null} Masonry インスタンス（なければ null）\n */\n\nexport default function MasonryControl(\n  gridEl,\n  images = [],\n  { columns = 1, renderItems = true } = {}\n) {\n  if (!gridEl) return null;\n  const columnWidthPercent = 100 / (columns || 1);\n\n  // 既存インスタンスがあれば破棄（再初期化に対応）\n  if (gridEl.__masonryInstance) {\n    try {\n      gridEl.__masonryInstance.destroy();\n    } catch (e) {\n      console.warn(\"Failed to destroy previous Masonry instance\", e);\n    }\n    gridEl.__masonryInstance = null;\n  }\n\n  // ---------------------------\n  // 1) アイテムの DOM を構築 or 更新\n  // ---------------------------\n  if (renderItems) {\n    // ★ コンテナ全部は消さない。マソンリー用の要素だけを削除する\n    gridEl\n      .querySelectorAll(\".itmar-masonry-sizer, .itmar-masonry-item\")\n      .forEach((node) => node.remove());\n\n    // sizer 追加\n    const sizer = document.createElement(\"div\");\n    sizer.className = \"itmar-masonry-sizer\";\n    sizer.style.width = `${columnWidthPercent}%`;\n    gridEl.appendChild(sizer);\n\n    // 画像アイテム追加\n    images.forEach((item, index) => {\n      const fig = document.createElement(\"figure\");\n      fig.className = \"itmar-masonry-item\";\n      fig.style.width = `${columnWidthPercent}%`;\n\n      // クリック検知用の a タグ\n      const link = document.createElement(\"a\");\n      link.href = \"#\";\n      link.className = \"itmar-masonry-link\";\n      link.dataset.masonryIndex = String(index);\n      //img要素\n      const img = document.createElement(\"img\");\n      img.src = item.url;\n      img.alt = item.alt || \"\";\n      img.style.display = \"block\";\n      img.style.width = \"100%\";\n      img.style.height = \"auto\";\n\n      link.appendChild(img);\n      fig.appendChild(link);\n      gridEl.appendChild(fig);\n    });\n  } else {\n    // React 側（edit.js）みたいに、すでに <figure> が描画されている場合\n    // sizer がなければ作る\n    let sizer = gridEl.querySelector(\".itmar-masonry-sizer\");\n    if (!sizer) {\n      sizer = document.createElement(\"div\");\n      sizer.className = \"itmar-masonry-sizer\";\n      gridEl.insertBefore(sizer, gridEl.firstChild || null);\n    }\n    sizer.style.width = `${columnWidthPercent}%`;\n\n    // 既存 item の幅だけ更新\n    gridEl.querySelectorAll(\".itmar-masonry-item\").forEach((fig) => {\n      fig.style.width = `${columnWidthPercent}%`;\n    });\n  }\n\n  // ---------------------------\n  // 2) Masonry / imagesLoaded を iframe-aware に取得\n  // ---------------------------\n  let win = null;\n\n  if (gridEl.ownerDocument && gridEl.ownerDocument.defaultView) {\n    // サイトエディタ・ブロックエディタの iframe 内ならこっち\n    win = gridEl.ownerDocument.defaultView;\n  } else if (typeof window !== \"undefined\") {\n    // フロントなら普通に window\n    win = window;\n  }\n\n  if (!win || !win.Masonry || !win.imagesLoaded) {\n    // ライブラリが読み込まれていない場合は、\n    // DOM だけ作って終了（レイアウトはブラウザ任せ）\n    return null;\n  }\n\n  const MasonryCtor = win.Masonry;\n  const imagesLoadedFn = win.imagesLoaded;\n\n  const msnry = new MasonryCtor(gridEl, {\n    itemSelector: \".itmar-masonry-item\",\n    columnWidth: \".itmar-masonry-sizer\",\n    percentPosition: true,\n  });\n\n  const imgLoad = imagesLoadedFn(gridEl);\n  imgLoad.on(\"progress\", () => {\n    msnry.layout();\n  });\n\n  // 後から破棄できるように要素に紐付けておく\n  gridEl.__masonryInstance = msnry;\n\n  return msnry;\n}\n"],"names":["MasonryControl","gridEl","images","arguments","length","undefined","columns","renderItems","columnWidthPercent","__masonryInstance","destroy","e","console","warn","querySelectorAll","forEach","node","remove","sizer","document","createElement","className","style","width","concat","appendChild","item","index","fig","link","href","dataset","masonryIndex","String","img","src","url","alt","display","height","querySelector","insertBefore","firstChild","win","ownerDocument","defaultView","window","Masonry","imagesLoaded","MasonryCtor","imagesLoadedFn","msnry","itemSelector","columnWidth","percentPosition","imgLoad","on","layout"],"mappings":"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"}
+{"version":3,"file":"MasonryControl.js","sources":["../../src/MasonryControl.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/build/esm/PseudoElm.d.ts

@@ -0,0 +1,11 @@
+type ArrowDirection = "upper" | "left" | "right" | "under" | "down";
+interface PseudoElmProps {
+    direction: ArrowDirection;
+    onChange: (value: ArrowDirection) => void;
+}
+interface ArrowProps {
+    direction?: ArrowDirection;
+}
+export declare const Arrow: ({ direction }: ArrowProps) => import("styled-components").RuleSet<object>;
+declare const PseudoElm: ({ direction, onChange }: PseudoElmProps) => JSX.Element;
+export default PseudoElm;

package/build/esm/PseudoElm.js

@@ -1,60 +1,47 @@
-import { taggedTemplateLiteral as _taggedTemplateLiteral } from './_virtual/_rollupPluginBabelHelpers.js';
+import { createElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { css } from 'styled-components';
 import { RadioControl } from '@wordpress/components';
 
-var _templateObject;
-
 // 矢印の向きに応じたスタイルを生成するヘルパー関数
-var arrowDirectionStyles = direction => {
-  switch (direction) {
-    case "left":
-      return "transform: translate(-50%, -50%) rotate(-135deg);";
-    case "right":
-      return "transform: translate(-50%, -50%) rotate(45deg);";
-    case "upper":
-      return "transform: translate(-50%, -50%) rotate(-45deg);";
-    case "under":
-      return "transform: translate(-50%, -50%) rotate(135deg);";
-    default:
-      return "transform: translate(-50%, -50%) rotate(45deg);";
-    // default to 'down'
-  }
-};
-
-// 矢印のスタイルを適用するコンポーネント
-var Arrow = _ref => {
-  var {
-    direction = "down"
-  } = _ref;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &::after {\n    content: \"\";\n    position: absolute;\n    display: block;\n    width: 15%;\n    height: 15%;\n    border-top: 3px solid var(--wp--preset--color--accent-2);\n    border-right: 3px solid var(--wp--preset--color--accent-2);\n    top: 50%;\n    left: 50%;\n    ", "\n  }\n"])), arrowDirectionStyles(direction));
+const arrowDirectionStyles = (direction) => {
+    switch (direction) {
+        case "left":
+            return "transform: translate(-50%, -50%) rotate(-135deg);";
+        case "right":
+            return "transform: translate(-50%, -50%) rotate(45deg);";
+        case "upper":
+            return "transform: translate(-50%, -50%) rotate(-45deg);";
+        case "under":
+            return "transform: translate(-50%, -50%) rotate(135deg);";
+        default:
+            return "transform: translate(-50%, -50%) rotate(45deg);"; // default to 'down'
+    }
 };
-
+const Arrow = ({ direction = "down" }) => css `
+  &::after {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 15%;
+    height: 15%;
+    border-top: 3px solid var(--wp--preset--color--accent-2);
+    border-right: 3px solid var(--wp--preset--color--accent-2);
+    top: 50%;
+    left: 50%;
+    ${arrowDirectionStyles(direction)}
+  }
+`;
 //擬似要素の出力を選択させるインスペクターコントロール
-var PseudoElm = _ref2 => {
-  var {
-    direction,
-    onChange: _onChange
-  } = _ref2;
-  return /*#__PURE__*/React.createElement(RadioControl, {
-    selected: direction,
-    options: [{
-      label: __("Upper", "itmar_block_collections"),
-      value: "upper"
-    }, {
-      label: __("Left", "itmar_block_collections"),
-      value: "left"
-    }, {
-      label: __("Right", "itmar_block_collections"),
-      value: "right"
-    }, {
-      label: __("Under", "itmar_block_collections"),
-      value: "under"
-    }],
-    onChange: changeOption => {
-      _onChange(changeOption);
-    }
-  });
+const PseudoElm = ({ direction, onChange }) => {
+    return (createElement(RadioControl, { selected: direction, options: [
+            { label: __("Upper", "itmar_block_collections"), value: "upper" },
+            { label: __("Left", "itmar_block_collections"), value: "left" },
+            { label: __("Right", "itmar_block_collections"), value: "right" },
+            { label: __("Under", "itmar_block_collections"), value: "under" },
+        ], onChange: (changeOption) => {
+            onChange(changeOption);
+        } }));
 };
 
 export { Arrow, PseudoElm as default };

package/build/esm/PseudoElm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PseudoElm.js","sources":["../../src/PseudoElm.js"],"sourcesContent":["import { __ } from \"@wordpress/i18n\";\nimport { css } from \"styled-components\";\nimport { RadioControl } from \"@wordpress/components\";\n\n// 矢印の向きに応じたスタイルを生成するヘルパー関数\nconst arrowDirectionStyles = (direction) => {\n  switch (direction) {\n    case \"left\":\n      return \"transform: translate(-50%, -50%) rotate(-135deg);\";\n    case \"right\":\n      return \"transform: translate(-50%, -50%) rotate(45deg);\";\n    case \"upper\":\n      return \"transform: translate(-50%, -50%) rotate(-45deg);\";\n    case \"under\":\n      return \"transform: translate(-50%, -50%) rotate(135deg);\";\n    default:\n      return \"transform: translate(-50%, -50%) rotate(45deg);\"; // default to 'down'\n  }\n};\n\n// 矢印のスタイルを適用するコンポーネント\nexport const Arrow = ({ direction = \"down\" }) => css`\n  &::after {\n    content: \"\";\n    position: absolute;\n    display: block;\n    width: 15%;\n    height: 15%;\n    border-top: 3px solid var(--wp--preset--color--accent-2);\n    border-right: 3px solid var(--wp--preset--color--accent-2);\n    top: 50%;\n    left: 50%;\n    ${arrowDirectionStyles(direction)}\n  }\n`;\n\n//擬似要素の出力を選択させるインスペクターコントロール\nconst PseudoElm = ({ direction, onChange }) => {\n  return (\n    <RadioControl\n      selected={direction}\n      options={[\n        { label: __(\"Upper\", \"itmar_block_collections\"), value: \"upper\" },\n        { label: __(\"Left\", \"itmar_block_collections\"), value: \"left\" },\n        { label: __(\"Right\", \"itmar_block_collections\"), value: \"right\" },\n        { label: __(\"Under\", \"itmar_block_collections\"), value: \"under\" },\n      ]}\n      onChange={(changeOption) => {\n        onChange(changeOption);\n      }}\n    />\n  );\n};\nexport default PseudoElm;\n"],"names":["arrowDirectionStyles","direction","Arrow","_ref","css","_templateObject","_taggedTemplateLiteral","PseudoElm","_ref2","onChange","React","createElement","RadioControl","selected","options","label","__","value","changeOption"],"mappings":";;;;;;;AAIA;AACA,IAAMA,oBAAoB,GAAIC,SAAS,IAAK;AAC1C,EAAA,QAAQA,SAAS;AACf,IAAA,KAAK,MAAM;AACT,MAAA,OAAO,mDAAmD;AAC5D,IAAA,KAAK,OAAO;AACV,MAAA,OAAO,iDAAiD;AAC1D,IAAA,KAAK,OAAO;AACV,MAAA,OAAO,kDAAkD;AAC3D,IAAA,KAAK,OAAO;AACV,MAAA,OAAO,kDAAkD;AAC3D,IAAA;AACE,MAAA,OAAO,iDAAiD;AAAE;AAC9D;AACF,CAAC;;AAED;AACO,IAAMC,KAAK,GAAGC,IAAA,IAAA;EAAA,IAAC;AAAEF,IAAAA,SAAS,GAAG;AAAO,GAAC,GAAAE,IAAA;EAAA,OAAKC,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CAAA,CAAA,0RAAA,EAAA,SAAA,CAAA,CAAA,CAAA,EAW9CN,oBAAoB,CAACC,SAAS,CAAC,CAAA;AAAA;;AAIrC;AACA,IAAMM,SAAS,GAAGC,KAAA,IAA6B;EAAA,IAA5B;IAAEP,SAAS;AAAEQ,IAAAA,QAAQ,EAARA;AAAS,GAAC,GAAAD,KAAA;AACxC,EAAA,oBACEE,KAAA,CAAAC,aAAA,CAACC,YAAY,EAAA;AACXC,IAAAA,QAAQ,EAAEZ,SAAU;AACpBa,IAAAA,OAAO,EAAE,CACP;AAAEC,MAAAA,KAAK,EAAEC,EAAE,CAAC,OAAO,EAAE,yBAAyB,CAAC;AAAEC,MAAAA,KAAK,EAAE;AAAQ,KAAC,EACjE;AAAEF,MAAAA,KAAK,EAAEC,EAAE,CAAC,MAAM,EAAE,yBAAyB,CAAC;AAAEC,MAAAA,KAAK,EAAE;AAAO,KAAC,EAC/D;AAAEF,MAAAA,KAAK,EAAEC,EAAE,CAAC,OAAO,EAAE,yBAAyB,CAAC;AAAEC,MAAAA,KAAK,EAAE;AAAQ,KAAC,EACjE;AAAEF,MAAAA,KAAK,EAAEC,EAAE,CAAC,OAAO,EAAE,yBAAyB,CAAC;AAAEC,MAAAA,KAAK,EAAE;AAAQ,KAAC,CACjE;IACFR,QAAQ,EAAGS,YAAY,IAAK;MAC1BT,SAAQ,CAACS,YAAY,CAAC;AACxB,IAAA;AAAE,GACH,CAAC;AAEN;;;;"}
+{"version":3,"file":"PseudoElm.js","sources":["../../src/PseudoElm.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAcA;AACA,MAAM,oBAAoB,GAAG,CAAC,SAAyB,KAAI;IACzD,QAAQ,SAAS;AACf,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,mDAAmD;AAC5D,QAAA,KAAK,OAAO;AACV,YAAA,OAAO,iDAAiD;AAC1D,QAAA,KAAK,OAAO;AACV,YAAA,OAAO,kDAAkD;AAC3D,QAAA,KAAK,OAAO;AACV,YAAA,OAAO,kDAAkD;AAC3D,QAAA;YACE,OAAO,iDAAiD,CAAC;;AAE/D,CAAC;AAMM,MAAM,KAAK,GAAG,CAAC,EAAE,SAAS,GAAG,MAAM,EAAc,KAAK,GAAG,CAAA;;;;;;;;;;;MAW1D,oBAAoB,CAAC,SAAS,CAAC;;;AAIrC;AACA,MAAM,SAAS,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAkB,KAAI;IAC5D,QACE,cAAC,YAAY,EAAA,EACX,QAAQ,EAAE,SAAS,EACnB,OAAO,EAAE;AACP,YAAA,EAAE,KAAK,EAAE,EAAE,CAAC,OAAO,EAAE,yBAAyB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE;AACjE,YAAA,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,EAAE,yBAAyB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE;AAC/D,YAAA,EAAE,KAAK,EAAE,EAAE,CAAC,OAAO,EAAE,yBAAyB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE;AACjE,YAAA,EAAE,KAAK,EAAE,EAAE,CAAC,OAAO,EAAE,yBAAyB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE;AAClE,SAAA,EACD,QAAQ,EAAE,CAAC,YAAY,KAAI;YACzB,QAAQ,CAAC,YAA8B,CAAC;QAC1C,CAAC,EAAA,CACD;AAEN;;;;"}

package/build/esm/ShadowStyle.d.ts

@@ -0,0 +1,33 @@
+type CornerDirection = "top_left" | "top_right" | "bottom_left" | "bottom_right" | "right_bottom" | "top";
+interface ShadowState {
+    shadowType: "nomal" | "newmor" | "claymor" | "glassmor";
+    spread: number;
+    lateral: number;
+    longitude: number;
+    nomalBlur: number;
+    shadowColor: string;
+    blur: number;
+    intensity: number;
+    distance: number;
+    newDirection: CornerDirection;
+    clayDirection: CornerDirection;
+    embos: "swell" | "dent";
+    opacity: number;
+    depth: number;
+    bdBlur: number;
+    expand: number;
+    glassblur: number;
+    glassopa: number;
+    hasOutline: boolean;
+    baseColor: string;
+}
+interface ShadowResult {
+    style: React.CSSProperties;
+}
+export declare const ShadowElm: (shadowState: ShadowState) => ShadowResult | null;
+interface ShadowStyleProps {
+    shadowStyle: ShadowState;
+    onChange: (elm: ShadowResult, state: ShadowState) => void;
+}
+declare const ShadowStyle: ({ shadowStyle, onChange }: ShadowStyleProps) => JSX.Element;
+export default ShadowStyle;