se-design 1.1.1-dev-01 → 1.1.2

package/dist/index65.js

@@ -1,95 +1,106 @@
-import e, { useRef as T, useState as g } from "react";
-import { CustomModal as C } from "./index13.js";
-import { Icon as E } from "./index6.js";
+import e, { useRef as $, useState as E, useLayoutEffect as R } from "react";
+import { CustomModal as D } from "./index13.js";
+import { Icon as k } from "./index6.js";
 /* empty css         */
-const M = ({
-  children: l = null,
-  title: n = "",
-  onClose: s = () => {
+const I = ({
+  isOpen: n,
+  children: m = null,
+  title: t = "",
+  onClose: c = () => {
   },
-  showCloseIcon: m = !1,
-  showBackButton: a = !1,
-  onBack: i = () => {
+  showCloseIcon: u = !1,
+  showBackButton: r = !1,
+  onBack: f = () => {
   },
-  className: u = "",
-  automationId: r = "",
+  className: h = "",
+  automationId: s = "",
   minHeight: d = "auto",
-  maxHeight: c = ""
+  maxHeight: l = ""
 }) => {
-  const t = T(null), [p, b] = g(0), [k, h] = g(0), [Y, x] = g(!1), N = (o) => {
-    b(o.touches[0].clientY), h(o.touches[0].clientY), x(!0);
-  }, y = (o) => {
-    if (!Y) return;
-    const f = o.touches[0].clientY, v = f - p;
-    v > 0 && (h(f), t.current && (t.current.style.transform = `translateY(${v}px)`));
+  const a = $(null), [v, g] = E(0), [y, i] = E(0), [b, p] = E(!1), Y = () => {
+    a.current && (a.current.style.transform = "translateY(0)");
+  };
+  R(() => {
+    n && Y();
+  }, [n]);
+  const C = (o) => {
+    g(o.touches[0].clientY), i(o.touches[0].clientY), p(!0);
+  }, N = (o) => {
+    if (!b) return;
+    const x = o.touches[0].clientY, T = x - v;
+    T > 0 && (i(x), a.current && (a.current.style.transform = `translateY(${T}px)`));
   }, S = () => {
-    if (!Y) return;
-    k - p > 60 ? s() : t.current && (t.current.style.transform = "translateY(0)"), x(!1), b(0), h(0);
+    if (!b) return;
+    y - v > 60 ? c() : Y(), p(!1), g(0), i(0);
+  }, M = () => {
+    b && (Y(), p(!1), g(0), i(0));
   };
   return /* @__PURE__ */ e.createElement("div", {
-    ref: t,
-    className: `se-design-bottom-sheet relative h-max max-h-[98vh] rounded-t-2xl flex flex-col pt-5 ${u}`,
+    ref: a,
+    className: `se-design-bottom-sheet relative h-max max-h-[98vh] rounded-t-2xl flex flex-col pt-5 ${h}`,
     onClick: (o) => o.stopPropagation(),
-    onTouchStart: N,
-    onTouchMove: y,
+    onTouchStart: C,
+    onTouchMove: N,
     onTouchEnd: S,
-    "data-automation-id": r,
+    onTouchCancel: M,
+    "data-automation-id": s,
     style: {
       minHeight: d,
-      ...c ? {
-        maxHeight: c
+      ...l ? {
+        maxHeight: l
       } : {}
     }
-  }, (n || a) && /* @__PURE__ */ e.createElement("div", {
+  }, (t || r) && /* @__PURE__ */ e.createElement("div", {
     className: "se-design-bottom-sheet-header flex items-center justify-left gap-3 mr-6 px-4"
-  }, a && /* @__PURE__ */ e.createElement(E, {
+  }, r && /* @__PURE__ */ e.createElement(k, {
     name: "back",
     stroke: "var(--color-gray-700)",
-    onClick: i,
+    onClick: f,
     className: "se-design-bottom-sheet-back-icon cursor-pointer",
-    automationId: `${r}-back-icon`
-  }), n && /* @__PURE__ */ e.createElement("div", {
+    automationId: `${s}-back-icon`
+  }), t && /* @__PURE__ */ e.createElement("div", {
     className: "se-design-bottom-sheet-title text-lg font-semibold"
-  }, n)), m && /* @__PURE__ */ e.createElement(E, {
+  }, t)), u && /* @__PURE__ */ e.createElement(k, {
     name: "close",
-    onClick: s,
+    onClick: c,
     className: "se-design-bottom-sheet-close-icon absolute top-6 right-4 cursor-pointer z-10",
-    automationId: `${r}-close-icon`
+    automationId: `${s}-close-icon`
   }), /* @__PURE__ */ e.createElement("div", {
     className: "se-design-bottom-sheet-content px-4 pb-5 flex-1 min-h-0 overflow-y-auto"
-  }, l));
-}, _ = ({
-  isOpen: l = !1,
-  title: n = "",
-  onClose: s = () => {
+  }, m));
+}, L = ({
+  isOpen: n = !1,
+  title: m = "",
+  onClose: t = () => {
   },
-  children: m = null,
-  showCloseIcon: a = !0,
-  showBackButton: i = !1,
-  onBack: u = () => {
+  children: c = null,
+  showCloseIcon: u = !0,
+  showBackButton: r = !1,
+  onBack: f = () => {
   },
-  className: r = "",
-  automationId: d = "bottomsheet",
-  minHeight: c = "",
-  maxHeight: t = ""
-}) => /* @__PURE__ */ e.createElement(C, {
-  isOpen: l,
-  onClose: s,
-  onModalClick: s,
+  className: h = "",
+  automationId: s = "bottomsheet",
+  minHeight: d = "",
+  maxHeight: l = ""
+}) => /* @__PURE__ */ e.createElement(D, {
+  isOpen: n,
+  onClose: t,
+  onModalClick: t,
   className: "custom-bottom-sheet",
-  renderModalContent: () => /* @__PURE__ */ e.createElement(M, {
-    title: n,
-    onClose: s,
-    showCloseIcon: a,
-    showBackButton: i,
-    onBack: u,
-    className: r,
-    automationId: d,
-    minHeight: c,
-    maxHeight: t
-  }, m)
+  renderModalContent: () => /* @__PURE__ */ e.createElement(I, {
+    isOpen: n,
+    title: m,
+    onClose: t,
+    showCloseIcon: u,
+    showBackButton: r,
+    onBack: f,
+    className: h,
+    automationId: s,
+    minHeight: d,
+    maxHeight: l
+  }, c)
 });
 export {
-  _ as BottomSheet
+  L as BottomSheet
 };
 //# sourceMappingURL=index65.js.map

package/dist/index65.js.map

@@ -1 +1 @@
-{"version":3,"file":"index65.js","sources":["../src/components/BottomSheet/index.tsx"],"sourcesContent":["import React, { FC, useState, useRef } from 'react';\nimport { CustomModal } from '../CustomModal';\nimport { Icon } from '../Icon';\n\nimport './style.scss';\n\nexport interface BottomSheetProps {\n  isOpen: boolean;\n  title?: string;\n  onClose: () => void;\n  showCloseIcon?: boolean;\n  showBackButton?: boolean;\n  onBack?: () => void;\n  children: React.ReactNode;\n  className?: string;\n  automationId?: string;\n  minHeight?: string;\n  maxHeight?: string;\n}\n\ninterface BottomSheetContentProps {\n  title?: string;\n  onClose: () => void;\n  showCloseIcon?: boolean;\n  showBackButton?: boolean;\n  onBack?: () => void;\n  children: React.ReactNode;\n  className?: string;\n  automationId?: string;\n  minHeight?: string;\n  maxHeight?: string;\n}\n\nconst BottomSheetContent: FC<BottomSheetContentProps> = ({\n  children = null,\n  title = '',\n  onClose = () => {},\n  showCloseIcon = false,\n  showBackButton = false,\n  onBack = () => {},\n  className = '',\n  automationId = '',\n  minHeight = 'auto',\n  maxHeight = ''\n}) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [startY, setStartY] = useState<number>(0);\n  const [currentY, setCurrentY] = useState<number>(0);\n  const [isDragging, setIsDragging] = useState<boolean>(false);\n\n  const handleTouchStart = (e: React.TouchEvent) => {\n    setStartY(e.touches[0].clientY);\n    setCurrentY(e.touches[0].clientY);\n    setIsDragging(true);\n  };\n\n  const handleTouchMove = (e: React.TouchEvent) => {\n    if (!isDragging) return;\n\n    const touchY = e.touches[0].clientY;\n    const deltaY = touchY - startY;\n\n    // Only allow dragging down\n    if (deltaY > 0) {\n      setCurrentY(touchY);\n      if (contentRef.current) {\n        contentRef.current.style.transform = `translateY(${deltaY}px)`;\n      }\n    }\n  };\n\n  const handleTouchEnd = () => {\n    if (!isDragging) return;\n\n    const deltaY = currentY - startY;\n    const threshold = 60; // pixels to swipe down to trigger close\n\n    if (deltaY > threshold) {\n      // Trigger close\n      onClose();\n    } else {\n      // Reset position\n      if (contentRef.current) {\n        contentRef.current.style.transform = 'translateY(0)';\n      }\n    }\n\n    setIsDragging(false);\n    setStartY(0);\n    setCurrentY(0);\n  };\n\n  return (\n    <div\n      ref={contentRef}\n      className={`se-design-bottom-sheet relative h-max max-h-[98vh] rounded-t-2xl flex flex-col pt-5 ${className}`}\n      onClick={(e) => e.stopPropagation()}\n      onTouchStart={handleTouchStart}\n      onTouchMove={handleTouchMove}\n      onTouchEnd={handleTouchEnd}\n      data-automation-id={automationId}\n      style={{ minHeight, ...(maxHeight ? { maxHeight } : {}) }}\n    >\n      {(title || showBackButton) && (\n        <div className=\"se-design-bottom-sheet-header flex items-center justify-left gap-3 mr-6 px-4\">\n          {showBackButton && (\n            <Icon\n              name=\"back\"\n              stroke=\"var(--color-gray-700)\"\n              onClick={onBack}\n              className=\"se-design-bottom-sheet-back-icon cursor-pointer\"\n              automationId={`${automationId}-back-icon`}\n            />\n          )}\n          {title && <div className=\"se-design-bottom-sheet-title text-lg font-semibold\">{title}</div>}\n        </div>\n      )}\n      {showCloseIcon && (\n        <Icon\n          name=\"close\"\n          onClick={onClose}\n          className=\"se-design-bottom-sheet-close-icon absolute top-6 right-4 cursor-pointer z-10\"\n          automationId={`${automationId}-close-icon`}\n        />\n      )}\n      <div className=\"se-design-bottom-sheet-content px-4 pb-5 flex-1 min-h-0 overflow-y-auto\">{children}</div>\n    </div>\n  );\n};\n\nexport const BottomSheet: FC<BottomSheetProps> = ({\n  isOpen = false,\n  title = '',\n  onClose = () => {},\n  children = null,\n  showCloseIcon = true,\n  showBackButton = false,\n  onBack = () => {},\n  className = '',\n  automationId = 'bottomsheet',\n  minHeight = '',\n  maxHeight = ''\n}) => {\n  return (\n    <CustomModal\n      isOpen={isOpen}\n      onClose={onClose}\n      onModalClick={onClose}\n      className=\"custom-bottom-sheet\"\n      renderModalContent={() => (\n        <BottomSheetContent\n          title={title}\n          onClose={onClose}\n          showCloseIcon={showCloseIcon}\n          showBackButton={showBackButton}\n          onBack={onBack}\n          className={className}\n          automationId={automationId}\n          minHeight={minHeight}\n          maxHeight={maxHeight}\n        >\n          {children}\n        </BottomSheetContent>\n      )}\n    />\n  );\n};\n"],"names":["BottomSheetContent","children","title","onClose","showCloseIcon","showBackButton","onBack","className","automationId","minHeight","maxHeight","contentRef","useRef","startY","setStartY","useState","currentY","setCurrentY","isDragging","setIsDragging","handleTouchStart","e","touches","clientY","handleTouchMove","touchY","deltaY","current","style","transform","handleTouchEnd","React","createElement","ref","onClick","stopPropagation","onTouchStart","onTouchMove","onTouchEnd","Icon","name","stroke","BottomSheet","isOpen","CustomModal","onModalClick","renderModalContent"],"mappings":"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"}
+{"version":3,"file":"index65.js","sources":["../src/components/BottomSheet/index.tsx"],"sourcesContent":["import React, { FC, useLayoutEffect, useState, useRef } from 'react';\nimport { CustomModal } from '../CustomModal';\nimport { Icon } from '../Icon';\n\nimport './style.scss';\n\nexport interface BottomSheetProps {\n  isOpen: boolean;\n  title?: string;\n  onClose: () => void;\n  showCloseIcon?: boolean;\n  showBackButton?: boolean;\n  onBack?: () => void;\n  children: React.ReactNode;\n  className?: string;\n  automationId?: string;\n  minHeight?: string;\n  maxHeight?: string;\n}\n\ninterface BottomSheetContentProps {\n  isOpen: boolean;\n  title?: string;\n  onClose: () => void;\n  showCloseIcon?: boolean;\n  showBackButton?: boolean;\n  onBack?: () => void;\n  children: React.ReactNode;\n  className?: string;\n  automationId?: string;\n  minHeight?: string;\n  maxHeight?: string;\n}\n\nconst BottomSheetContent: FC<BottomSheetContentProps> = ({\n  isOpen,\n  children = null,\n  title = '',\n  onClose = () => {},\n  showCloseIcon = false,\n  showBackButton = false,\n  onBack = () => {},\n  className = '',\n  automationId = '',\n  minHeight = 'auto',\n  maxHeight = ''\n}) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [startY, setStartY] = useState<number>(0);\n  const [currentY, setCurrentY] = useState<number>(0);\n  const [isDragging, setIsDragging] = useState<boolean>(false);\n\n  const resetPosition = () => {\n    if (contentRef.current) {\n      contentRef.current.style.transform = 'translateY(0)';\n    }\n  };\n\n  // The modal keeps this content mounted while closed, so a swipe-to-close would leave its drag offset\n  // on the sheet and the next open would start that far down.\n  useLayoutEffect(() => {\n    if (isOpen) {\n      resetPosition();\n    }\n  }, [isOpen]);\n\n  const handleTouchStart = (e: React.TouchEvent) => {\n    setStartY(e.touches[0].clientY);\n    setCurrentY(e.touches[0].clientY);\n    setIsDragging(true);\n  };\n\n  const handleTouchMove = (e: React.TouchEvent) => {\n    if (!isDragging) return;\n\n    const touchY = e.touches[0].clientY;\n    const deltaY = touchY - startY;\n\n    // Only allow dragging down\n    if (deltaY > 0) {\n      setCurrentY(touchY);\n      if (contentRef.current) {\n        contentRef.current.style.transform = `translateY(${deltaY}px)`;\n      }\n    }\n  };\n\n  const handleTouchEnd = () => {\n    if (!isDragging) return;\n\n    const deltaY = currentY - startY;\n    const threshold = 60; // pixels to swipe down to trigger close\n\n    if (deltaY > threshold) {\n      // Trigger close\n      onClose();\n    } else {\n      resetPosition();\n    }\n\n    setIsDragging(false);\n    setStartY(0);\n    setCurrentY(0);\n  };\n\n  // A touch the browser takes over (a scroll, an alert, a tab switch) ends without touchend.\n  const handleTouchCancel = () => {\n    if (!isDragging) return;\n\n    resetPosition();\n    setIsDragging(false);\n    setStartY(0);\n    setCurrentY(0);\n  };\n\n  return (\n    <div\n      ref={contentRef}\n      className={`se-design-bottom-sheet relative h-max max-h-[98vh] rounded-t-2xl flex flex-col pt-5 ${className}`}\n      onClick={(e) => e.stopPropagation()}\n      onTouchStart={handleTouchStart}\n      onTouchMove={handleTouchMove}\n      onTouchEnd={handleTouchEnd}\n      onTouchCancel={handleTouchCancel}\n      data-automation-id={automationId}\n      style={{ minHeight, ...(maxHeight ? { maxHeight } : {}) }}\n    >\n      {(title || showBackButton) && (\n        <div className=\"se-design-bottom-sheet-header flex items-center justify-left gap-3 mr-6 px-4\">\n          {showBackButton && (\n            <Icon\n              name=\"back\"\n              stroke=\"var(--color-gray-700)\"\n              onClick={onBack}\n              className=\"se-design-bottom-sheet-back-icon cursor-pointer\"\n              automationId={`${automationId}-back-icon`}\n            />\n          )}\n          {title && <div className=\"se-design-bottom-sheet-title text-lg font-semibold\">{title}</div>}\n        </div>\n      )}\n      {showCloseIcon && (\n        <Icon\n          name=\"close\"\n          onClick={onClose}\n          className=\"se-design-bottom-sheet-close-icon absolute top-6 right-4 cursor-pointer z-10\"\n          automationId={`${automationId}-close-icon`}\n        />\n      )}\n      <div className=\"se-design-bottom-sheet-content px-4 pb-5 flex-1 min-h-0 overflow-y-auto\">{children}</div>\n    </div>\n  );\n};\n\nexport const BottomSheet: FC<BottomSheetProps> = ({\n  isOpen = false,\n  title = '',\n  onClose = () => {},\n  children = null,\n  showCloseIcon = true,\n  showBackButton = false,\n  onBack = () => {},\n  className = '',\n  automationId = 'bottomsheet',\n  minHeight = '',\n  maxHeight = ''\n}) => {\n  return (\n    <CustomModal\n      isOpen={isOpen}\n      onClose={onClose}\n      onModalClick={onClose}\n      className=\"custom-bottom-sheet\"\n      renderModalContent={() => (\n        <BottomSheetContent\n          isOpen={isOpen}\n          title={title}\n          onClose={onClose}\n          showCloseIcon={showCloseIcon}\n          showBackButton={showBackButton}\n          onBack={onBack}\n          className={className}\n          automationId={automationId}\n          minHeight={minHeight}\n          maxHeight={maxHeight}\n        >\n          {children}\n        </BottomSheetContent>\n      )}\n    />\n  );\n};\n"],"names":["BottomSheetContent","isOpen","children","title","onClose","showCloseIcon","showBackButton","onBack","className","automationId","minHeight","maxHeight","contentRef","useRef","startY","setStartY","useState","currentY","setCurrentY","isDragging","setIsDragging","resetPosition","current","style","transform","useLayoutEffect","handleTouchStart","e","touches","clientY","handleTouchMove","touchY","deltaY","handleTouchEnd","handleTouchCancel","React","createElement","ref","onClick","stopPropagation","onTouchStart","onTouchMove","onTouchEnd","onTouchCancel","Icon","name","stroke","BottomSheet","CustomModal","onModalClick","renderModalContent"],"mappings":"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"}

package/dist/index7.js

@@ -1,11 +1,11 @@
-import s, { useState as h, useCallback as i } from "react";
+import c, { useState as h, useCallback as i } from "react";
 import "./index78.js";
 import { isElementVisible as p } from "./index226.js";
 const x = ({
   skipLinks: n,
-  className: c = ""
+  className: r = ""
 }) => {
-  const [r, u] = h(n), l = i(() => {
+  const [s, u] = h(n), l = i(() => {
     const t = n.filter((e) => {
       const o = document.getElementById(e.id);
       return p(o);
@@ -30,10 +30,10 @@ const x = ({
       });
     }
   }, []);
-  return n.length === 0 ? null : /* @__PURE__ */ s.createElement("div", {
-    className: `se-design-skip-links-bar relative w-full h-0 overflow-hidden p-0 flex items-center justify-center bg-[var(--color-blue-50)] transition-[height] duration-300 ease-out focus-within:h-auto focus-within:py-1 focus-within:px-2 ${c}`,
+  return n.length === 0 ? null : /* @__PURE__ */ c.createElement("div", {
+    className: `se-design-skip-links-bar relative w-full h-0 overflow-hidden p-0 flex items-center justify-center bg-[var(--color-blue-50)] transition-[height] duration-300 ease-out focus-within:h-auto focus-within:py-1 focus-within:px-2 ${r}`,
     onFocus: a
-  }, r.map((t) => /* @__PURE__ */ s.createElement("a", {
+  }, s.map((t) => /* @__PURE__ */ c.createElement("a", {
     key: t.id,
     href: `#${t.id}`,
     className: "absolute -left-[9999px] [clip:rect(0,0,0,0)] no-underline text-[var(--color-blue-500)] text-md py-1 px-2.5 rounded capitalize focus:static focus:left-auto focus:[clip:auto] focus:outline-none focus-visible:!outline-none hover:text-[var(--color-blue-600)] hover:bg-[var(--color-blue-200)]",
@@ -43,7 +43,6 @@ const x = ({
   }, t.label)));
 };
 export {
-  x as SkipLinksBar,
-  x as default
+  x as SkipLinksBar
 };
 //# sourceMappingURL=index7.js.map

package/dist/index71.js

@@ -142,7 +142,6 @@ const K = {
   }));
 };
 export {
-  ea as Paywall,
-  ea as default
+  ea as Paywall
 };
 //# sourceMappingURL=index71.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "se-design",
-  "version": "1.1.1-dev-01",
+  "version": "1.1.2",
   "type": "module",
   "module": "dist/index.js",
   "exports": {