@design-edito/tools 0.4.4 → 0.4.5

package/components/Disclaimer/index.js

@@ -1,10 +1,111 @@
+// src/components/Disclaimer/index.tsx
 import {
-  Disclaimer
-} from "../../chunks/chunk-XFB4PUXO.js";
-import "../../chunks/chunk-IEZ3O5OF.js";
-import "../../chunks/chunk-TRFZSKNB.js";
-import "../../chunks/chunk-OFCSIK6J.js";
-import "../../chunks/chunk-WSFCRVEQ.js";
+  useState,
+  useEffect,
+  useRef
+} from "react";
+
+// src/agnostic/css/clss/index.ts
+function clss(blockNames, options) {
+  const blockNamesArr = Array.isArray(blockNames) ? blockNames : [blockNames];
+  return (eltNames = null, modNames = []) => {
+    const eltNamesArr = Array.isArray(eltNames) ? eltNames : [eltNames];
+    const modNamesArr = (Array.isArray(modNames) ? modNames : [modNames]).map((modName) => {
+      if (typeof modName === "string") return modName;
+      const trueModNames = Object.entries(modName).filter((entry) => entry[1] === true).map(([key]) => key);
+      return trueModNames;
+    }).flat();
+    const outputClassesArr = [];
+    blockNamesArr.forEach((compName) => {
+      eltNamesArr.forEach((eltName) => {
+        const targetPublicClss = eltName === null ? compName : `${compName}__${eltName}`;
+        const targetPrivateClss = eltName === null ? options?.cssModule[options.cssModuleRoot ?? "root"] : options?.cssModule[eltName];
+        outputClassesArr.push(targetPublicClss);
+        if (targetPrivateClss !== void 0) outputClassesArr.push(targetPrivateClss);
+        modNamesArr.forEach((modName) => {
+          const targetModifiedPublicClss = `${targetPublicClss}--${modName}`;
+          const targetModifiedPrivateClss = eltName === null ? options?.cssModule[`${options.cssModuleRoot ?? "root"}--${modName}`] : options?.cssModule[`${eltName}--${modName}`];
+          outputClassesArr.push(targetModifiedPublicClss);
+          if (targetModifiedPrivateClss !== void 0) outputClassesArr.push(targetModifiedPrivateClss);
+        });
+      });
+    });
+    return outputClassesArr.join(" ");
+  };
+}
+
+// src/components/utils/index.tsx
+function mergeClassNames(...names) {
+  return names.map((name) => {
+    if (typeof name !== "string" && !Array.isArray(name)) return false;
+    if (Array.isArray(name)) return mergeClassNames(...name);
+    if (name.trim() === "") return false;
+    return name.trim();
+  }).filter((name) => typeof name === "string").join(" ");
+}
+
+// src/components/public-classnames.ts
+var disclaimer = "dsed-disclaimer";
+
+// src/components/Disclaimer/index.tsx
+import cssModule from "./styles.module.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Disclaimer = ({
+  content,
+  togglerContent,
+  isOn: isOnProp,
+  defaultIsOn: defaultIsOnProp,
+  stateHandlers,
+  actionHandlers,
+  children,
+  className
+}) => {
+  const [internalIsOn, setInternalIsOn] = useState(isOnProp ?? defaultIsOnProp ?? true);
+  const isOn = isOnProp ?? internalIsOn;
+  const pIsOn = useRef(isOn);
+  useEffect(() => {
+    if (pIsOn.current === isOn) return;
+    stateHandlers?.toggled?.(isOn);
+    pIsOn.current = isOn;
+  }, [isOn]);
+  const handleDismissClick = () => {
+    actionHandlers?.dismissClick?.(isOn);
+    if (isOnProp !== void 0) return;
+    setInternalIsOn(false);
+  };
+  const c = clss(disclaimer, { cssModule });
+  const rootClss = mergeClassNames(
+    c(null, {
+      on: isOn,
+      off: !isOn
+    }),
+    className
+  );
+  const panelClss = c("panel");
+  const contentClss = c("content");
+  const btnClss = c("toggler");
+  const sensitiveClss = c("sensitive");
+  return /* @__PURE__ */ jsxs("div", { className: rootClss, children: [
+    /* @__PURE__ */ jsxs("div", { className: panelClss, children: [
+      content !== void 0 && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: contentClss,
+          children: content
+        }
+      ),
+      togglerContent !== void 0 && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: btnClss,
+          onClick: handleDismissClick,
+          children: togglerContent
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: sensitiveClss, children })
+  ] });
+};
 export {
   Disclaimer
 };

package/components/Drawer/index.js

@@ -1,25 +1,134 @@
+// src/components/Drawer/index.tsx
 import {
-  ResizeObserverComponent
-} from "../../chunks/chunk-GG4EFNMU.js";
-import {
-  drawer
-} from "../../chunks/chunk-IEZ3O5OF.js";
-import {
-  clss
-} from "../../chunks/chunk-TRFZSKNB.js";
-import {
-  mergeClassNames
-} from "../../chunks/chunk-OFCSIK6J.js";
-import "../../chunks/chunk-WSFCRVEQ.js";
+  useState as useState2,
+  useRef as useRef2,
+  useEffect as useEffect2
+} from "react";
+
+// src/agnostic/css/clss/index.ts
+function clss(blockNames, options) {
+  const blockNamesArr = Array.isArray(blockNames) ? blockNames : [blockNames];
+  return (eltNames = null, modNames = []) => {
+    const eltNamesArr = Array.isArray(eltNames) ? eltNames : [eltNames];
+    const modNamesArr = (Array.isArray(modNames) ? modNames : [modNames]).map((modName) => {
+      if (typeof modName === "string") return modName;
+      const trueModNames = Object.entries(modName).filter((entry) => entry[1] === true).map(([key]) => key);
+      return trueModNames;
+    }).flat();
+    const outputClassesArr = [];
+    blockNamesArr.forEach((compName) => {
+      eltNamesArr.forEach((eltName) => {
+        const targetPublicClss = eltName === null ? compName : `${compName}__${eltName}`;
+        const targetPrivateClss = eltName === null ? options?.cssModule[options.cssModuleRoot ?? "root"] : options?.cssModule[eltName];
+        outputClassesArr.push(targetPublicClss);
+        if (targetPrivateClss !== void 0) outputClassesArr.push(targetPrivateClss);
+        modNamesArr.forEach((modName) => {
+          const targetModifiedPublicClss = `${targetPublicClss}--${modName}`;
+          const targetModifiedPrivateClss = eltName === null ? options?.cssModule[`${options.cssModuleRoot ?? "root"}--${modName}`] : options?.cssModule[`${eltName}--${modName}`];
+          outputClassesArr.push(targetModifiedPublicClss);
+          if (targetModifiedPrivateClss !== void 0) outputClassesArr.push(targetModifiedPrivateClss);
+        });
+      });
+    });
+    return outputClassesArr.join(" ");
+  };
+}
+
+// src/components/utils/index.tsx
+function mergeClassNames(...names) {
+  return names.map((name) => {
+    if (typeof name !== "string" && !Array.isArray(name)) return false;
+    if (Array.isArray(name)) return mergeClassNames(...name);
+    if (name.trim() === "") return false;
+    return name.trim();
+  }).filter((name) => typeof name === "string").join(" ");
+}
+
+// src/components/public-classnames.ts
+var drawer = "dsed-drawer";
+var resizeObserver = "dsed-resize-observer";
 
 // src/components/Drawer/index.tsx
+import cssModule2 from "./styles.module.css";
+
+// src/components/ResizeObserver/index.tsx
 import {
-  useState,
   useRef,
-  useEffect
+  useEffect,
+  useState
 } from "react";
-import cssModule from "./styles.module.css";
-import { jsx, jsxs } from "react/jsx-runtime";
+import cssModule from "./style.module.css";
+import { jsx } from "react/jsx-runtime";
+var ResizeObserverComponent = ({
+  className,
+  onResized,
+  children
+}) => {
+  const [roEntry, setRoEntry] = useState();
+  const rootRef = useRef(null);
+  const observerRef = useRef(null);
+  const createObserver = () => {
+    const root = rootRef.current;
+    observerRef.current?.disconnect();
+    if (root === null) return;
+    observerRef.current = new ResizeObserver((entries) => {
+      const firstEntry = entries[0];
+      if (firstEntry !== void 0) {
+        const boundingClientRect = firstEntry.target.getBoundingClientRect();
+        const fullEntry = {
+          entry: firstEntry,
+          boundingClientRect
+        };
+        setRoEntry(fullEntry);
+        if (onResized === void 0) return;
+        onResized(fullEntry);
+      }
+    });
+    observerRef.current.observe(root);
+  };
+  useEffect(() => {
+    createObserver();
+    return () => observerRef.current?.disconnect();
+  }, [onResized]);
+  const {
+    x,
+    y,
+    top,
+    left,
+    bottom,
+    right,
+    width,
+    height
+  } = roEntry?.entry.contentRect ?? {};
+  const contentRect = { x, y, top, left, bottom, right, width, height };
+  const dataAttributes = Object.entries(contentRect).reduce((acc, [key, val]) => {
+    if (val === void 0) return acc;
+    return { ...acc, [`data-${key}`]: val.toString() };
+  }, {});
+  const cssCustomProps = Object.entries(contentRect).reduce((acc, [key, val]) => {
+    if (val === void 0) return acc;
+    return {
+      ...acc,
+      [`--${resizeObserver}-${key}`]: val.toString(),
+      [`--${resizeObserver}-${key}-px`]: `${val.toString()}px`
+    };
+  }, {});
+  const c = clss(resizeObserver, { cssModule });
+  const rootClss = mergeClassNames(c(null), className);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...dataAttributes,
+      className: rootClss,
+      ref: rootRef,
+      style: { ...cssCustomProps },
+      children
+    }
+  );
+};
+
+// src/components/Drawer/index.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var Drawer = ({
   openerContent,
   closerContent,
@@ -29,11 +138,11 @@ var Drawer = ({
   className,
   children
 }) => {
-  const [internalIsOpened, setInternalIsOpened] = useState(isOpenedProp ?? initialIsOpened);
+  const [internalIsOpened, setInternalIsOpened] = useState2(isOpenedProp ?? initialIsOpened);
   const isOpened = isOpenedProp ?? internalIsOpened;
-  const pIsOpened = useRef(isOpened);
-  const [{ width, height }, setContentDimensions] = useState({});
-  useEffect(() => {
+  const pIsOpened = useRef2(isOpened);
+  const [{ width, height }, setContentDimensions] = useState2({});
+  useEffect2(() => {
     if (pIsOpened.current === isOpened) return;
     pIsOpened.current = isOpened;
     stateHandlers?.toggled?.(isOpened);
@@ -50,7 +159,7 @@ var Drawer = ({
     const { width: width2, height: height2 } = entry?.contentRect ?? {};
     setContentDimensions({ width: width2, height: height2 });
   };
-  const c = clss(drawer, { cssModule });
+  const c = clss(drawer, { cssModule: cssModule2 });
   const rootClss = mergeClassNames(c(null, {
     "opened": isOpened,
     "closed": !isOpened
@@ -78,9 +187,9 @@ var Drawer = ({
       ...dataAttributes,
       style: { ...customCssProps },
       children: [
-        /* @__PURE__ */ jsx("div", { className: openerClss, onClick: handleOpenerClick, children: openerContent }),
-        /* @__PURE__ */ jsx("div", { className: closerClss, onClick: handleCloserClick, children: closerContent }),
-        /* @__PURE__ */ jsx("div", { className: contentClss, children: /* @__PURE__ */ jsx(ResizeObserverComponent, { onResized: handleROCompResize, children }) })
+        /* @__PURE__ */ jsx2("div", { className: openerClss, onClick: handleOpenerClick, children: openerContent }),
+        /* @__PURE__ */ jsx2("div", { className: closerClss, onClick: handleCloserClick, children: closerContent }),
+        /* @__PURE__ */ jsx2("div", { className: contentClss, children: /* @__PURE__ */ jsx2(ResizeObserverComponent, { onResized: handleROCompResize, children }) })
       ]
     }
   );

package/components/EventListener/index.js

@@ -1,19 +1,52 @@
-import {
-  eventListener
-} from "../../chunks/chunk-IEZ3O5OF.js";
-import {
-  clss
-} from "../../chunks/chunk-TRFZSKNB.js";
-import {
-  mergeClassNames
-} from "../../chunks/chunk-OFCSIK6J.js";
-import "../../chunks/chunk-WSFCRVEQ.js";
-
 // src/components/EventListener/index.tsx
 import {
   useRef,
   useEffect
 } from "react";
+
+// src/agnostic/css/clss/index.ts
+function clss(blockNames, options) {
+  const blockNamesArr = Array.isArray(blockNames) ? blockNames : [blockNames];
+  return (eltNames = null, modNames = []) => {
+    const eltNamesArr = Array.isArray(eltNames) ? eltNames : [eltNames];
+    const modNamesArr = (Array.isArray(modNames) ? modNames : [modNames]).map((modName) => {
+      if (typeof modName === "string") return modName;
+      const trueModNames = Object.entries(modName).filter((entry) => entry[1] === true).map(([key]) => key);
+      return trueModNames;
+    }).flat();
+    const outputClassesArr = [];
+    blockNamesArr.forEach((compName) => {
+      eltNamesArr.forEach((eltName) => {
+        const targetPublicClss = eltName === null ? compName : `${compName}__${eltName}`;
+        const targetPrivateClss = eltName === null ? options?.cssModule[options.cssModuleRoot ?? "root"] : options?.cssModule[eltName];
+        outputClassesArr.push(targetPublicClss);
+        if (targetPrivateClss !== void 0) outputClassesArr.push(targetPrivateClss);
+        modNamesArr.forEach((modName) => {
+          const targetModifiedPublicClss = `${targetPublicClss}--${modName}`;
+          const targetModifiedPrivateClss = eltName === null ? options?.cssModule[`${options.cssModuleRoot ?? "root"}--${modName}`] : options?.cssModule[`${eltName}--${modName}`];
+          outputClassesArr.push(targetModifiedPublicClss);
+          if (targetModifiedPrivateClss !== void 0) outputClassesArr.push(targetModifiedPrivateClss);
+        });
+      });
+    });
+    return outputClassesArr.join(" ");
+  };
+}
+
+// src/components/utils/index.tsx
+function mergeClassNames(...names) {
+  return names.map((name) => {
+    if (typeof name !== "string" && !Array.isArray(name)) return false;
+    if (Array.isArray(name)) return mergeClassNames(...name);
+    if (name.trim() === "") return false;
+    return name.trim();
+  }).filter((name) => typeof name === "string").join(" ");
+}
+
+// src/components/public-classnames.ts
+var eventListener = "dsed-event-listener";
+
+// src/components/EventListener/index.tsx
 import cssModule from "./styles.module.css";
 import { jsx } from "react/jsx-runtime";
 var EventListenerComponent = ({

package/components/Gallery/index.js

@@ -1,14 +1,3 @@
-import {
-  gallery
-} from "../../chunks/chunk-IEZ3O5OF.js";
-import {
-  clss
-} from "../../chunks/chunk-TRFZSKNB.js";
-import {
-  mergeClassNames
-} from "../../chunks/chunk-OFCSIK6J.js";
-import "../../chunks/chunk-WSFCRVEQ.js";
-
 // src/components/Gallery/index.tsx
 import {
   Children,
@@ -17,6 +6,48 @@ import {
   useRef
 } from "react";
 
+// src/agnostic/css/clss/index.ts
+function clss(blockNames, options) {
+  const blockNamesArr = Array.isArray(blockNames) ? blockNames : [blockNames];
+  return (eltNames = null, modNames = []) => {
+    const eltNamesArr = Array.isArray(eltNames) ? eltNames : [eltNames];
+    const modNamesArr = (Array.isArray(modNames) ? modNames : [modNames]).map((modName) => {
+      if (typeof modName === "string") return modName;
+      const trueModNames = Object.entries(modName).filter((entry) => entry[1] === true).map(([key]) => key);
+      return trueModNames;
+    }).flat();
+    const outputClassesArr = [];
+    blockNamesArr.forEach((compName) => {
+      eltNamesArr.forEach((eltName) => {
+        const targetPublicClss = eltName === null ? compName : `${compName}__${eltName}`;
+        const targetPrivateClss = eltName === null ? options?.cssModule[options.cssModuleRoot ?? "root"] : options?.cssModule[eltName];
+        outputClassesArr.push(targetPublicClss);
+        if (targetPrivateClss !== void 0) outputClassesArr.push(targetPrivateClss);
+        modNamesArr.forEach((modName) => {
+          const targetModifiedPublicClss = `${targetPublicClss}--${modName}`;
+          const targetModifiedPrivateClss = eltName === null ? options?.cssModule[`${options.cssModuleRoot ?? "root"}--${modName}`] : options?.cssModule[`${eltName}--${modName}`];
+          outputClassesArr.push(targetModifiedPublicClss);
+          if (targetModifiedPrivateClss !== void 0) outputClassesArr.push(targetModifiedPrivateClss);
+        });
+      });
+    });
+    return outputClassesArr.join(" ");
+  };
+}
+
+// src/components/utils/index.tsx
+function mergeClassNames(...names) {
+  return names.map((name) => {
+    if (typeof name !== "string" && !Array.isArray(name)) return false;
+    if (Array.isArray(name)) return mergeClassNames(...name);
+    if (name.trim() === "") return false;
+    return name.trim();
+  }).filter((name) => typeof name === "string").join(" ");
+}
+
+// src/components/public-classnames.ts
+var gallery = "dsed-gallery";
+
 // src/components/Gallery/utils.ts
 var forceActivateSlot = (div, targetPos, smooth = true) => {
   if (div === null) return;