@lax-wp/design-system 0.14.3 → 0.14.5

package/dist/components/data-display/resizable-sidebar/ResizableSidebar.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),w=require("../../../_virtual/index.cjs.js"),R=require("framer-motion"),l=require("react"),I=require("react-dom"),T=require("re-resizable"),q=require("../../../hooks/useResponsiveWidth.cjs.js"),B=()=>t.jsx("div",{className:"cursor-ew-resize flex items-center justify-center rounded-full bg-[#1018288F] bg-opacity-55 w-8 h-8 shadow-200 border-[1.5px] border-[#FFFFFF3D]",children:t.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t.jsx("mask",{id:"mask0_36675_12",maskUnits:"userSpaceOnUse",x:"0",y:"0",width:"20",height:"20",children:t.jsx("rect",{y:"20",width:"20",height:"20",transform:"rotate(-90 0 20)",fill:"#D9D9D9"})}),t.jsx("g",{mask:"url(#mask0_36675_12)",children:t.jsx("path",{d:"M15.9583 10L12.7292 6.77084C12.5625 6.60418 12.4792 6.40973 12.4792 6.18751C12.4792 5.96529 12.5625 5.77084 12.7292 5.60418C12.8958 5.43751 13.0938 5.35418 13.3229 5.35418C13.5521 5.35418 13.75 5.43751 13.9167 5.60418L17.1458 8.81251C17.4653 9.13195 17.625 9.52779 17.625 10C17.625 10.4722 17.4653 10.8681 17.1458 11.1875L13.9167 14.4167C13.75 14.5833 13.5521 14.6632 13.3229 14.6563C13.0938 14.6493 12.8958 14.5625 12.7292 14.3958C12.5625 14.2292 12.4792 14.0313 12.4792 13.8021C12.4792 13.5729 12.5625 13.375 12.7292 13.2083L15.9583 10ZM4.04167 10L7.25 13.2083C7.41667 13.375 7.49653 13.5695 7.48958 13.7917C7.48264 14.0139 7.40278 14.2083 7.25 14.375C7.08333 14.5417 6.88542 14.6285 6.65625 14.6354C6.42708 14.6424 6.22917 14.5625 6.0625 14.3958L2.85417 11.1875C2.53472 10.8681 2.375 10.4722 2.375 10C2.375 9.52779 2.53472 9.13195 2.85417 8.81251L6.0625 5.60418C6.22917 5.43751 6.42708 5.35765 6.65625 5.36459C6.88542 5.37154 7.08333 5.45834 7.25 5.62501C7.40278 5.79168 7.48264 5.98612 7.48958 6.20834C7.49653 6.43057 7.41667 6.62501 7.25 6.79168L4.04167 10Z",fill:"white"})})]})}),H=(e,i)=>{const r=document.getElementById(e);r?i(r):requestAnimationFrame(()=>{const s=document.getElementById(e);s&&i(s)})},U=(e,i)=>{if(e.current){if(i)localStorage.setItem("resizable-sidebar-width-before-fullscreen",String(e.current.size?.width));else{const r=localStorage.getItem("resizable-sidebar-width-before-fullscreen");if(r){e.current.updateSize({width:r,height:"100%"});return}}e.current.updateSize({width:i?"100vw":"",height:"100%"})}},Z=(e,i,r,s,o,b)=>{const[c,a]=l.useState(!1),[d,n]=l.useState(null);return l.useEffect(()=>{if(!e||typeof window>"u"){n(null);return}H(e,n)},[e]),l.useEffect(()=>{U(o,r)},[r]),l.useEffect(()=>{if(e&&i){const u=requestAnimationFrame(()=>{a(!0)});return()=>{cancelAnimationFrame(u),a(!1)}}e||a(!0),i||a(!1)},[i,e]),l.useEffect(()=>{o.current?.size?.width&&s&&s(o.current.size.width)},[o.current?.size?.width,s]),{shouldRenderSidebar:c,portalTarget:d}},$=({isOpen:e,header:i,id:r,ref:s,className:o,containerClassName:b,headerClassName:c,widthStyle:a,heightStyle:d,motionVariants:n,resizableRef:u,fullScreen:f,maxResizableWidth:g,minWidth:x,handleKey:h,onDragEnd:p,onResize:v,children:y})=>t.jsx(R.AnimatePresence,{children:e&&t.jsx(R.motion.div,{ref:s,id:r,initial:n.initial,animate:n.animate,exit:n.exit,transition:{type:"tween",duration:.3},className:w("flex-shrink-0 z-50 relative bg-white border-neutral-200 dark:bg-black-800 dark:border-black-700",f?"fixed w-full transition translate-x-4 duration-300":"sticky",o),style:{width:a,height:d},children:t.jsx(T.Resizable,{onResize:m=>{m.stopPropagation();const j=u.current?.size?.width;v&&v(j||x)},onResizeStart:m=>{m.stopPropagation()},ref:u,maxWidth:f?g:g*.75,minWidth:x,minHeight:d,maxHeight:d,enable:f?{}:{[h]:!0},handleClasses:{[h]:w("relative w-6 -left-1 flex items-center justify-center bg-transparent transition-colors cursor-ew-resize group z-[9999] hover:bg-neutral-200 dark:hover:bg-neutral-700")},handleComponent:{[h]:t.jsx("div",{className:w("absolute -left-2.5 top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-12 cursor-ew-resize opacity-0 group-hover:opacity-100 hover:opacity-100 active:opacity-100 transition-opacity z-[9999]",h==="left"&&"-right-2.5 -left-auto"),children:t.jsx(B,{})})},className:"!h-full",onResizeStop:p||void 0,children:t.jsxs("div",{className:w("h-full w-full flex flex-col overflow-hidden @container/sidebar border-b border-neutral-200 dark:border-black-700 bg-white dark:bg-black-800 dark:border",b),children:[i?t.jsx("div",{className:w("py-4 px-6",c),children:i||null}):null,t.jsx("div",{className:"flex-1 overflow-y-auto overflow-x-hidden",children:y})]})})})}),D=l.forwardRef(({isOpen:e,children:i,fullScreen:r=!1,defaultSize:s=void 0,minWidth:o=400,onDragEnd:b=null,onResize:c,className:a,placement:d="right",parentContainer:n,header:u,id:f,containerClassName:g,headerClassName:x,ignoreParentContainerHeight:h=!1,height:p,isMainSidebarExpanded:v=!1,mainSidebarExpandedWidth:y=280,mainSidebarCollapsedWidth:m=80,navbarHeight:j=64},E)=>{const L=v?y:m,k=l.useRef(null),{shouldRenderSidebar:C,portalTarget:z}=Z(n,e,r,c,k),N=typeof window<"u"?window.innerWidth-L:0,W=q.useResponsiveWidth(o),M=q.useResponsiveWidth(s),S=d==="right",P=p||(n&&!h?"100%":`calc(100vh - ${j}px)`),_={initial:{x:S?"100%":"-100%"},animate:{x:0},exit:{x:S?"100%":"-100%"}},A=S?"left":"right",F=t.jsx($,{isOpen:e,header:u,id:f,ref:E,className:a,containerClassName:g,headerClassName:x,widthStyle:M,heightStyle:P,motionVariants:_,resizableRef:k,fullScreen:r,maxResizableWidth:N,minWidth:W,handleKey:A,onDragEnd:b,onResize:c,children:i});return n?!C||!z?null:I.createPortal(F,z):C?F:null});D.displayName="ResizableSidebar";exports.ResizableSidebar=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),w=require("../../../_virtual/index.cjs.js"),R=require("framer-motion"),l=require("react"),I=require("react-dom"),T=require("re-resizable"),q=require("../../../hooks/useResponsiveWidth.cjs.js"),B=()=>t.jsx("div",{className:"cursor-ew-resize flex items-center justify-center rounded-full bg-[#1018288F] bg-opacity-55 w-8 h-8 shadow-200 border-[1.5px] border-[#FFFFFF3D]",children:t.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t.jsx("mask",{id:"mask0_36675_12",maskUnits:"userSpaceOnUse",x:"0",y:"0",width:"20",height:"20",children:t.jsx("rect",{y:"20",width:"20",height:"20",transform:"rotate(-90 0 20)",fill:"#D9D9D9"})}),t.jsx("g",{mask:"url(#mask0_36675_12)",children:t.jsx("path",{d:"M15.9583 10L12.7292 6.77084C12.5625 6.60418 12.4792 6.40973 12.4792 6.18751C12.4792 5.96529 12.5625 5.77084 12.7292 5.60418C12.8958 5.43751 13.0938 5.35418 13.3229 5.35418C13.5521 5.35418 13.75 5.43751 13.9167 5.60418L17.1458 8.81251C17.4653 9.13195 17.625 9.52779 17.625 10C17.625 10.4722 17.4653 10.8681 17.1458 11.1875L13.9167 14.4167C13.75 14.5833 13.5521 14.6632 13.3229 14.6563C13.0938 14.6493 12.8958 14.5625 12.7292 14.3958C12.5625 14.2292 12.4792 14.0313 12.4792 13.8021C12.4792 13.5729 12.5625 13.375 12.7292 13.2083L15.9583 10ZM4.04167 10L7.25 13.2083C7.41667 13.375 7.49653 13.5695 7.48958 13.7917C7.48264 14.0139 7.40278 14.2083 7.25 14.375C7.08333 14.5417 6.88542 14.6285 6.65625 14.6354C6.42708 14.6424 6.22917 14.5625 6.0625 14.3958L2.85417 11.1875C2.53472 10.8681 2.375 10.4722 2.375 10C2.375 9.52779 2.53472 9.13195 2.85417 8.81251L6.0625 5.60418C6.22917 5.43751 6.42708 5.35765 6.65625 5.36459C6.88542 5.37154 7.08333 5.45834 7.25 5.62501C7.40278 5.79168 7.48264 5.98612 7.48958 6.20834C7.49653 6.43057 7.41667 6.62501 7.25 6.79168L4.04167 10Z",fill:"white"})})]})}),H=(e,i)=>{const r=document.getElementById(e);r?i(r):requestAnimationFrame(()=>{const s=document.getElementById(e);s&&i(s)})},U=(e,i)=>{if(e.current){if(i)localStorage.setItem("resizable-sidebar-width-before-fullscreen",String(e.current.size?.width));else{const r=localStorage.getItem("resizable-sidebar-width-before-fullscreen");if(r){e.current.updateSize({width:r,height:"100%"});return}}e.current.updateSize({width:i?"100vw":"",height:"100%"})}},Z=(e,i,r,s,o,g)=>{const[u,a]=l.useState(!1),[d,n]=l.useState(null);return l.useEffect(()=>{if(!e||typeof window>"u"){n(null);return}H(e,n)},[e]),l.useEffect(()=>{U(o,r)},[r]),l.useEffect(()=>{if(e&&i){const h=requestAnimationFrame(()=>{a(!0)});return()=>{cancelAnimationFrame(h),a(!1)}}e||a(!0),i||a(!1)},[i,e]),l.useEffect(()=>{o.current?.size?.width&&s&&s(o.current.size.width)},[o.current?.size?.width,s]),{shouldRenderSidebar:u,portalTarget:d}},$=({isOpen:e,header:i,id:r,ref:s,className:o,containerClassName:g,headerClassName:u,widthStyle:a,heightStyle:d,motionVariants:n,resizableRef:h,fullScreen:f,maxResizableWidth:b,minWidth:x,handleKey:c,onDragEnd:p,onResize:v,children:y})=>t.jsx(R.AnimatePresence,{children:e&&t.jsx(R.motion.div,{ref:s,id:r,initial:n.initial,animate:n.animate,exit:n.exit,transition:{type:"tween",duration:.3},className:w("flex-shrink-0 z-50 relative bg-white border-neutral-200 dark:bg-black-800 dark:border-black-700",f?"fixed w-full transition translate-x-4 duration-300":"sticky",o),style:{width:a,height:d},children:t.jsx(T.Resizable,{onResize:m=>{m.stopPropagation();const j=h.current?.size?.width;v&&v(j||x)},onResizeStart:m=>{m.stopPropagation()},ref:h,maxWidth:f?b:b*.75,minWidth:x,minHeight:d,maxHeight:d,enable:f?{}:{[c]:!0},handleClasses:{[c]:w("relative w-6 flex items-center justify-center bg-transparent transition-colors cursor-ew-resize group z-[9999] hover:bg-neutral-200 dark:hover:bg-neutral-700",c==="left"?"-left-1":"-right-1")},handleComponent:{[c]:t.jsx("div",{className:w("absolute top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-12 cursor-ew-resize opacity-0 group-hover:opacity-100 hover:opacity-100 active:opacity-100 transition-opacity z-[9999]",c==="left"?"-left-2.5":"-right-2.5"),children:t.jsx(B,{})})},className:"!h-full",onResizeStop:p||void 0,children:t.jsxs("div",{className:w("h-full w-full flex flex-col overflow-hidden @container/sidebar border-b border-neutral-200 dark:border-black-700 bg-white dark:bg-black-800 dark:border",g),children:[i?t.jsx("div",{className:w("py-4 px-6",u),children:i||null}):null,t.jsx("div",{className:"flex-1 overflow-y-auto overflow-x-hidden",children:y})]})})})}),D=l.forwardRef(({isOpen:e,children:i,fullScreen:r=!1,defaultSize:s=void 0,minWidth:o=400,onDragEnd:g=null,onResize:u,className:a,placement:d="right",parentContainer:n,header:h,id:f,containerClassName:b,headerClassName:x,ignoreParentContainerHeight:c=!1,height:p,isMainSidebarExpanded:v=!1,mainSidebarExpandedWidth:y=280,mainSidebarCollapsedWidth:m=80,navbarHeight:j=64},E)=>{const L=v?y:m,k=l.useRef(null),{shouldRenderSidebar:C,portalTarget:z}=Z(n,e,r,u,k),N=typeof window<"u"?window.innerWidth-L:0,W=q.useResponsiveWidth(o),M=q.useResponsiveWidth(s),S=d==="right",P=p||(n&&!c?"100%":`calc(100vh - ${j}px)`),_={initial:{x:S?"100%":"-100%"},animate:{x:0},exit:{x:S?"100%":"-100%"}},A=S?"left":"right",F=t.jsx($,{isOpen:e,header:h,id:f,ref:E,className:a,containerClassName:b,headerClassName:x,widthStyle:M,heightStyle:P,motionVariants:_,resizableRef:k,fullScreen:r,maxResizableWidth:N,minWidth:W,handleKey:A,onDragEnd:g,onResize:u,children:i});return n?!C||!z?null:I.createPortal(F,z):C?F:null});D.displayName="ResizableSidebar";exports.ResizableSidebar=D;
 //# sourceMappingURL=ResizableSidebar.cjs.js.map

package/dist/components/data-display/resizable-sidebar/ResizableSidebar.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResizableSidebar.cjs.js","sources":["../../../../src/components/data-display/resizable-sidebar/ResizableSidebar.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Resizable } from \"re-resizable\";\n\nimport { useResponsiveWidth } from \"../../../hooks/useResponsiveWidth\";\n\n/**\n * Sidebar placement options\n */\nexport type ResizableSidebarPlacement = \"left\" | \"right\";\n\n/**\n * Props for the ResizableSidebar component\n */\nexport interface ResizableSidebarProps {\n  /** Whether the sidebar is open */\n  isOpen: boolean;\n  /** Content to display in the sidebar */\n  children: React.ReactNode;\n  /** Whether to display in full screen mode */\n  fullScreen?: boolean;\n  /** Callback when drag/resize ends */\n  onDragEnd?: (() => void) | null;\n  /** Callback when resize occurs */\n  onResize?: (width: number) => void;\n  /** Additional CSS classes for the wrapper */\n  className?: string;\n  /** Default size of the sidebar */\n  defaultSize?: string;\n  /** Minimum width of the sidebar */\n  minWidth?: number;\n  /** Placement of the sidebar */\n  placement?: ResizableSidebarPlacement;\n  /** Parent container ID for portal rendering */\n  parentContainer?: string;\n  /** Header content */\n  header?: React.ReactNode;\n  /** Unique ID for the sidebar */\n  id?: string;\n  /** Additional CSS classes for the container */\n  containerClassName?: string;\n  /** Additional CSS classes for the header wrapper */\n  headerClassName?: string;\n  /** Whether to ignore parent container height */\n  ignoreParentContainerHeight?: boolean;\n  /** Custom height */\n  height?: string;\n  /** Whether the main sidebar is expanded (affects max width calculation) */\n  isMainSidebarExpanded?: boolean;\n  /** Width of the main sidebar when expanded */\n  mainSidebarExpandedWidth?: number;\n  /** Width of the main sidebar when collapsed */\n  mainSidebarCollapsedWidth?: number;\n  /** Height offset for navbar */\n  navbarHeight?: number;\n}\n\n/**\n * Drag handle component for the resizable sidebar\n */\nconst DragHandle = () => {\n  return (\n    <div className=\"cursor-ew-resize flex items-center justify-center rounded-full bg-[#1018288F] bg-opacity-55 w-8 h-8 shadow-200 border-[1.5px] border-[#FFFFFF3D]\">\n      <svg\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 20 20\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <mask id=\"mask0_36675_12\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"20\" height=\"20\">\n          <rect y=\"20\" width=\"20\" height=\"20\" transform=\"rotate(-90 0 20)\" fill=\"#D9D9D9\" />\n        </mask>\n        <g mask=\"url(#mask0_36675_12)\">\n          <path\n            d=\"M15.9583 10L12.7292 6.77084C12.5625 6.60418 12.4792 6.40973 12.4792 6.18751C12.4792 5.96529 12.5625 5.77084 12.7292 5.60418C12.8958 5.43751 13.0938 5.35418 13.3229 5.35418C13.5521 5.35418 13.75 5.43751 13.9167 5.60418L17.1458 8.81251C17.4653 9.13195 17.625 9.52779 17.625 10C17.625 10.4722 17.4653 10.8681 17.1458 11.1875L13.9167 14.4167C13.75 14.5833 13.5521 14.6632 13.3229 14.6563C13.0938 14.6493 12.8958 14.5625 12.7292 14.3958C12.5625 14.2292 12.4792 14.0313 12.4792 13.8021C12.4792 13.5729 12.5625 13.375 12.7292 13.2083L15.9583 10ZM4.04167 10L7.25 13.2083C7.41667 13.375 7.49653 13.5695 7.48958 13.7917C7.48264 14.0139 7.40278 14.2083 7.25 14.375C7.08333 14.5417 6.88542 14.6285 6.65625 14.6354C6.42708 14.6424 6.22917 14.5625 6.0625 14.3958L2.85417 11.1875C2.53472 10.8681 2.375 10.4722 2.375 10C2.375 9.52779 2.53472 9.13195 2.85417 8.81251L6.0625 5.60418C6.22917 5.43751 6.42708 5.35765 6.65625 5.36459C6.88542 5.37154 7.08333 5.45834 7.25 5.62501C7.40278 5.79168 7.48264 5.98612 7.48958 6.20834C7.49653 6.43057 7.41667 6.62501 7.25 6.79168L4.04167 10Z\"\n            fill=\"white\"\n          />\n        </g>\n      </svg>\n    </div>\n  );\n};\n\n/**\n * ResizableSidebar component displays a resizable sidebar panel\n *\n * @example\n * ```tsx\n * <ResizableSidebar\n *   isOpen={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   placement=\"right\"\n *   minWidth={300}\n * >\n *   <div>Sidebar content</div>\n * </ResizableSidebar>\n * ```\n */\n// Helper functions to reduce cognitive complexity\nconst findParentContainer = (parentContainer: string, setPortalTarget: (target: HTMLElement | null) => void) => {\n  const el = document.getElementById(parentContainer);\n  if (el) {\n    setPortalTarget(el);\n  } else {\n    requestAnimationFrame(() => {\n      const retryEl = document.getElementById(parentContainer);\n      if (retryEl) setPortalTarget(retryEl);\n    });\n  }\n};\n\nconst handleFullScreenToggle = (resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>, fullScreen: boolean) => {\n  if (!resizableRef.current) return;\n\n  if (fullScreen) {\n    localStorage.setItem(\"resizable-sidebar-width-before-fullscreen\", String(resizableRef.current.size?.width));\n  } else {\n    const width = localStorage.getItem(\"resizable-sidebar-width-before-fullscreen\");\n    if (width) {\n      resizableRef.current.updateSize({ width: width, height: \"100%\" });\n      return;\n    }\n  }\n  resizableRef.current.updateSize({\n    width: fullScreen ? \"100vw\" : \"\",\n    height: \"100%\",\n  });\n};\n\nconst useSidebarEffects = (\n  parentContainer: string | undefined,\n  isOpen: boolean,\n  fullScreen: boolean,\n  onResize: ((width: number) => void) | undefined,\n  resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>,\n  _minWidth: number\n) => {\n  const [shouldRenderSidebar, setShouldRenderSidebar] = useState(false);\n  const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!parentContainer || typeof window === \"undefined\") {\n      setPortalTarget(null);\n      return;\n    }\n    findParentContainer(parentContainer, setPortalTarget);\n  }, [parentContainer]);\n\n  useEffect(() => {\n    handleFullScreenToggle(resizableRef, fullScreen);\n  }, [fullScreen]);\n\n  useEffect(() => {\n    if (parentContainer && isOpen) {\n      const frame = requestAnimationFrame(() => {\n        setShouldRenderSidebar(true);\n      });\n      return () => {\n        cancelAnimationFrame(frame);\n        setShouldRenderSidebar(false);\n      };\n    }\n\n    if (!parentContainer) {\n      setShouldRenderSidebar(true);\n    }\n\n    if (!isOpen) {\n      setShouldRenderSidebar(false);\n    }\n  }, [isOpen, parentContainer]);\n\n  useEffect(() => {\n    if (resizableRef.current?.size?.width && onResize) {\n      onResize(resizableRef.current.size.width);\n    }\n  }, [resizableRef.current?.size?.width, onResize]);\n\n  return { shouldRenderSidebar, portalTarget };\n};\n\nconst SidebarContent = ({\n  isOpen,\n  header,\n  id,\n  ref,\n  className,\n  containerClassName,\n  headerClassName,\n  widthStyle,\n  heightStyle,\n  motionVariants,\n  resizableRef,\n  fullScreen,\n  maxResizableWidth,\n  minWidth,\n  handleKey,\n  onDragEnd,\n  onResize,\n  children,\n}: {\n  isOpen: boolean;\n  header?: React.ReactNode;\n  id?: string;\n  ref: React.Ref<HTMLDivElement>;\n  className?: string;\n  containerClassName?: string;\n  headerClassName?: string;\n  widthStyle?: string | number;\n  heightStyle: string;\n  motionVariants: any;\n  resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>;\n  fullScreen: boolean;\n  maxResizableWidth: number;\n  minWidth: number;\n  handleKey: string;\n  onDragEnd?: (() => void) | null;\n  onResize?: (width: number) => void;\n  children: React.ReactNode;\n}) => (\n  <AnimatePresence>\n    {isOpen && (\n      <motion.div\n        ref={ref}\n        id={id}\n        initial={motionVariants.initial}\n        animate={motionVariants.animate}\n        exit={motionVariants.exit}\n        transition={{ type: \"tween\", duration: 0.3 }}\n        className={cn(\n          \"flex-shrink-0 z-50 relative bg-white border-neutral-200 dark:bg-black-800 dark:border-black-700\",\n          fullScreen ? \"fixed w-full transition translate-x-4 duration-300\" : \"sticky\",\n          className,\n        )}\n        style={{\n          width: widthStyle,\n          height: heightStyle,\n        }}\n      >\n        <Resizable\n          onResize={(e) => {\n            e.stopPropagation();\n            const width = resizableRef.current?.size?.width;\n            if (onResize) {\n              onResize(width || minWidth);\n            }\n          }}\n          onResizeStart={(e) => {\n            e.stopPropagation();\n          }}\n          ref={resizableRef}\n          maxWidth={fullScreen ? maxResizableWidth : maxResizableWidth * 0.75}\n          minWidth={minWidth}\n          minHeight={heightStyle}\n          maxHeight={heightStyle}\n          enable={fullScreen ? {} : { [handleKey]: true }}\n          handleClasses={{\n            [handleKey]: cn(\n              \"relative w-6 -left-1 flex items-center justify-center bg-transparent transition-colors cursor-ew-resize group z-[9999] hover:bg-neutral-200 dark:hover:bg-neutral-700\",\n            ),\n          }}\n          handleComponent={{\n            [handleKey]: (\n              <div\n                className={cn(\n                  \"absolute -left-2.5 top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-12 cursor-ew-resize opacity-0 group-hover:opacity-100 hover:opacity-100 active:opacity-100 transition-opacity z-[9999]\",\n                  handleKey === \"left\" && \"-right-2.5 -left-auto\",\n                )}\n              >\n                <DragHandle />\n              </div>\n            ),\n          }}\n          className=\"!h-full\"\n          onResizeStop={onDragEnd || undefined}\n        >\n          <div\n            className={cn(\n              \"h-full w-full flex flex-col overflow-hidden @container/sidebar border-b border-neutral-200 dark:border-black-700 bg-white dark:bg-black-800 dark:border\",\n              containerClassName,\n            )}\n          >\n            {header ? <div className={cn(\"py-4 px-6\", headerClassName)}>{header || null}</div> : null}\n            <div className=\"flex-1 overflow-y-auto overflow-x-hidden\">{children}</div>\n          </div>\n        </Resizable>\n      </motion.div>\n    )}  \n  </AnimatePresence>\n);\n\nexport const ResizableSidebar = forwardRef<HTMLDivElement, ResizableSidebarProps>(\n  (\n    {\n      isOpen,\n      children,\n      fullScreen = false,\n      defaultSize = undefined,\n      minWidth = 400,\n      onDragEnd = null,\n      onResize,\n      className,\n      placement = \"right\",\n      parentContainer,\n      header,\n      id,\n      containerClassName,\n      headerClassName,\n      ignoreParentContainerHeight = false,\n      height,\n      isMainSidebarExpanded = false,\n      mainSidebarExpandedWidth = 280,\n      mainSidebarCollapsedWidth = 80,\n      navbarHeight = 64,\n    },\n    ref\n  ) => {\n    const mainSidebarWidth = isMainSidebarExpanded ? mainSidebarExpandedWidth : mainSidebarCollapsedWidth;\n    const resizableRef = useRef<React.ElementRef<typeof Resizable>>(null);\n    const { shouldRenderSidebar, portalTarget } = useSidebarEffects(\n      parentContainer,\n      isOpen,\n      fullScreen,\n      onResize,\n      resizableRef,\n      minWidth\n    );\n\n    const maxResizableWidth = typeof window !== \"undefined\" ? window.innerWidth - mainSidebarWidth : 0;\n\n    // Passed sizes are the desktop maximum; both the drag floor and the open\n    // width shrink by viewport breakpoint.\n    const responsiveMinWidth = useResponsiveWidth(minWidth);\n    const responsiveDefaultSize = useResponsiveWidth(defaultSize);\n\n    const widthStyle = responsiveDefaultSize;\n    const isRight = placement === \"right\";\n    const heightStyle = height || (parentContainer && !ignoreParentContainerHeight ? \"100%\" : `calc(100vh - ${navbarHeight}px)`);\n\n    const motionVariants = {\n      initial: { x: isRight ? \"100%\" : \"-100%\" },\n      animate: { x: 0 },\n      exit: { x: isRight ? \"100%\" : \"-100%\" },\n    };\n\n    const handleKey = isRight ? \"left\" : \"right\";\n\n    const sidebarContent = (\n      <SidebarContent\n        isOpen={isOpen}\n        header={header}\n        id={id}\n        ref={ref}\n        className={className}\n        containerClassName={containerClassName}\n        headerClassName={headerClassName}\n        widthStyle={widthStyle}\n        heightStyle={heightStyle}\n        motionVariants={motionVariants}\n        resizableRef={resizableRef}\n        fullScreen={fullScreen}\n        maxResizableWidth={maxResizableWidth}\n        minWidth={responsiveMinWidth}\n        handleKey={handleKey}\n        onDragEnd={onDragEnd}\n        onResize={onResize}\n      >\n        {children}\n      </SidebarContent>\n    );\n\n    if (parentContainer) {\n      if (!shouldRenderSidebar || !portalTarget) return null;\n      return ReactDOM.createPortal(sidebarContent, portalTarget);\n    }\n\n    if (!shouldRenderSidebar) return null;\n\n    return sidebarContent;\n  }\n);\n\nResizableSidebar.displayName = \"ResizableSidebar\";\n"],"names":["DragHandle","jsx","jsxs","findParentContainer","parentContainer","setPortalTarget","el","retryEl","handleFullScreenToggle","resizableRef","fullScreen","width","useSidebarEffects","isOpen","onResize","_minWidth","shouldRenderSidebar","setShouldRenderSidebar","useState","portalTarget","useEffect","frame","SidebarContent","header","id","ref","className","containerClassName","headerClassName","widthStyle","heightStyle","motionVariants","maxResizableWidth","minWidth","handleKey","onDragEnd","children","AnimatePresence","motion","cn","Resizable","e","ResizableSidebar","forwardRef","defaultSize","placement","ignoreParentContainerHeight","height","isMainSidebarExpanded","mainSidebarExpandedWidth","mainSidebarCollapsedWidth","navbarHeight","mainSidebarWidth","useRef","responsiveMinWidth","useResponsiveWidth","isRight","sidebarContent","ReactDOM"],"mappings":"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"}
+{"version":3,"file":"ResizableSidebar.cjs.js","sources":["../../../../src/components/data-display/resizable-sidebar/ResizableSidebar.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Resizable } from \"re-resizable\";\n\nimport { useResponsiveWidth } from \"../../../hooks/useResponsiveWidth\";\n\n/**\n * Sidebar placement options\n */\nexport type ResizableSidebarPlacement = \"left\" | \"right\";\n\n/**\n * Props for the ResizableSidebar component\n */\nexport interface ResizableSidebarProps {\n  /** Whether the sidebar is open */\n  isOpen: boolean;\n  /** Content to display in the sidebar */\n  children: React.ReactNode;\n  /** Whether to display in full screen mode */\n  fullScreen?: boolean;\n  /** Callback when drag/resize ends */\n  onDragEnd?: (() => void) | null;\n  /** Callback when resize occurs */\n  onResize?: (width: number) => void;\n  /** Additional CSS classes for the wrapper */\n  className?: string;\n  /** Default size of the sidebar */\n  defaultSize?: string;\n  /** Minimum width of the sidebar */\n  minWidth?: number;\n  /** Placement of the sidebar */\n  placement?: ResizableSidebarPlacement;\n  /** Parent container ID for portal rendering */\n  parentContainer?: string;\n  /** Header content */\n  header?: React.ReactNode;\n  /** Unique ID for the sidebar */\n  id?: string;\n  /** Additional CSS classes for the container */\n  containerClassName?: string;\n  /** Additional CSS classes for the header wrapper */\n  headerClassName?: string;\n  /** Whether to ignore parent container height */\n  ignoreParentContainerHeight?: boolean;\n  /** Custom height */\n  height?: string;\n  /** Whether the main sidebar is expanded (affects max width calculation) */\n  isMainSidebarExpanded?: boolean;\n  /** Width of the main sidebar when expanded */\n  mainSidebarExpandedWidth?: number;\n  /** Width of the main sidebar when collapsed */\n  mainSidebarCollapsedWidth?: number;\n  /** Height offset for navbar */\n  navbarHeight?: number;\n}\n\n/**\n * Drag handle component for the resizable sidebar\n */\nconst DragHandle = () => {\n  return (\n    <div className=\"cursor-ew-resize flex items-center justify-center rounded-full bg-[#1018288F] bg-opacity-55 w-8 h-8 shadow-200 border-[1.5px] border-[#FFFFFF3D]\">\n      <svg\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 20 20\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <mask id=\"mask0_36675_12\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"20\" height=\"20\">\n          <rect y=\"20\" width=\"20\" height=\"20\" transform=\"rotate(-90 0 20)\" fill=\"#D9D9D9\" />\n        </mask>\n        <g mask=\"url(#mask0_36675_12)\">\n          <path\n            d=\"M15.9583 10L12.7292 6.77084C12.5625 6.60418 12.4792 6.40973 12.4792 6.18751C12.4792 5.96529 12.5625 5.77084 12.7292 5.60418C12.8958 5.43751 13.0938 5.35418 13.3229 5.35418C13.5521 5.35418 13.75 5.43751 13.9167 5.60418L17.1458 8.81251C17.4653 9.13195 17.625 9.52779 17.625 10C17.625 10.4722 17.4653 10.8681 17.1458 11.1875L13.9167 14.4167C13.75 14.5833 13.5521 14.6632 13.3229 14.6563C13.0938 14.6493 12.8958 14.5625 12.7292 14.3958C12.5625 14.2292 12.4792 14.0313 12.4792 13.8021C12.4792 13.5729 12.5625 13.375 12.7292 13.2083L15.9583 10ZM4.04167 10L7.25 13.2083C7.41667 13.375 7.49653 13.5695 7.48958 13.7917C7.48264 14.0139 7.40278 14.2083 7.25 14.375C7.08333 14.5417 6.88542 14.6285 6.65625 14.6354C6.42708 14.6424 6.22917 14.5625 6.0625 14.3958L2.85417 11.1875C2.53472 10.8681 2.375 10.4722 2.375 10C2.375 9.52779 2.53472 9.13195 2.85417 8.81251L6.0625 5.60418C6.22917 5.43751 6.42708 5.35765 6.65625 5.36459C6.88542 5.37154 7.08333 5.45834 7.25 5.62501C7.40278 5.79168 7.48264 5.98612 7.48958 6.20834C7.49653 6.43057 7.41667 6.62501 7.25 6.79168L4.04167 10Z\"\n            fill=\"white\"\n          />\n        </g>\n      </svg>\n    </div>\n  );\n};\n\n/**\n * ResizableSidebar component displays a resizable sidebar panel\n *\n * @example\n * ```tsx\n * <ResizableSidebar\n *   isOpen={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   placement=\"right\"\n *   minWidth={300}\n * >\n *   <div>Sidebar content</div>\n * </ResizableSidebar>\n * ```\n */\n// Helper functions to reduce cognitive complexity\nconst findParentContainer = (parentContainer: string, setPortalTarget: (target: HTMLElement | null) => void) => {\n  const el = document.getElementById(parentContainer);\n  if (el) {\n    setPortalTarget(el);\n  } else {\n    requestAnimationFrame(() => {\n      const retryEl = document.getElementById(parentContainer);\n      if (retryEl) setPortalTarget(retryEl);\n    });\n  }\n};\n\nconst handleFullScreenToggle = (resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>, fullScreen: boolean) => {\n  if (!resizableRef.current) return;\n\n  if (fullScreen) {\n    localStorage.setItem(\"resizable-sidebar-width-before-fullscreen\", String(resizableRef.current.size?.width));\n  } else {\n    const width = localStorage.getItem(\"resizable-sidebar-width-before-fullscreen\");\n    if (width) {\n      resizableRef.current.updateSize({ width: width, height: \"100%\" });\n      return;\n    }\n  }\n  resizableRef.current.updateSize({\n    width: fullScreen ? \"100vw\" : \"\",\n    height: \"100%\",\n  });\n};\n\nconst useSidebarEffects = (\n  parentContainer: string | undefined,\n  isOpen: boolean,\n  fullScreen: boolean,\n  onResize: ((width: number) => void) | undefined,\n  resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>,\n  _minWidth: number\n) => {\n  const [shouldRenderSidebar, setShouldRenderSidebar] = useState(false);\n  const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!parentContainer || typeof window === \"undefined\") {\n      setPortalTarget(null);\n      return;\n    }\n    findParentContainer(parentContainer, setPortalTarget);\n  }, [parentContainer]);\n\n  useEffect(() => {\n    handleFullScreenToggle(resizableRef, fullScreen);\n  }, [fullScreen]);\n\n  useEffect(() => {\n    if (parentContainer && isOpen) {\n      const frame = requestAnimationFrame(() => {\n        setShouldRenderSidebar(true);\n      });\n      return () => {\n        cancelAnimationFrame(frame);\n        setShouldRenderSidebar(false);\n      };\n    }\n\n    if (!parentContainer) {\n      setShouldRenderSidebar(true);\n    }\n\n    if (!isOpen) {\n      setShouldRenderSidebar(false);\n    }\n  }, [isOpen, parentContainer]);\n\n  useEffect(() => {\n    if (resizableRef.current?.size?.width && onResize) {\n      onResize(resizableRef.current.size.width);\n    }\n  }, [resizableRef.current?.size?.width, onResize]);\n\n  return { shouldRenderSidebar, portalTarget };\n};\n\nconst SidebarContent = ({\n  isOpen,\n  header,\n  id,\n  ref,\n  className,\n  containerClassName,\n  headerClassName,\n  widthStyle,\n  heightStyle,\n  motionVariants,\n  resizableRef,\n  fullScreen,\n  maxResizableWidth,\n  minWidth,\n  handleKey,\n  onDragEnd,\n  onResize,\n  children,\n}: {\n  isOpen: boolean;\n  header?: React.ReactNode;\n  id?: string;\n  ref: React.Ref<HTMLDivElement>;\n  className?: string;\n  containerClassName?: string;\n  headerClassName?: string;\n  widthStyle?: string | number;\n  heightStyle: string;\n  motionVariants: any;\n  resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>;\n  fullScreen: boolean;\n  maxResizableWidth: number;\n  minWidth: number;\n  handleKey: string;\n  onDragEnd?: (() => void) | null;\n  onResize?: (width: number) => void;\n  children: React.ReactNode;\n}) => (\n  <AnimatePresence>\n    {isOpen && (\n      <motion.div\n        ref={ref}\n        id={id}\n        initial={motionVariants.initial}\n        animate={motionVariants.animate}\n        exit={motionVariants.exit}\n        transition={{ type: \"tween\", duration: 0.3 }}\n        className={cn(\n          \"flex-shrink-0 z-50 relative bg-white border-neutral-200 dark:bg-black-800 dark:border-black-700\",\n          fullScreen ? \"fixed w-full transition translate-x-4 duration-300\" : \"sticky\",\n          className,\n        )}\n        style={{\n          width: widthStyle,\n          height: heightStyle,\n        }}\n      >\n        <Resizable\n          onResize={(e) => {\n            e.stopPropagation();\n            const width = resizableRef.current?.size?.width;\n            if (onResize) {\n              onResize(width || minWidth);\n            }\n          }}\n          onResizeStart={(e) => {\n            e.stopPropagation();\n          }}\n          ref={resizableRef}\n          maxWidth={fullScreen ? maxResizableWidth : maxResizableWidth * 0.75}\n          minWidth={minWidth}\n          minHeight={heightStyle}\n          maxHeight={heightStyle}\n          enable={fullScreen ? {} : { [handleKey]: true }}\n          handleClasses={{\n            [handleKey]: cn(\n              \"relative w-6 flex items-center justify-center bg-transparent transition-colors cursor-ew-resize group z-[9999] hover:bg-neutral-200 dark:hover:bg-neutral-700\",\n              // Offset must match the resized edge so it aligns with re-resizable's positioning.\n              handleKey === \"left\" ? \"-left-1\" : \"-right-1\",\n            ),\n          }}\n          handleComponent={{\n            [handleKey]: (\n              <div\n                className={cn(\n                  \"absolute top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-12 cursor-ew-resize opacity-0 group-hover:opacity-100 hover:opacity-100 active:opacity-100 transition-opacity z-[9999]\",\n                  handleKey === \"left\" ? \"-left-2.5\" : \"-right-2.5\",\n                )}\n              >\n                <DragHandle />\n              </div>\n            ),\n          }}\n          className=\"!h-full\"\n          onResizeStop={onDragEnd || undefined}\n        >\n          <div\n            className={cn(\n              \"h-full w-full flex flex-col overflow-hidden @container/sidebar border-b border-neutral-200 dark:border-black-700 bg-white dark:bg-black-800 dark:border\",\n              containerClassName,\n            )}\n          >\n            {header ? <div className={cn(\"py-4 px-6\", headerClassName)}>{header || null}</div> : null}\n            <div className=\"flex-1 overflow-y-auto overflow-x-hidden\">{children}</div>\n          </div>\n        </Resizable>\n      </motion.div>\n    )}  \n  </AnimatePresence>\n);\n\nexport const ResizableSidebar = forwardRef<HTMLDivElement, ResizableSidebarProps>(\n  (\n    {\n      isOpen,\n      children,\n      fullScreen = false,\n      defaultSize = undefined,\n      minWidth = 400,\n      onDragEnd = null,\n      onResize,\n      className,\n      placement = \"right\",\n      parentContainer,\n      header,\n      id,\n      containerClassName,\n      headerClassName,\n      ignoreParentContainerHeight = false,\n      height,\n      isMainSidebarExpanded = false,\n      mainSidebarExpandedWidth = 280,\n      mainSidebarCollapsedWidth = 80,\n      navbarHeight = 64,\n    },\n    ref\n  ) => {\n    const mainSidebarWidth = isMainSidebarExpanded ? mainSidebarExpandedWidth : mainSidebarCollapsedWidth;\n    const resizableRef = useRef<React.ElementRef<typeof Resizable>>(null);\n    const { shouldRenderSidebar, portalTarget } = useSidebarEffects(\n      parentContainer,\n      isOpen,\n      fullScreen,\n      onResize,\n      resizableRef,\n      minWidth\n    );\n\n    const maxResizableWidth = typeof window !== \"undefined\" ? window.innerWidth - mainSidebarWidth : 0;\n\n    // Passed sizes are the desktop maximum; both the drag floor and the open\n    // width shrink by viewport breakpoint.\n    const responsiveMinWidth = useResponsiveWidth(minWidth);\n    const responsiveDefaultSize = useResponsiveWidth(defaultSize);\n\n    const widthStyle = responsiveDefaultSize;\n    const isRight = placement === \"right\";\n    const heightStyle = height || (parentContainer && !ignoreParentContainerHeight ? \"100%\" : `calc(100vh - ${navbarHeight}px)`);\n\n    const motionVariants = {\n      initial: { x: isRight ? \"100%\" : \"-100%\" },\n      animate: { x: 0 },\n      exit: { x: isRight ? \"100%\" : \"-100%\" },\n    };\n\n    const handleKey = isRight ? \"left\" : \"right\";\n\n    const sidebarContent = (\n      <SidebarContent\n        isOpen={isOpen}\n        header={header}\n        id={id}\n        ref={ref}\n        className={className}\n        containerClassName={containerClassName}\n        headerClassName={headerClassName}\n        widthStyle={widthStyle}\n        heightStyle={heightStyle}\n        motionVariants={motionVariants}\n        resizableRef={resizableRef}\n        fullScreen={fullScreen}\n        maxResizableWidth={maxResizableWidth}\n        minWidth={responsiveMinWidth}\n        handleKey={handleKey}\n        onDragEnd={onDragEnd}\n        onResize={onResize}\n      >\n        {children}\n      </SidebarContent>\n    );\n\n    if (parentContainer) {\n      if (!shouldRenderSidebar || !portalTarget) return null;\n      return ReactDOM.createPortal(sidebarContent, portalTarget);\n    }\n\n    if (!shouldRenderSidebar) return null;\n\n    return sidebarContent;\n  }\n);\n\nResizableSidebar.displayName = \"ResizableSidebar\";\n"],"names":["DragHandle","jsx","jsxs","findParentContainer","parentContainer","setPortalTarget","el","retryEl","handleFullScreenToggle","resizableRef","fullScreen","width","useSidebarEffects","isOpen","onResize","_minWidth","shouldRenderSidebar","setShouldRenderSidebar","useState","portalTarget","useEffect","frame","SidebarContent","header","id","ref","className","containerClassName","headerClassName","widthStyle","heightStyle","motionVariants","maxResizableWidth","minWidth","handleKey","onDragEnd","children","AnimatePresence","motion","cn","Resizable","e","ResizableSidebar","forwardRef","defaultSize","placement","ignoreParentContainerHeight","height","isMainSidebarExpanded","mainSidebarExpandedWidth","mainSidebarCollapsedWidth","navbarHeight","mainSidebarWidth","useRef","responsiveMinWidth","useResponsiveWidth","isRight","sidebarContent","ReactDOM"],"mappings":"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"}

package/dist/components/data-display/resizable-sidebar/ResizableSidebar.es.js

@@ -47,7 +47,7 @@ const U = () => /* @__PURE__ */ r("div", { className: "cursor-ew-resize flex ite
     });
   }
 }, G = (e, t, i, n, s, w) => {
-  const [d, a] = L(!1), [l, o] = L(null);
+  const [c, a] = L(!1), [l, o] = L(null);
   return v(() => {
     if (!e || typeof window > "u") {
       o(null);
@@ -58,17 +58,17 @@ const U = () => /* @__PURE__ */ r("div", { className: "cursor-ew-resize flex ite
     $(s, i);
   }, [i]), v(() => {
     if (e && t) {
-      const c = requestAnimationFrame(() => {
+      const h = requestAnimationFrame(() => {
         a(!0);
       });
       return () => {
-        cancelAnimationFrame(c), a(!1);
+        cancelAnimationFrame(h), a(!1);
       };
     }
     e || a(!0), t || a(!1);
   }, [t, e]), v(() => {
     s.current?.size?.width && n && n(s.current.size.width);
-  }, [s.current?.size?.width, n]), { shouldRenderSidebar: d, portalTarget: l };
+  }, [s.current?.size?.width, n]), { shouldRenderSidebar: c, portalTarget: l };
 }, J = ({
   isOpen: e,
   header: t,
@@ -76,15 +76,15 @@ const U = () => /* @__PURE__ */ r("div", { className: "cursor-ew-resize flex ite
   ref: n,
   className: s,
   containerClassName: w,
-  headerClassName: d,
+  headerClassName: c,
   widthStyle: a,
   heightStyle: l,
   motionVariants: o,
-  resizableRef: c,
+  resizableRef: h,
   fullScreen: u,
   maxResizableWidth: g,
   minWidth: b,
-  handleKey: h,
+  handleKey: d,
   onDragEnd: x,
   onResize: p,
   children: y
@@ -111,30 +111,32 @@ const U = () => /* @__PURE__ */ r("div", { className: "cursor-ew-resize flex ite
       {
         onResize: (f) => {
           f.stopPropagation();
-          const k = c.current?.size?.width;
+          const k = h.current?.size?.width;
           p && p(k || b);
         },
         onResizeStart: (f) => {
           f.stopPropagation();
         },
-        ref: c,
+        ref: h,
         maxWidth: u ? g : g * 0.75,
         minWidth: b,
         minHeight: l,
         maxHeight: l,
-        enable: u ? {} : { [h]: !0 },
+        enable: u ? {} : { [d]: !0 },
         handleClasses: {
-          [h]: m(
-            "relative w-6 -left-1 flex items-center justify-center bg-transparent transition-colors cursor-ew-resize group z-[9999] hover:bg-neutral-200 dark:hover:bg-neutral-700"
+          [d]: m(
+            "relative w-6 flex items-center justify-center bg-transparent transition-colors cursor-ew-resize group z-[9999] hover:bg-neutral-200 dark:hover:bg-neutral-700",
+            // Offset must match the resized edge so it aligns with re-resizable's positioning.
+            d === "left" ? "-left-1" : "-right-1"
           )
         },
         handleComponent: {
-          [h]: /* @__PURE__ */ r(
+          [d]: /* @__PURE__ */ r(
             "div",
             {
               className: m(
-                "absolute -left-2.5 top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-12 cursor-ew-resize opacity-0 group-hover:opacity-100 hover:opacity-100 active:opacity-100 transition-opacity z-[9999]",
-                h === "left" && "-right-2.5 -left-auto"
+                "absolute top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-12 cursor-ew-resize opacity-0 group-hover:opacity-100 hover:opacity-100 active:opacity-100 transition-opacity z-[9999]",
+                d === "left" ? "-left-2.5" : "-right-2.5"
               ),
               children: /* @__PURE__ */ r(U, {})
             }
@@ -150,7 +152,7 @@ const U = () => /* @__PURE__ */ r("div", { className: "cursor-ew-resize flex ite
               w
             ),
             children: [
-              t ? /* @__PURE__ */ r("div", { className: m("py-4 px-6", d), children: t || null }) : null,
+              t ? /* @__PURE__ */ r("div", { className: m("py-4 px-6", c), children: t || null }) : null,
               /* @__PURE__ */ r("div", { className: "flex-1 overflow-y-auto overflow-x-hidden", children: y })
             ]
           }
@@ -166,15 +168,15 @@ const U = () => /* @__PURE__ */ r("div", { className: "cursor-ew-resize flex ite
     defaultSize: n = void 0,
     minWidth: s = 400,
     onDragEnd: w = null,
-    onResize: d,
+    onResize: c,
     className: a,
     placement: l = "right",
     parentContainer: o,
-    header: c,
+    header: h,
     id: u,
     containerClassName: g,
     headerClassName: b,
-    ignoreParentContainerHeight: h = !1,
+    ignoreParentContainerHeight: d = !1,
     height: x,
     isMainSidebarExpanded: p = !1,
     mainSidebarExpandedWidth: y = 280,
@@ -185,13 +187,13 @@ const U = () => /* @__PURE__ */ r("div", { className: "cursor-ew-resize flex ite
       o,
       e,
       i,
-      d,
+      c,
       S
-    ), P = typeof window < "u" ? window.innerWidth - E : 0, _ = N(s), A = N(n), C = l === "right", I = x || (o && !h ? "100%" : `calc(100vh - ${k}px)`), D = /* @__PURE__ */ r(
+    ), P = typeof window < "u" ? window.innerWidth - E : 0, _ = N(s), A = N(n), C = l === "right", I = x || (o && !d ? "100%" : `calc(100vh - ${k}px)`), D = /* @__PURE__ */ r(
       J,
       {
         isOpen: e,
-        header: c,
+        header: h,
         id: u,
         ref: j,
         className: a,
@@ -210,7 +212,7 @@ const U = () => /* @__PURE__ */ r("div", { className: "cursor-ew-resize flex ite
         minWidth: _,
         handleKey: C ? "left" : "right",
         onDragEnd: w,
-        onResize: d,
+        onResize: c,
         children: t
       }
     );

package/dist/components/data-display/resizable-sidebar/ResizableSidebar.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResizableSidebar.es.js","sources":["../../../../src/components/data-display/resizable-sidebar/ResizableSidebar.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Resizable } from \"re-resizable\";\n\nimport { useResponsiveWidth } from \"../../../hooks/useResponsiveWidth\";\n\n/**\n * Sidebar placement options\n */\nexport type ResizableSidebarPlacement = \"left\" | \"right\";\n\n/**\n * Props for the ResizableSidebar component\n */\nexport interface ResizableSidebarProps {\n  /** Whether the sidebar is open */\n  isOpen: boolean;\n  /** Content to display in the sidebar */\n  children: React.ReactNode;\n  /** Whether to display in full screen mode */\n  fullScreen?: boolean;\n  /** Callback when drag/resize ends */\n  onDragEnd?: (() => void) | null;\n  /** Callback when resize occurs */\n  onResize?: (width: number) => void;\n  /** Additional CSS classes for the wrapper */\n  className?: string;\n  /** Default size of the sidebar */\n  defaultSize?: string;\n  /** Minimum width of the sidebar */\n  minWidth?: number;\n  /** Placement of the sidebar */\n  placement?: ResizableSidebarPlacement;\n  /** Parent container ID for portal rendering */\n  parentContainer?: string;\n  /** Header content */\n  header?: React.ReactNode;\n  /** Unique ID for the sidebar */\n  id?: string;\n  /** Additional CSS classes for the container */\n  containerClassName?: string;\n  /** Additional CSS classes for the header wrapper */\n  headerClassName?: string;\n  /** Whether to ignore parent container height */\n  ignoreParentContainerHeight?: boolean;\n  /** Custom height */\n  height?: string;\n  /** Whether the main sidebar is expanded (affects max width calculation) */\n  isMainSidebarExpanded?: boolean;\n  /** Width of the main sidebar when expanded */\n  mainSidebarExpandedWidth?: number;\n  /** Width of the main sidebar when collapsed */\n  mainSidebarCollapsedWidth?: number;\n  /** Height offset for navbar */\n  navbarHeight?: number;\n}\n\n/**\n * Drag handle component for the resizable sidebar\n */\nconst DragHandle = () => {\n  return (\n    <div className=\"cursor-ew-resize flex items-center justify-center rounded-full bg-[#1018288F] bg-opacity-55 w-8 h-8 shadow-200 border-[1.5px] border-[#FFFFFF3D]\">\n      <svg\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 20 20\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <mask id=\"mask0_36675_12\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"20\" height=\"20\">\n          <rect y=\"20\" width=\"20\" height=\"20\" transform=\"rotate(-90 0 20)\" fill=\"#D9D9D9\" />\n        </mask>\n        <g mask=\"url(#mask0_36675_12)\">\n          <path\n            d=\"M15.9583 10L12.7292 6.77084C12.5625 6.60418 12.4792 6.40973 12.4792 6.18751C12.4792 5.96529 12.5625 5.77084 12.7292 5.60418C12.8958 5.43751 13.0938 5.35418 13.3229 5.35418C13.5521 5.35418 13.75 5.43751 13.9167 5.60418L17.1458 8.81251C17.4653 9.13195 17.625 9.52779 17.625 10C17.625 10.4722 17.4653 10.8681 17.1458 11.1875L13.9167 14.4167C13.75 14.5833 13.5521 14.6632 13.3229 14.6563C13.0938 14.6493 12.8958 14.5625 12.7292 14.3958C12.5625 14.2292 12.4792 14.0313 12.4792 13.8021C12.4792 13.5729 12.5625 13.375 12.7292 13.2083L15.9583 10ZM4.04167 10L7.25 13.2083C7.41667 13.375 7.49653 13.5695 7.48958 13.7917C7.48264 14.0139 7.40278 14.2083 7.25 14.375C7.08333 14.5417 6.88542 14.6285 6.65625 14.6354C6.42708 14.6424 6.22917 14.5625 6.0625 14.3958L2.85417 11.1875C2.53472 10.8681 2.375 10.4722 2.375 10C2.375 9.52779 2.53472 9.13195 2.85417 8.81251L6.0625 5.60418C6.22917 5.43751 6.42708 5.35765 6.65625 5.36459C6.88542 5.37154 7.08333 5.45834 7.25 5.62501C7.40278 5.79168 7.48264 5.98612 7.48958 6.20834C7.49653 6.43057 7.41667 6.62501 7.25 6.79168L4.04167 10Z\"\n            fill=\"white\"\n          />\n        </g>\n      </svg>\n    </div>\n  );\n};\n\n/**\n * ResizableSidebar component displays a resizable sidebar panel\n *\n * @example\n * ```tsx\n * <ResizableSidebar\n *   isOpen={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   placement=\"right\"\n *   minWidth={300}\n * >\n *   <div>Sidebar content</div>\n * </ResizableSidebar>\n * ```\n */\n// Helper functions to reduce cognitive complexity\nconst findParentContainer = (parentContainer: string, setPortalTarget: (target: HTMLElement | null) => void) => {\n  const el = document.getElementById(parentContainer);\n  if (el) {\n    setPortalTarget(el);\n  } else {\n    requestAnimationFrame(() => {\n      const retryEl = document.getElementById(parentContainer);\n      if (retryEl) setPortalTarget(retryEl);\n    });\n  }\n};\n\nconst handleFullScreenToggle = (resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>, fullScreen: boolean) => {\n  if (!resizableRef.current) return;\n\n  if (fullScreen) {\n    localStorage.setItem(\"resizable-sidebar-width-before-fullscreen\", String(resizableRef.current.size?.width));\n  } else {\n    const width = localStorage.getItem(\"resizable-sidebar-width-before-fullscreen\");\n    if (width) {\n      resizableRef.current.updateSize({ width: width, height: \"100%\" });\n      return;\n    }\n  }\n  resizableRef.current.updateSize({\n    width: fullScreen ? \"100vw\" : \"\",\n    height: \"100%\",\n  });\n};\n\nconst useSidebarEffects = (\n  parentContainer: string | undefined,\n  isOpen: boolean,\n  fullScreen: boolean,\n  onResize: ((width: number) => void) | undefined,\n  resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>,\n  _minWidth: number\n) => {\n  const [shouldRenderSidebar, setShouldRenderSidebar] = useState(false);\n  const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!parentContainer || typeof window === \"undefined\") {\n      setPortalTarget(null);\n      return;\n    }\n    findParentContainer(parentContainer, setPortalTarget);\n  }, [parentContainer]);\n\n  useEffect(() => {\n    handleFullScreenToggle(resizableRef, fullScreen);\n  }, [fullScreen]);\n\n  useEffect(() => {\n    if (parentContainer && isOpen) {\n      const frame = requestAnimationFrame(() => {\n        setShouldRenderSidebar(true);\n      });\n      return () => {\n        cancelAnimationFrame(frame);\n        setShouldRenderSidebar(false);\n      };\n    }\n\n    if (!parentContainer) {\n      setShouldRenderSidebar(true);\n    }\n\n    if (!isOpen) {\n      setShouldRenderSidebar(false);\n    }\n  }, [isOpen, parentContainer]);\n\n  useEffect(() => {\n    if (resizableRef.current?.size?.width && onResize) {\n      onResize(resizableRef.current.size.width);\n    }\n  }, [resizableRef.current?.size?.width, onResize]);\n\n  return { shouldRenderSidebar, portalTarget };\n};\n\nconst SidebarContent = ({\n  isOpen,\n  header,\n  id,\n  ref,\n  className,\n  containerClassName,\n  headerClassName,\n  widthStyle,\n  heightStyle,\n  motionVariants,\n  resizableRef,\n  fullScreen,\n  maxResizableWidth,\n  minWidth,\n  handleKey,\n  onDragEnd,\n  onResize,\n  children,\n}: {\n  isOpen: boolean;\n  header?: React.ReactNode;\n  id?: string;\n  ref: React.Ref<HTMLDivElement>;\n  className?: string;\n  containerClassName?: string;\n  headerClassName?: string;\n  widthStyle?: string | number;\n  heightStyle: string;\n  motionVariants: any;\n  resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>;\n  fullScreen: boolean;\n  maxResizableWidth: number;\n  minWidth: number;\n  handleKey: string;\n  onDragEnd?: (() => void) | null;\n  onResize?: (width: number) => void;\n  children: React.ReactNode;\n}) => (\n  <AnimatePresence>\n    {isOpen && (\n      <motion.div\n        ref={ref}\n        id={id}\n        initial={motionVariants.initial}\n        animate={motionVariants.animate}\n        exit={motionVariants.exit}\n        transition={{ type: \"tween\", duration: 0.3 }}\n        className={cn(\n          \"flex-shrink-0 z-50 relative bg-white border-neutral-200 dark:bg-black-800 dark:border-black-700\",\n          fullScreen ? \"fixed w-full transition translate-x-4 duration-300\" : \"sticky\",\n          className,\n        )}\n        style={{\n          width: widthStyle,\n          height: heightStyle,\n        }}\n      >\n        <Resizable\n          onResize={(e) => {\n            e.stopPropagation();\n            const width = resizableRef.current?.size?.width;\n            if (onResize) {\n              onResize(width || minWidth);\n            }\n          }}\n          onResizeStart={(e) => {\n            e.stopPropagation();\n          }}\n          ref={resizableRef}\n          maxWidth={fullScreen ? maxResizableWidth : maxResizableWidth * 0.75}\n          minWidth={minWidth}\n          minHeight={heightStyle}\n          maxHeight={heightStyle}\n          enable={fullScreen ? {} : { [handleKey]: true }}\n          handleClasses={{\n            [handleKey]: cn(\n              \"relative w-6 -left-1 flex items-center justify-center bg-transparent transition-colors cursor-ew-resize group z-[9999] hover:bg-neutral-200 dark:hover:bg-neutral-700\",\n            ),\n          }}\n          handleComponent={{\n            [handleKey]: (\n              <div\n                className={cn(\n                  \"absolute -left-2.5 top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-12 cursor-ew-resize opacity-0 group-hover:opacity-100 hover:opacity-100 active:opacity-100 transition-opacity z-[9999]\",\n                  handleKey === \"left\" && \"-right-2.5 -left-auto\",\n                )}\n              >\n                <DragHandle />\n              </div>\n            ),\n          }}\n          className=\"!h-full\"\n          onResizeStop={onDragEnd || undefined}\n        >\n          <div\n            className={cn(\n              \"h-full w-full flex flex-col overflow-hidden @container/sidebar border-b border-neutral-200 dark:border-black-700 bg-white dark:bg-black-800 dark:border\",\n              containerClassName,\n            )}\n          >\n            {header ? <div className={cn(\"py-4 px-6\", headerClassName)}>{header || null}</div> : null}\n            <div className=\"flex-1 overflow-y-auto overflow-x-hidden\">{children}</div>\n          </div>\n        </Resizable>\n      </motion.div>\n    )}  \n  </AnimatePresence>\n);\n\nexport const ResizableSidebar = forwardRef<HTMLDivElement, ResizableSidebarProps>(\n  (\n    {\n      isOpen,\n      children,\n      fullScreen = false,\n      defaultSize = undefined,\n      minWidth = 400,\n      onDragEnd = null,\n      onResize,\n      className,\n      placement = \"right\",\n      parentContainer,\n      header,\n      id,\n      containerClassName,\n      headerClassName,\n      ignoreParentContainerHeight = false,\n      height,\n      isMainSidebarExpanded = false,\n      mainSidebarExpandedWidth = 280,\n      mainSidebarCollapsedWidth = 80,\n      navbarHeight = 64,\n    },\n    ref\n  ) => {\n    const mainSidebarWidth = isMainSidebarExpanded ? mainSidebarExpandedWidth : mainSidebarCollapsedWidth;\n    const resizableRef = useRef<React.ElementRef<typeof Resizable>>(null);\n    const { shouldRenderSidebar, portalTarget } = useSidebarEffects(\n      parentContainer,\n      isOpen,\n      fullScreen,\n      onResize,\n      resizableRef,\n      minWidth\n    );\n\n    const maxResizableWidth = typeof window !== \"undefined\" ? window.innerWidth - mainSidebarWidth : 0;\n\n    // Passed sizes are the desktop maximum; both the drag floor and the open\n    // width shrink by viewport breakpoint.\n    const responsiveMinWidth = useResponsiveWidth(minWidth);\n    const responsiveDefaultSize = useResponsiveWidth(defaultSize);\n\n    const widthStyle = responsiveDefaultSize;\n    const isRight = placement === \"right\";\n    const heightStyle = height || (parentContainer && !ignoreParentContainerHeight ? \"100%\" : `calc(100vh - ${navbarHeight}px)`);\n\n    const motionVariants = {\n      initial: { x: isRight ? \"100%\" : \"-100%\" },\n      animate: { x: 0 },\n      exit: { x: isRight ? \"100%\" : \"-100%\" },\n    };\n\n    const handleKey = isRight ? \"left\" : \"right\";\n\n    const sidebarContent = (\n      <SidebarContent\n        isOpen={isOpen}\n        header={header}\n        id={id}\n        ref={ref}\n        className={className}\n        containerClassName={containerClassName}\n        headerClassName={headerClassName}\n        widthStyle={widthStyle}\n        heightStyle={heightStyle}\n        motionVariants={motionVariants}\n        resizableRef={resizableRef}\n        fullScreen={fullScreen}\n        maxResizableWidth={maxResizableWidth}\n        minWidth={responsiveMinWidth}\n        handleKey={handleKey}\n        onDragEnd={onDragEnd}\n        onResize={onResize}\n      >\n        {children}\n      </SidebarContent>\n    );\n\n    if (parentContainer) {\n      if (!shouldRenderSidebar || !portalTarget) return null;\n      return ReactDOM.createPortal(sidebarContent, portalTarget);\n    }\n\n    if (!shouldRenderSidebar) return null;\n\n    return sidebarContent;\n  }\n);\n\nResizableSidebar.displayName = \"ResizableSidebar\";\n"],"names":["DragHandle","jsx","jsxs","findParentContainer","parentContainer","setPortalTarget","el","retryEl","handleFullScreenToggle","resizableRef","fullScreen","width","useSidebarEffects","isOpen","onResize","_minWidth","shouldRenderSidebar","setShouldRenderSidebar","useState","portalTarget","useEffect","frame","SidebarContent","header","id","ref","className","containerClassName","headerClassName","widthStyle","heightStyle","motionVariants","maxResizableWidth","minWidth","handleKey","onDragEnd","children","AnimatePresence","motion","cn","Resizable","e","ResizableSidebar","forwardRef","defaultSize","placement","ignoreParentContainerHeight","height","isMainSidebarExpanded","mainSidebarExpandedWidth","mainSidebarCollapsedWidth","navbarHeight","mainSidebarWidth","useRef","responsiveMinWidth","useResponsiveWidth","isRight","sidebarContent","ReactDOM"],"mappings":";;;;;;;AA8DA,MAAMA,IAAa,MAEf,gBAAAC,EAAC,OAAA,EAAI,WAAU,oJACb,UAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IAEN,UAAA;AAAA,MAAA,gBAAAD,EAAC,QAAA,EAAK,IAAG,kBAAiB,WAAU,kBAAiB,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MACjF,UAAA,gBAAAA,EAAC,QAAA,EAAK,GAAE,MAAK,OAAM,MAAK,QAAO,MAAK,WAAU,oBAAmB,MAAK,UAAA,CAAU,EAAA,CAClF;AAAA,MACA,gBAAAA,EAAC,KAAA,EAAE,MAAK,wBACN,UAAA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MAAA,EACP,CACF;AAAA,IAAA;AAAA,EAAA;AAAA,GAEJ,GAoBEE,IAAsB,CAACC,GAAyBC,MAA0D;AAC9G,QAAMC,IAAK,SAAS,eAAeF,CAAe;AAClD,EAAIE,IACFD,EAAgBC,CAAE,IAElB,sBAAsB,MAAM;AAC1B,UAAMC,IAAU,SAAS,eAAeH,CAAe;AACvD,IAAIG,OAAyBA,CAAO;AAAA,EACtC,CAAC;AAEL,GAEMC,IAAyB,CAACC,GAAmEC,MAAwB;AACzH,MAAKD,EAAa,SAElB;AAAA,QAAIC;AACF,mBAAa,QAAQ,6CAA6C,OAAOD,EAAa,QAAQ,MAAM,KAAK,CAAC;AAAA,SACrG;AACL,YAAME,IAAQ,aAAa,QAAQ,2CAA2C;AAC9E,UAAIA,GAAO;AACT,QAAAF,EAAa,QAAQ,WAAW,EAAE,OAAAE,GAAc,QAAQ,QAAQ;AAChE;AAAA,MACF;AAAA,IACF;AACA,IAAAF,EAAa,QAAQ,WAAW;AAAA,MAC9B,OAAOC,IAAa,UAAU;AAAA,MAC9B,QAAQ;AAAA,IAAA,CACT;AAAA;AACH,GAEME,IAAoB,CACxBR,GACAS,GACAH,GACAI,GACAL,GACAM,MACG;AACH,QAAM,CAACC,GAAqBC,CAAsB,IAAIC,EAAS,EAAK,GAC9D,CAACC,GAAcd,CAAe,IAAIa,EAA6B,IAAI;AAEzE,SAAAE,EAAU,MAAM;AACd,QAAI,CAAChB,KAAmB,OAAO,SAAW,KAAa;AACrD,MAAAC,EAAgB,IAAI;AACpB;AAAA,IACF;AACA,IAAAF,EAAoBC,GAAiBC,CAAe;AAAA,EACtD,GAAG,CAACD,CAAe,CAAC,GAEpBgB,EAAU,MAAM;AACd,IAAAZ,EAAuBC,GAAcC,CAAU;AAAA,EACjD,GAAG,CAACA,CAAU,CAAC,GAEfU,EAAU,MAAM;AACd,QAAIhB,KAAmBS,GAAQ;AAC7B,YAAMQ,IAAQ,sBAAsB,MAAM;AACxC,QAAAJ,EAAuB,EAAI;AAAA,MAC7B,CAAC;AACD,aAAO,MAAM;AACX,6BAAqBI,CAAK,GAC1BJ,EAAuB,EAAK;AAAA,MAC9B;AAAA,IACF;AAEA,IAAKb,KACHa,EAAuB,EAAI,GAGxBJ,KACHI,EAAuB,EAAK;AAAA,EAEhC,GAAG,CAACJ,GAAQT,CAAe,CAAC,GAE5BgB,EAAU,MAAM;AACd,IAAIX,EAAa,SAAS,MAAM,SAASK,KACvCA,EAASL,EAAa,QAAQ,KAAK,KAAK;AAAA,EAE5C,GAAG,CAACA,EAAa,SAAS,MAAM,OAAOK,CAAQ,CAAC,GAEzC,EAAE,qBAAAE,GAAqB,cAAAG,EAAA;AAChC,GAEMG,IAAiB,CAAC;AAAA,EACtB,QAAAT;AAAA,EACA,QAAAU;AAAA,EACA,IAAAC;AAAA,EACA,KAAAC;AAAA,EACA,WAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAtB;AAAA,EACA,YAAAC;AAAA,EACA,mBAAAsB;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAArB;AAAA,EACA,UAAAsB;AACF,MAoBE,gBAAAnC,EAACoC,KACE,UAAAxB,KACC,gBAAAZ;AAAA,EAACqC,EAAO;AAAA,EAAP;AAAA,IACC,KAAAb;AAAA,IACA,IAAAD;AAAA,IACA,SAASO,EAAe;AAAA,IACxB,SAASA,EAAe;AAAA,IACxB,MAAMA,EAAe;AAAA,IACrB,YAAY,EAAE,MAAM,SAAS,UAAU,IAAA;AAAA,IACvC,WAAWQ;AAAA,MACT;AAAA,MACA7B,IAAa,uDAAuD;AAAA,MACpEgB;AAAA,IAAA;AAAA,IAEF,OAAO;AAAA,MACL,OAAOG;AAAA,MACP,QAAQC;AAAA,IAAA;AAAA,IAGV,UAAA,gBAAA7B;AAAA,MAACuC;AAAA,MAAA;AAAA,QACC,UAAU,CAACC,MAAM;AACf,UAAAA,EAAE,gBAAA;AACF,gBAAM9B,IAAQF,EAAa,SAAS,MAAM;AAC1C,UAAIK,KACFA,EAASH,KAASsB,CAAQ;AAAA,QAE9B;AAAA,QACA,eAAe,CAACQ,MAAM;AACpB,UAAAA,EAAE,gBAAA;AAAA,QACJ;AAAA,QACA,KAAKhC;AAAA,QACL,UAAUC,IAAasB,IAAoBA,IAAoB;AAAA,QAC/D,UAAAC;AAAA,QACA,WAAWH;AAAA,QACX,WAAWA;AAAA,QACX,QAAQpB,IAAa,CAAA,IAAK,EAAE,CAACwB,CAAS,GAAG,GAAA;AAAA,QACzC,eAAe;AAAA,UACb,CAACA,CAAS,GAAGK;AAAA,YACX;AAAA,UAAA;AAAA,QACF;AAAA,QAEF,iBAAiB;AAAA,UACf,CAACL,CAAS,GACR,gBAAAjC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWsC;AAAA,gBACT;AAAA,gBACAL,MAAc,UAAU;AAAA,cAAA;AAAA,cAG1B,4BAAClC,GAAA,CAAA,CAAW;AAAA,YAAA;AAAA,UAAA;AAAA,QACd;AAAA,QAGJ,WAAU;AAAA,QACV,cAAcmC,KAAa;AAAA,QAE3B,UAAA,gBAAAjC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWqC;AAAA,cACT;AAAA,cACAZ;AAAA,YAAA;AAAA,YAGD,UAAA;AAAA,cAAAJ,IAAS,gBAAAtB,EAAC,SAAI,WAAWsC,EAAG,aAAaX,CAAe,GAAI,UAAAL,KAAU,KAAA,CAAK,IAAS;AAAA,cACrF,gBAAAtB,EAAC,OAAA,EAAI,WAAU,4CAA4C,UAAAmC,EAAA,CAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACtE;AAAA,IAAA;AAAA,EACF;AACF,GAEJ,GAGWM,IAAmBC;AAAA,EAC9B,CACE;AAAA,IACE,QAAA9B;AAAA,IACA,UAAAuB;AAAA,IACA,YAAA1B,IAAa;AAAA,IACb,aAAAkC,IAAc;AAAA,IACd,UAAAX,IAAW;AAAA,IACX,WAAAE,IAAY;AAAA,IACZ,UAAArB;AAAA,IACA,WAAAY;AAAA,IACA,WAAAmB,IAAY;AAAA,IACZ,iBAAAzC;AAAA,IACA,QAAAmB;AAAA,IACA,IAAAC;AAAA,IACA,oBAAAG;AAAA,IACA,iBAAAC;AAAA,IACA,6BAAAkB,IAA8B;AAAA,IAC9B,QAAAC;AAAA,IACA,uBAAAC,IAAwB;AAAA,IACxB,0BAAAC,IAA2B;AAAA,IAC3B,2BAAAC,IAA4B;AAAA,IAC5B,cAAAC,IAAe;AAAA,EAAA,GAEjB1B,MACG;AACH,UAAM2B,IAAmBJ,IAAwBC,IAA2BC,GACtEzC,IAAe4C,EAA2C,IAAI,GAC9D,EAAE,qBAAArC,GAAqB,cAAAG,EAAA,IAAiBP;AAAA,MAC5CR;AAAA,MACAS;AAAA,MACAH;AAAA,MACAI;AAAA,MACAL;AAAA,IAEF,GAEMuB,IAAoB,OAAO,SAAW,MAAc,OAAO,aAAaoB,IAAmB,GAI3FE,IAAqBC,EAAmBtB,CAAQ,GAGhDJ,IAFwB0B,EAAmBX,CAAW,GAGtDY,IAAUX,MAAc,SACxBf,IAAciB,MAAW3C,KAAmB,CAAC0C,IAA8B,SAAS,gBAAgBK,CAAY,QAUhHM,IACJ,gBAAAxD;AAAA,MAACqB;AAAA,MAAA;AAAA,QACC,QAAAT;AAAA,QACA,QAAAU;AAAA,QACA,IAAAC;AAAA,QACA,KAAAC;AAAA,QACA,WAAAC;AAAA,QACA,oBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,YAAAC;AAAA,QACA,aAAAC;AAAA,QACA,gBAnBmB;AAAA,UACrB,SAAS,EAAE,GAAG0B,IAAU,SAAS,QAAA;AAAA,UACjC,SAAS,EAAE,GAAG,EAAA;AAAA,UACd,MAAM,EAAE,GAAGA,IAAU,SAAS,QAAA;AAAA,QAAQ;AAAA,QAiBpC,cAAA/C;AAAA,QACA,YAAAC;AAAA,QACA,mBAAAsB;AAAA,QACA,UAAUsB;AAAA,QACV,WAlBcE,IAAU,SAAS;AAAA,QAmBjC,WAAArB;AAAA,QACA,UAAArB;AAAA,QAEC,UAAAsB;AAAA,MAAA;AAAA,IAAA;AAIL,WAAIhC,IACE,CAACY,KAAuB,CAACG,IAAqB,OAC3CuC,EAAS,aAAaD,GAAgBtC,CAAY,IAGtDH,IAEEyC,IAF0B;AAAA,EAGnC;AACF;AAEAf,EAAiB,cAAc;"}
+{"version":3,"file":"ResizableSidebar.es.js","sources":["../../../../src/components/data-display/resizable-sidebar/ResizableSidebar.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { forwardRef, useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Resizable } from \"re-resizable\";\n\nimport { useResponsiveWidth } from \"../../../hooks/useResponsiveWidth\";\n\n/**\n * Sidebar placement options\n */\nexport type ResizableSidebarPlacement = \"left\" | \"right\";\n\n/**\n * Props for the ResizableSidebar component\n */\nexport interface ResizableSidebarProps {\n  /** Whether the sidebar is open */\n  isOpen: boolean;\n  /** Content to display in the sidebar */\n  children: React.ReactNode;\n  /** Whether to display in full screen mode */\n  fullScreen?: boolean;\n  /** Callback when drag/resize ends */\n  onDragEnd?: (() => void) | null;\n  /** Callback when resize occurs */\n  onResize?: (width: number) => void;\n  /** Additional CSS classes for the wrapper */\n  className?: string;\n  /** Default size of the sidebar */\n  defaultSize?: string;\n  /** Minimum width of the sidebar */\n  minWidth?: number;\n  /** Placement of the sidebar */\n  placement?: ResizableSidebarPlacement;\n  /** Parent container ID for portal rendering */\n  parentContainer?: string;\n  /** Header content */\n  header?: React.ReactNode;\n  /** Unique ID for the sidebar */\n  id?: string;\n  /** Additional CSS classes for the container */\n  containerClassName?: string;\n  /** Additional CSS classes for the header wrapper */\n  headerClassName?: string;\n  /** Whether to ignore parent container height */\n  ignoreParentContainerHeight?: boolean;\n  /** Custom height */\n  height?: string;\n  /** Whether the main sidebar is expanded (affects max width calculation) */\n  isMainSidebarExpanded?: boolean;\n  /** Width of the main sidebar when expanded */\n  mainSidebarExpandedWidth?: number;\n  /** Width of the main sidebar when collapsed */\n  mainSidebarCollapsedWidth?: number;\n  /** Height offset for navbar */\n  navbarHeight?: number;\n}\n\n/**\n * Drag handle component for the resizable sidebar\n */\nconst DragHandle = () => {\n  return (\n    <div className=\"cursor-ew-resize flex items-center justify-center rounded-full bg-[#1018288F] bg-opacity-55 w-8 h-8 shadow-200 border-[1.5px] border-[#FFFFFF3D]\">\n      <svg\n        width=\"20\"\n        height=\"20\"\n        viewBox=\"0 0 20 20\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <mask id=\"mask0_36675_12\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"20\" height=\"20\">\n          <rect y=\"20\" width=\"20\" height=\"20\" transform=\"rotate(-90 0 20)\" fill=\"#D9D9D9\" />\n        </mask>\n        <g mask=\"url(#mask0_36675_12)\">\n          <path\n            d=\"M15.9583 10L12.7292 6.77084C12.5625 6.60418 12.4792 6.40973 12.4792 6.18751C12.4792 5.96529 12.5625 5.77084 12.7292 5.60418C12.8958 5.43751 13.0938 5.35418 13.3229 5.35418C13.5521 5.35418 13.75 5.43751 13.9167 5.60418L17.1458 8.81251C17.4653 9.13195 17.625 9.52779 17.625 10C17.625 10.4722 17.4653 10.8681 17.1458 11.1875L13.9167 14.4167C13.75 14.5833 13.5521 14.6632 13.3229 14.6563C13.0938 14.6493 12.8958 14.5625 12.7292 14.3958C12.5625 14.2292 12.4792 14.0313 12.4792 13.8021C12.4792 13.5729 12.5625 13.375 12.7292 13.2083L15.9583 10ZM4.04167 10L7.25 13.2083C7.41667 13.375 7.49653 13.5695 7.48958 13.7917C7.48264 14.0139 7.40278 14.2083 7.25 14.375C7.08333 14.5417 6.88542 14.6285 6.65625 14.6354C6.42708 14.6424 6.22917 14.5625 6.0625 14.3958L2.85417 11.1875C2.53472 10.8681 2.375 10.4722 2.375 10C2.375 9.52779 2.53472 9.13195 2.85417 8.81251L6.0625 5.60418C6.22917 5.43751 6.42708 5.35765 6.65625 5.36459C6.88542 5.37154 7.08333 5.45834 7.25 5.62501C7.40278 5.79168 7.48264 5.98612 7.48958 6.20834C7.49653 6.43057 7.41667 6.62501 7.25 6.79168L4.04167 10Z\"\n            fill=\"white\"\n          />\n        </g>\n      </svg>\n    </div>\n  );\n};\n\n/**\n * ResizableSidebar component displays a resizable sidebar panel\n *\n * @example\n * ```tsx\n * <ResizableSidebar\n *   isOpen={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   placement=\"right\"\n *   minWidth={300}\n * >\n *   <div>Sidebar content</div>\n * </ResizableSidebar>\n * ```\n */\n// Helper functions to reduce cognitive complexity\nconst findParentContainer = (parentContainer: string, setPortalTarget: (target: HTMLElement | null) => void) => {\n  const el = document.getElementById(parentContainer);\n  if (el) {\n    setPortalTarget(el);\n  } else {\n    requestAnimationFrame(() => {\n      const retryEl = document.getElementById(parentContainer);\n      if (retryEl) setPortalTarget(retryEl);\n    });\n  }\n};\n\nconst handleFullScreenToggle = (resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>, fullScreen: boolean) => {\n  if (!resizableRef.current) return;\n\n  if (fullScreen) {\n    localStorage.setItem(\"resizable-sidebar-width-before-fullscreen\", String(resizableRef.current.size?.width));\n  } else {\n    const width = localStorage.getItem(\"resizable-sidebar-width-before-fullscreen\");\n    if (width) {\n      resizableRef.current.updateSize({ width: width, height: \"100%\" });\n      return;\n    }\n  }\n  resizableRef.current.updateSize({\n    width: fullScreen ? \"100vw\" : \"\",\n    height: \"100%\",\n  });\n};\n\nconst useSidebarEffects = (\n  parentContainer: string | undefined,\n  isOpen: boolean,\n  fullScreen: boolean,\n  onResize: ((width: number) => void) | undefined,\n  resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>,\n  _minWidth: number\n) => {\n  const [shouldRenderSidebar, setShouldRenderSidebar] = useState(false);\n  const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (!parentContainer || typeof window === \"undefined\") {\n      setPortalTarget(null);\n      return;\n    }\n    findParentContainer(parentContainer, setPortalTarget);\n  }, [parentContainer]);\n\n  useEffect(() => {\n    handleFullScreenToggle(resizableRef, fullScreen);\n  }, [fullScreen]);\n\n  useEffect(() => {\n    if (parentContainer && isOpen) {\n      const frame = requestAnimationFrame(() => {\n        setShouldRenderSidebar(true);\n      });\n      return () => {\n        cancelAnimationFrame(frame);\n        setShouldRenderSidebar(false);\n      };\n    }\n\n    if (!parentContainer) {\n      setShouldRenderSidebar(true);\n    }\n\n    if (!isOpen) {\n      setShouldRenderSidebar(false);\n    }\n  }, [isOpen, parentContainer]);\n\n  useEffect(() => {\n    if (resizableRef.current?.size?.width && onResize) {\n      onResize(resizableRef.current.size.width);\n    }\n  }, [resizableRef.current?.size?.width, onResize]);\n\n  return { shouldRenderSidebar, portalTarget };\n};\n\nconst SidebarContent = ({\n  isOpen,\n  header,\n  id,\n  ref,\n  className,\n  containerClassName,\n  headerClassName,\n  widthStyle,\n  heightStyle,\n  motionVariants,\n  resizableRef,\n  fullScreen,\n  maxResizableWidth,\n  minWidth,\n  handleKey,\n  onDragEnd,\n  onResize,\n  children,\n}: {\n  isOpen: boolean;\n  header?: React.ReactNode;\n  id?: string;\n  ref: React.Ref<HTMLDivElement>;\n  className?: string;\n  containerClassName?: string;\n  headerClassName?: string;\n  widthStyle?: string | number;\n  heightStyle: string;\n  motionVariants: any;\n  resizableRef: React.RefObject<React.ElementRef<typeof Resizable>>;\n  fullScreen: boolean;\n  maxResizableWidth: number;\n  minWidth: number;\n  handleKey: string;\n  onDragEnd?: (() => void) | null;\n  onResize?: (width: number) => void;\n  children: React.ReactNode;\n}) => (\n  <AnimatePresence>\n    {isOpen && (\n      <motion.div\n        ref={ref}\n        id={id}\n        initial={motionVariants.initial}\n        animate={motionVariants.animate}\n        exit={motionVariants.exit}\n        transition={{ type: \"tween\", duration: 0.3 }}\n        className={cn(\n          \"flex-shrink-0 z-50 relative bg-white border-neutral-200 dark:bg-black-800 dark:border-black-700\",\n          fullScreen ? \"fixed w-full transition translate-x-4 duration-300\" : \"sticky\",\n          className,\n        )}\n        style={{\n          width: widthStyle,\n          height: heightStyle,\n        }}\n      >\n        <Resizable\n          onResize={(e) => {\n            e.stopPropagation();\n            const width = resizableRef.current?.size?.width;\n            if (onResize) {\n              onResize(width || minWidth);\n            }\n          }}\n          onResizeStart={(e) => {\n            e.stopPropagation();\n          }}\n          ref={resizableRef}\n          maxWidth={fullScreen ? maxResizableWidth : maxResizableWidth * 0.75}\n          minWidth={minWidth}\n          minHeight={heightStyle}\n          maxHeight={heightStyle}\n          enable={fullScreen ? {} : { [handleKey]: true }}\n          handleClasses={{\n            [handleKey]: cn(\n              \"relative w-6 flex items-center justify-center bg-transparent transition-colors cursor-ew-resize group z-[9999] hover:bg-neutral-200 dark:hover:bg-neutral-700\",\n              // Offset must match the resized edge so it aligns with re-resizable's positioning.\n              handleKey === \"left\" ? \"-left-1\" : \"-right-1\",\n            ),\n          }}\n          handleComponent={{\n            [handleKey]: (\n              <div\n                className={cn(\n                  \"absolute top-1/2 -translate-y-1/2 flex items-center justify-center w-8 h-12 cursor-ew-resize opacity-0 group-hover:opacity-100 hover:opacity-100 active:opacity-100 transition-opacity z-[9999]\",\n                  handleKey === \"left\" ? \"-left-2.5\" : \"-right-2.5\",\n                )}\n              >\n                <DragHandle />\n              </div>\n            ),\n          }}\n          className=\"!h-full\"\n          onResizeStop={onDragEnd || undefined}\n        >\n          <div\n            className={cn(\n              \"h-full w-full flex flex-col overflow-hidden @container/sidebar border-b border-neutral-200 dark:border-black-700 bg-white dark:bg-black-800 dark:border\",\n              containerClassName,\n            )}\n          >\n            {header ? <div className={cn(\"py-4 px-6\", headerClassName)}>{header || null}</div> : null}\n            <div className=\"flex-1 overflow-y-auto overflow-x-hidden\">{children}</div>\n          </div>\n        </Resizable>\n      </motion.div>\n    )}  \n  </AnimatePresence>\n);\n\nexport const ResizableSidebar = forwardRef<HTMLDivElement, ResizableSidebarProps>(\n  (\n    {\n      isOpen,\n      children,\n      fullScreen = false,\n      defaultSize = undefined,\n      minWidth = 400,\n      onDragEnd = null,\n      onResize,\n      className,\n      placement = \"right\",\n      parentContainer,\n      header,\n      id,\n      containerClassName,\n      headerClassName,\n      ignoreParentContainerHeight = false,\n      height,\n      isMainSidebarExpanded = false,\n      mainSidebarExpandedWidth = 280,\n      mainSidebarCollapsedWidth = 80,\n      navbarHeight = 64,\n    },\n    ref\n  ) => {\n    const mainSidebarWidth = isMainSidebarExpanded ? mainSidebarExpandedWidth : mainSidebarCollapsedWidth;\n    const resizableRef = useRef<React.ElementRef<typeof Resizable>>(null);\n    const { shouldRenderSidebar, portalTarget } = useSidebarEffects(\n      parentContainer,\n      isOpen,\n      fullScreen,\n      onResize,\n      resizableRef,\n      minWidth\n    );\n\n    const maxResizableWidth = typeof window !== \"undefined\" ? window.innerWidth - mainSidebarWidth : 0;\n\n    // Passed sizes are the desktop maximum; both the drag floor and the open\n    // width shrink by viewport breakpoint.\n    const responsiveMinWidth = useResponsiveWidth(minWidth);\n    const responsiveDefaultSize = useResponsiveWidth(defaultSize);\n\n    const widthStyle = responsiveDefaultSize;\n    const isRight = placement === \"right\";\n    const heightStyle = height || (parentContainer && !ignoreParentContainerHeight ? \"100%\" : `calc(100vh - ${navbarHeight}px)`);\n\n    const motionVariants = {\n      initial: { x: isRight ? \"100%\" : \"-100%\" },\n      animate: { x: 0 },\n      exit: { x: isRight ? \"100%\" : \"-100%\" },\n    };\n\n    const handleKey = isRight ? \"left\" : \"right\";\n\n    const sidebarContent = (\n      <SidebarContent\n        isOpen={isOpen}\n        header={header}\n        id={id}\n        ref={ref}\n        className={className}\n        containerClassName={containerClassName}\n        headerClassName={headerClassName}\n        widthStyle={widthStyle}\n        heightStyle={heightStyle}\n        motionVariants={motionVariants}\n        resizableRef={resizableRef}\n        fullScreen={fullScreen}\n        maxResizableWidth={maxResizableWidth}\n        minWidth={responsiveMinWidth}\n        handleKey={handleKey}\n        onDragEnd={onDragEnd}\n        onResize={onResize}\n      >\n        {children}\n      </SidebarContent>\n    );\n\n    if (parentContainer) {\n      if (!shouldRenderSidebar || !portalTarget) return null;\n      return ReactDOM.createPortal(sidebarContent, portalTarget);\n    }\n\n    if (!shouldRenderSidebar) return null;\n\n    return sidebarContent;\n  }\n);\n\nResizableSidebar.displayName = \"ResizableSidebar\";\n"],"names":["DragHandle","jsx","jsxs","findParentContainer","parentContainer","setPortalTarget","el","retryEl","handleFullScreenToggle","resizableRef","fullScreen","width","useSidebarEffects","isOpen","onResize","_minWidth","shouldRenderSidebar","setShouldRenderSidebar","useState","portalTarget","useEffect","frame","SidebarContent","header","id","ref","className","containerClassName","headerClassName","widthStyle","heightStyle","motionVariants","maxResizableWidth","minWidth","handleKey","onDragEnd","children","AnimatePresence","motion","cn","Resizable","e","ResizableSidebar","forwardRef","defaultSize","placement","ignoreParentContainerHeight","height","isMainSidebarExpanded","mainSidebarExpandedWidth","mainSidebarCollapsedWidth","navbarHeight","mainSidebarWidth","useRef","responsiveMinWidth","useResponsiveWidth","isRight","sidebarContent","ReactDOM"],"mappings":"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"}

package/dist/components/forms/date-range/DateRange.cjs.js

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),re=require("antd"),Y=require("../../../_virtual/index.cjs.js"),r=require("react"),A=require("dayjs"),ne=require("../../button/IconButton.cjs.js"),se=require("../shared/InputLabel.cjs.js"),p=require("../../icon/icons.generated.cjs.js"),{RangePicker:V}=re.DatePicker,W={ENTER:"Enter"},J=()=>Math.random().toString(36).substring(2,9),ae=(i,s)=>{const k=r.useRef(s);r.useEffect(()=>{k.current=s},[s]),r.useEffect(()=>{const f=o=>k.current(o);return document.addEventListener(i,f),()=>{document.removeEventListener(i,f)}},[i])},Q=({onCalendarChange:i=void 0,onChange:s,required:k,label:f,startDate:o,endDate:d,errorMessage:m,className:M,id:l,disabled:j=!1,dateFormat:v,shouldPopOnParent:B=!0,getPopupContainer:b,maxDateRange:u,open:C,onOpenChange:S,placement:L="bottomLeft",renderAsIconButton:N=!1,iconButtonClassName:X,iconClassName:Z,labelExtra:T,inputEmphasis:F="default"})=>{const q=F==="modified"&&!m,y=F==="deleted"&&!m,R=F==="success"&&!m,P=q?"var(--Warning-50, #FFFAEB)":y?"var(--Error-50, #FEF2F2)":R?"var(--Success-50, #F0FDF4)":"",E=q?"var(--Warning-200, #FEDF89)":y?"var(--Error-200, #FECACA)":R?"var(--Success-200, #BBF7D0)":"",[D,x]=r.useState(!1),[$,z]=r.useState(!1),h=r.useRef(null),K=r.useRef(null),I=r.useRef(!1),g=r.useRef(!1),a=e=>e?A(e):null,w=`date-range-start-${J()}`,O=`date-range-end-${J()}`,G=()=>{x(!0),setTimeout(()=>{h.current&&h.current.focus()},0)};ae("keydown",e=>{if(e.key===W.ENTER&&document.activeElement instanceof HTMLInputElement){if(document?.activeElement?.id===w){const n=A(document?.activeElement?.value);n.isValid()&&s([n,a(d)])}if(document?.activeElement?.id===O){const n=A(document?.activeElement?.value);n.isValid()&&s([a(o),n])}}});const _=r.useCallback(e=>{const[n,c]=[a(o),a(d)];return u?n?e.isBefore(n.startOf("day"))||e.isAfter(n.add(u,"day").endOf("day")):c?e.isBefore(c.subtract(u,"day").startOf("day"))||e.isAfter(c.endOf("day")):!1:!1},[o,d,u]),H=r.useCallback(e=>{if(e.key===W.ENTER&&!(N?D:C??$)){e.preventDefault(),e.stopPropagation();const c=e.target.closest("form");if(c){const U=c.querySelector('button[type="submit"]');U?U.click():c.requestSubmit()}}},[N,D,C,$]),ee=r.useCallback(e=>{if(e&&I.current){I.current=!1,x(!1);return}x(e),e||(I.current=!0,requestAnimationFrame(()=>{h.current?.focus(),requestAnimationFrame(()=>{I.current=!1})}))},[]),te=r.useCallback(e=>{if(e&&g.current){g.current=!1,z(!1),S?.(!1);return}z(e),S?.(e),e||(g.current=!0,requestAnimationFrame(()=>{K.current?.focus(),requestAnimationFrame(()=>{g.current=!1})}))},[S]);return N?t.jsxs("div",{id:l,className:M,onKeyDownCapture:H,children:[t.jsx(ne,{onClick:G,disabled:j,variant:"default",className:X,children:t.jsx(p.CalendarMonthIcon,{size:20,className:Y("w-5 h-5",Z)})}),t.jsx(V,{ref:h,onChange:e=>{s(e),x(!1)},onCalendarChange:i,value:[a(o),a(d)],id:{start:w,end:O},allowClear:!0,format:v||"DD MMM, YYYY",separator:t.jsx(p.CheckIndeterminateSmallFilledIcon,{size:20,className:"text-neutral-400 dark:text-gray-100"}),suffixIcon:t.jsx(p.CalendarMonthIcon,{size:14,className:"text-neutral-400 dark:text-gray-100"}),getPopupContainer:b||(B?e=>e.parentElement:()=>document.body),disabled:j,disabledDate:u?_:void 0,autoComplete:"off",open:D,onOpenChange:ee,placement:L,style:{position:"absolute",opacity:0,pointerEvents:"none",width:0,height:0}})]}):t.jsxs("div",{id:l,className:Y("flex flex-col",M),onKeyDownCapture:H,children:[(f||T)&&t.jsxs("div",{className:"mb-1 flex items-center justify-between gap-1",children:[t.jsx(se.InputLabel,{label:f||"",required:k||!1}),T]}),(P||E)&&t.jsx("style",{children:`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),ne=require("antd"),Y=require("../../../_virtual/index.cjs.js"),r=require("react"),A=require("dayjs"),se=require("../../button/IconButton.cjs.js"),ae=require("../shared/InputLabel.cjs.js"),p=require("../../icon/icons.generated.cjs.js"),{RangePicker:W}=ne.DatePicker,J={ENTER:"Enter"},Q=()=>Math.random().toString(36).substring(2,9),oe=(i,s)=>{const k=r.useRef(s);r.useEffect(()=>{k.current=s},[s]),r.useEffect(()=>{const f=o=>k.current(o);return document.addEventListener(i,f),()=>{document.removeEventListener(i,f)}},[i])},X=({onCalendarChange:i=void 0,onChange:s,required:k,label:f,startDate:o,endDate:d,errorMessage:m,className:M,id:l,disabled:j=!1,dateFormat:v,shouldPopOnParent:B=!0,getPopupContainer:b,maxDateRange:u,open:C,onOpenChange:S,placement:L="bottomLeft",renderAsIconButton:N=!1,iconButtonClassName:Z,iconClassName:G,labelExtra:T,inputEmphasis:F="default",presets:P})=>{const q=F==="modified"&&!m,y=F==="deleted"&&!m,R=F==="success"&&!m,z=q?"var(--Warning-50, #FFFAEB)":y?"var(--Error-50, #FEF2F2)":R?"var(--Success-50, #F0FDF4)":"",E=q?"var(--Warning-200, #FEDF89)":y?"var(--Error-200, #FECACA)":R?"var(--Success-200, #BBF7D0)":"",[D,x]=r.useState(!1),[$,K]=r.useState(!1),h=r.useRef(null),_=r.useRef(null),I=r.useRef(!1),g=r.useRef(!1),a=e=>e?A(e):null,w=`date-range-start-${Q()}`,O=`date-range-end-${Q()}`,ee=()=>{x(!0),setTimeout(()=>{h.current&&h.current.focus()},0)};oe("keydown",e=>{if(e.key===J.ENTER&&document.activeElement instanceof HTMLInputElement){if(document?.activeElement?.id===w){const n=A(document?.activeElement?.value);n.isValid()&&s([n,a(d)])}if(document?.activeElement?.id===O){const n=A(document?.activeElement?.value);n.isValid()&&s([a(o),n])}}});const H=r.useCallback(e=>{const[n,c]=[a(o),a(d)];return u?n?e.isBefore(n.startOf("day"))||e.isAfter(n.add(u,"day").endOf("day")):c?e.isBefore(c.subtract(u,"day").startOf("day"))||e.isAfter(c.endOf("day")):!1:!1},[o,d,u]),U=r.useCallback(e=>{if(e.key===J.ENTER&&!(N?D:C??$)){e.preventDefault(),e.stopPropagation();const c=e.target.closest("form");if(c){const V=c.querySelector('button[type="submit"]');V?V.click():c.requestSubmit()}}},[N,D,C,$]),te=r.useCallback(e=>{if(e&&I.current){I.current=!1,x(!1);return}x(e),e||(I.current=!0,requestAnimationFrame(()=>{h.current?.focus(),requestAnimationFrame(()=>{I.current=!1})}))},[]),re=r.useCallback(e=>{if(e&&g.current){g.current=!1,K(!1),S?.(!1);return}K(e),S?.(e),e||(g.current=!0,requestAnimationFrame(()=>{_.current?.focus(),requestAnimationFrame(()=>{g.current=!1})}))},[S]);return N?t.jsxs("div",{id:l,className:M,onKeyDownCapture:U,children:[t.jsx(se,{onClick:ee,disabled:j,variant:"default",className:Z,children:t.jsx(p.CalendarMonthIcon,{size:20,className:Y("w-5 h-5",G)})}),t.jsx(W,{ref:h,onChange:e=>{s(e),x(!1)},onCalendarChange:i,value:[a(o),a(d)],id:{start:w,end:O},allowClear:!0,format:v||"DD MMM, YYYY",separator:t.jsx(p.CheckIndeterminateSmallFilledIcon,{size:20,className:"text-neutral-400 dark:text-gray-100"}),suffixIcon:t.jsx(p.CalendarMonthIcon,{size:14,className:"text-neutral-400 dark:text-gray-100"}),getPopupContainer:b||(B?e=>e.parentElement:()=>document.body),disabled:j,disabledDate:u?H:void 0,autoComplete:"off",open:D,onOpenChange:te,placement:L,presets:P,style:{position:"absolute",opacity:0,pointerEvents:"none",width:0,height:0}})]}):t.jsxs("div",{id:l,className:Y("flex flex-col",M),onKeyDownCapture:U,children:[(f||T)&&t.jsxs("div",{className:"mb-1 flex items-center justify-between gap-1",children:[t.jsx(ae.InputLabel,{label:f||"",required:k||!1}),T]}),(z||E)&&t.jsx("style",{children:`
           #${l} .ant-picker {
-            background-color: ${P} !important;
+            background-color: ${z} !important;
             border-color: ${E} !important;
           }
           #${l} .ant-picker:hover {
@@ -13,5 +13,5 @@
           #${l} .ant-picker .ant-picker-input > input {
             color: ${y?"#475467":R?"#101828":"inherit"};
           }
-        `}),t.jsx(V,{ref:K,onChange:s,onCalendarChange:i,value:[a(o),a(d)],id:{start:w,end:O},allowClear:!0,format:v||"DD MMM, YYYY",separator:t.jsx(p.CheckIndeterminateSmallFilledIcon,{size:20,className:"text-neutral-400 dark:text-gray-100"}),suffixIcon:t.jsx(p.CalendarMonthIcon,{size:14,className:"text-neutral-400 dark:text-gray-100"}),getPopupContainer:b||(B?e=>e.parentElement:()=>document.body),disabled:j,disabledDate:u?_:void 0,open:C??$,onOpenChange:te,autoComplete:"off",placement:L}),m&&t.jsx("p",{className:Y("text-sm font-inter font-normal text-left pt-[6px]","text-red-500"),children:m})]})};Q.displayName="DateRange";exports.DateRange=Q;
+        `}),t.jsx(W,{ref:_,onChange:s,onCalendarChange:i,value:[a(o),a(d)],id:{start:w,end:O},allowClear:!0,format:v||"DD MMM, YYYY",separator:t.jsx(p.CheckIndeterminateSmallFilledIcon,{size:20,className:"text-neutral-400 dark:text-gray-100"}),suffixIcon:t.jsx(p.CalendarMonthIcon,{size:14,className:"text-neutral-400 dark:text-gray-100"}),getPopupContainer:b||(B?e=>e.parentElement:()=>document.body),disabled:j,disabledDate:u?H:void 0,open:C??$,onOpenChange:re,autoComplete:"off",placement:L,presets:P}),m&&t.jsx("p",{className:Y("text-sm font-inter font-normal text-left pt-[6px]","text-red-500"),children:m})]})};X.displayName="DateRange";exports.DateRange=X;
 //# sourceMappingURL=DateRange.cjs.js.map

package/dist/components/forms/date-range/DateRange.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRange.cjs.js","sources":["../../../../src/components/forms/date-range/DateRange.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { DatePicker } from \"antd\";\nimport cn from \"classnames\";\nimport React from \"react\";\nimport dayjs from \"dayjs\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport IconButton from \"../../button/IconButton\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { CalendarMonthIcon, CheckIndeterminateSmallFilledIcon } from '../../icon';\n\nconst { RangePicker } = DatePicker;\n\n// Keyboard keys constant\nconst KEYBOARD_KEYS = {\n  ENTER: \"Enter\",\n} as const;\n\n/**\n * Generate a short UUID\n */\nconst generateShortUUID = (): string => {\n  return Math.random().toString(36).substring(2, 9);\n};\n\n/**\n * Hook to add event listeners\n */\nconst useEventListener = <K extends keyof DocumentEventMap>(\n  eventName: K,\n  handler: (event: DocumentEventMap[K]) => void\n) => {\n  const savedHandler = useRef(handler);\n\n  useEffect(() => {\n    savedHandler.current = handler;\n  }, [handler]);\n\n  useEffect(() => {\n    const eventListener = (event: DocumentEventMap[K]) =>\n      savedHandler.current(event);\n    document.addEventListener(eventName, eventListener);\n    return () => {\n      document.removeEventListener(eventName, eventListener);\n    };\n  }, [eventName]);\n};\n\n/**\n * Props for the DateRange component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TDateRangeProps = {\n  /** Unique identifier for the date range */\n  id: string;\n  /** Label text to display above the date range */\n  label?: string;\n  /** Start date value (ISO string or formatted date string) */\n  startDate: string;\n  /** End date value (ISO string or formatted date string) */\n  endDate: string;\n  /** Callback function called when date range changes */\n  onChange(data: any): void;\n  /** Callback function called when calendar selection changes */\n  onCalendarChange?(data: any): void;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Error message to display below the date range */\n  errorMessage?: string;\n  /** Additional CSS classes for the wrapper */\n  className?: string;\n  /** Whether the date range is disabled */\n  disabled?: boolean;\n  /** Custom date format */\n  dateFormat?: string;\n  /** Whether popup should render inside parent element */\n  shouldPopOnParent?: boolean;\n  /** Custom function to get popup container */\n  getPopupContainer?: (trigger: HTMLElement | null) => HTMLElement;\n  /** Maximum date range in days */\n  maxDateRange?: number;\n  /** Whether the picker is open */\n  open?: boolean;\n  /** Callback function called when open state changes */\n  onOpenChange?(open: boolean): void;\n  /** Placement of the dropdown */\n  placement?: \"bottomLeft\" | \"bottomRight\" | \"topLeft\" | \"topRight\";\n  /** Whether to render as an icon button that triggers the date picker */\n  renderAsIconButton?: boolean;\n  /** Additional CSS classes for the icon button */\n  iconButtonClassName?: string;\n  /** Additional CSS classes for the calendar icon inside the button */\n  iconClassName?: string;\n  /** Optional extra content in the label row (e.g. actions, badges) */\n  labelExtra?: React.ReactNode;\n  /** Input surface style: `'modified'` — Warning colors; `'deleted'` — Error colors; `'success'` — Success colors. */\n  inputEmphasis?: \"default\" | \"modified\" | \"deleted\" | \"success\";\n};\n\n/**\n * A date range picker component with label, validation, and styling support.\n * Features proper date handling, validation, and comprehensive prop support.\n * Built on top of Ant Design's RangePicker for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * DateRange component.\n *\n * @example\n * ```tsx\n * <DateRange\n *   id=\"event-dates\"\n *   label=\"Event Duration\"\n *   startDate={startDate}\n *   endDate={endDate}\n *   onChange={(dates) => {\n *     setStartDate(dates[0]);\n *     setEndDate(dates[1]);\n *   }}\n *   required\n * />\n * ```\n */\nexport const DateRange = ({\n  onCalendarChange = undefined,\n  onChange,\n  required,\n  label,\n  startDate,\n  endDate,\n  errorMessage,\n  className,\n  id,\n  disabled = false,\n  dateFormat,\n  shouldPopOnParent = true,\n  getPopupContainer: customGetPopupContainer,\n  maxDateRange,\n  open,\n  onOpenChange,\n  placement = \"bottomLeft\",\n  renderAsIconButton = false,\n  iconButtonClassName,\n  iconClassName,\n  labelExtra,\n  inputEmphasis = \"default\",\n}: TDateRangeProps) => {\n  const emphasisModifiedSkin = inputEmphasis === \"modified\" && !errorMessage;\n  const emphasisDeletedSkin = inputEmphasis === \"deleted\" && !errorMessage;\n  const emphasisSuccessSkin = inputEmphasis === \"success\" && !errorMessage;\n  const emphasisBg =\n    emphasisModifiedSkin ? \"var(--Warning-50, #FFFAEB)\" :\n    emphasisDeletedSkin ? \"var(--Error-50, #FEF2F2)\" :\n    emphasisSuccessSkin ? \"var(--Success-50, #F0FDF4)\" : \"\";\n  const emphasisBorder =\n    emphasisModifiedSkin ? \"var(--Warning-200, #FEDF89)\" :\n    emphasisDeletedSkin ? \"var(--Error-200, #FECACA)\" :\n    emphasisSuccessSkin ? \"var(--Success-200, #BBF7D0)\" : \"\";\n  const [isOpen, setIsOpen] = useState(false);\n  const [isNormalPickerOpen, setIsNormalPickerOpen] = useState(false);\n  const pickerRef = useRef<any>(null);\n  const normalPickerRef = useRef<any>(null);\n  const suppressNextIconOpenRef = useRef(false);\n  const suppressNextNormalOpenRef = useRef(false);\n\n  const parseDate = (str: string | number | Date | dayjs.Dayjs) => {\n    if (!str) return null;\n    return dayjs(str);\n  };\n\n  const START_ID = `date-range-start-${generateShortUUID()}`;\n  const END_ID = `date-range-end-${generateShortUUID()}`;\n\n  const handleIconClick = () => {\n    setIsOpen(true);\n    setTimeout(() => {\n      if (pickerRef.current) {\n        pickerRef.current.focus();\n      }\n    }, 0);\n  };\n\n  useEventListener(\"keydown\", (e: KeyboardEvent) => {\n    if (\n      e.key === KEYBOARD_KEYS.ENTER &&\n      document.activeElement instanceof HTMLInputElement\n    ) {\n      if (document?.activeElement?.id === START_ID) {\n        const date = dayjs(document?.activeElement?.value);\n        if (date.isValid()) {\n          onChange([date, parseDate(endDate)]);\n        }\n      }\n      if (document?.activeElement?.id === END_ID) {\n        const date = dayjs(document?.activeElement?.value);\n        if (date.isValid()) {\n          onChange([parseDate(startDate), date]);\n        }\n      }\n    }\n  });\n\n  const disabledDate = useCallback(\n    (current: dayjs.Dayjs) => {\n      const [start, end] = [parseDate(startDate), parseDate(endDate)];\n\n      if (!maxDateRange) return false;\n\n      if (start) {\n        return (\n          current.isBefore(start.startOf(\"day\")) ||\n          current.isAfter(start.add(maxDateRange, \"day\").endOf(\"day\"))\n        );\n      }\n\n      if (end) {\n        return (\n          current.isBefore(end.subtract(maxDateRange, \"day\").startOf(\"day\")) ||\n          current.isAfter(end.endOf(\"day\"))\n        );\n      }\n\n      return false;\n    },\n    [startDate, endDate, maxDateRange]\n  );\n\n  const handleKeyDownCapture = useCallback((e: React.KeyboardEvent) => {\n    if (e.key === KEYBOARD_KEYS.ENTER) {\n      const pickerIsOpen = renderAsIconButton ? isOpen : (open ?? isNormalPickerOpen);\n      if (!pickerIsOpen) {\n        e.preventDefault();\n        e.stopPropagation();\n\n        const form = (e.target as HTMLElement).closest('form');\n        if (form) {\n          const submitBtn = form.querySelector<HTMLButtonElement>('button[type=\"submit\"]');\n          if (submitBtn) {\n            submitBtn.click();\n          } else {\n            form.requestSubmit();\n          }\n        }\n      }\n    }\n  }, [renderAsIconButton, isOpen, open, isNormalPickerOpen]);\n\n  const handleIconPickerOpenChange = useCallback((nextOpen: boolean) => {\n    if (nextOpen && suppressNextIconOpenRef.current) {\n      suppressNextIconOpenRef.current = false;\n      setIsOpen(false);\n      return;\n    }\n\n    setIsOpen(nextOpen);\n    if (!nextOpen) {\n      suppressNextIconOpenRef.current = true;\n      requestAnimationFrame(() => {\n        pickerRef.current?.focus();\n        requestAnimationFrame(() => {\n          suppressNextIconOpenRef.current = false;\n        });\n      });\n    }\n  }, []);\n\n  const handleNormalOpenChange = useCallback((nextOpen: boolean) => {\n    if (nextOpen && suppressNextNormalOpenRef.current) {\n      suppressNextNormalOpenRef.current = false;\n      setIsNormalPickerOpen(false);\n      onOpenChange?.(false);\n      return;\n    }\n\n    setIsNormalPickerOpen(nextOpen);\n    onOpenChange?.(nextOpen);\n    if (!nextOpen) {\n      suppressNextNormalOpenRef.current = true;\n      requestAnimationFrame(() => {\n        normalPickerRef.current?.focus();\n        requestAnimationFrame(() => {\n          suppressNextNormalOpenRef.current = false;\n        });\n      });\n    }\n  }, [onOpenChange]);\n\n  if (renderAsIconButton) {\n    return (\n      <div id={id} className={className} onKeyDownCapture={handleKeyDownCapture}>\n        <IconButton\n          onClick={handleIconClick}\n          disabled={disabled}\n          variant=\"default\"\n          className={iconButtonClassName}\n        >\n          <CalendarMonthIcon size={20} className={cn(\"w-5 h-5\", iconClassName)} />\n        </IconButton>\n        <RangePicker\n          ref={pickerRef}\n          onChange={(dates) => {\n            onChange(dates);\n            setIsOpen(false);\n          }}\n          onCalendarChange={onCalendarChange}\n          value={[parseDate(startDate), parseDate(endDate)]}\n          id={{ start: START_ID, end: END_ID }}\n          allowClear\n          format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n          separator={<CheckIndeterminateSmallFilledIcon size={20} className=\"text-neutral-400 dark:text-gray-100\" />}\n          suffixIcon={<CalendarMonthIcon size={14} className=\"text-neutral-400 dark:text-gray-100\" />}\n          getPopupContainer={\n            customGetPopupContainer\n              ? customGetPopupContainer\n              : shouldPopOnParent\n                ? (trigger) => trigger.parentElement as HTMLElement\n                : () => document.body\n          }\n          disabled={disabled}\n          disabledDate={maxDateRange ? disabledDate : undefined}\n          autoComplete=\"off\"\n          open={isOpen}\n          onOpenChange={handleIconPickerOpenChange}\n          placement={placement}\n          style={{ position: \"absolute\", opacity: 0, pointerEvents: \"none\", width: 0, height: 0 }}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div id={id} className={cn(\"flex flex-col\", className)} onKeyDownCapture={handleKeyDownCapture}>\n      {(label || labelExtra) && (\n        <div className=\"mb-1 flex items-center justify-between gap-1\">\n          <InputLabel label={label || \"\"} required={required || false} />\n          {labelExtra}\n        </div>\n      )}\n      {(emphasisBg || emphasisBorder) && (\n        <style>{`\n          #${id} .ant-picker {\n            background-color: ${emphasisBg} !important;\n            border-color: ${emphasisBorder} !important;\n          }\n          #${id} .ant-picker:hover {\n            border-color: ${emphasisBorder} !important;\n          }\n          #${id} .ant-picker.ant-picker-focused {\n            border-color: ${emphasisBorder} !important;\n            box-shadow: 0 0 0 2px ${emphasisDeletedSkin ? \"rgba(254,202,202,0.45)\" : emphasisModifiedSkin ? \"rgba(254,223,137,0.45)\" : \"rgba(187,247,208,0.45)\"} !important;\n          }\n          #${id} .ant-picker .ant-picker-input > input {\n            color: ${emphasisDeletedSkin ? \"#475467\" : emphasisSuccessSkin ? \"#101828\" : \"inherit\"};\n          }\n        `}</style>\n      )}\n      <RangePicker\n        ref={normalPickerRef}\n        onChange={onChange}\n        onCalendarChange={onCalendarChange}\n        value={[parseDate(startDate), parseDate(endDate)]}\n        id={{ start: START_ID, end: END_ID }}\n        allowClear\n        format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n        separator={\n          <CheckIndeterminateSmallFilledIcon size={20} className='text-neutral-400 dark:text-gray-100' />\n        }\n        suffixIcon={\n          <CalendarMonthIcon size={14} className='text-neutral-400 dark:text-gray-100' />\n        }\n        getPopupContainer={\n          customGetPopupContainer\n            ? customGetPopupContainer\n            : shouldPopOnParent\n              ? (trigger) => trigger.parentElement as HTMLElement\n              : () => document.body\n        }\n        disabled={disabled}\n        disabledDate={maxDateRange ? disabledDate : undefined}\n        open={open ?? isNormalPickerOpen}\n        onOpenChange={handleNormalOpenChange}\n        autoComplete=\"off\"\n        placement={placement}\n      />\n      {errorMessage && (\n        <p\n          className={cn(\n            \"text-sm font-inter font-normal text-left pt-[6px]\",\n            \"text-red-500\"\n          )}\n        >\n          {errorMessage}\n        </p>\n      )}\n    </div>\n  );\n};\n\nDateRange.displayName = \"DateRange\";\n\n"],"names":["RangePicker","DatePicker","KEYBOARD_KEYS","generateShortUUID","useEventListener","eventName","handler","savedHandler","useRef","useEffect","eventListener","event","DateRange","onCalendarChange","onChange","required","label","startDate","endDate","errorMessage","className","id","disabled","dateFormat","shouldPopOnParent","customGetPopupContainer","maxDateRange","open","onOpenChange","placement","renderAsIconButton","iconButtonClassName","iconClassName","labelExtra","inputEmphasis","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","emphasisBg","emphasisBorder","isOpen","setIsOpen","useState","isNormalPickerOpen","setIsNormalPickerOpen","pickerRef","normalPickerRef","suppressNextIconOpenRef","suppressNextNormalOpenRef","parseDate","str","dayjs","START_ID","END_ID","handleIconClick","date","disabledDate","useCallback","current","start","end","handleKeyDownCapture","form","submitBtn","handleIconPickerOpenChange","nextOpen","handleNormalOpenChange","jsxs","jsx","IconButton","CalendarMonthIcon","cn","dates","CheckIndeterminateSmallFilledIcon","trigger","InputLabel"],"mappings":"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"}
+{"version":3,"file":"DateRange.cjs.js","sources":["../../../../src/components/forms/date-range/DateRange.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { DatePicker } from \"antd\";\nimport cn from \"classnames\";\nimport React from \"react\";\nimport dayjs from \"dayjs\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport IconButton from \"../../button/IconButton\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { CalendarMonthIcon, CheckIndeterminateSmallFilledIcon } from '../../icon';\n\nconst { RangePicker } = DatePicker;\n\n// Keyboard keys constant\nconst KEYBOARD_KEYS = {\n  ENTER: \"Enter\",\n} as const;\n\n/**\n * Generate a short UUID\n */\nconst generateShortUUID = (): string => {\n  return Math.random().toString(36).substring(2, 9);\n};\n\n/**\n * Hook to add event listeners\n */\nconst useEventListener = <K extends keyof DocumentEventMap>(\n  eventName: K,\n  handler: (event: DocumentEventMap[K]) => void\n) => {\n  const savedHandler = useRef(handler);\n\n  useEffect(() => {\n    savedHandler.current = handler;\n  }, [handler]);\n\n  useEffect(() => {\n    const eventListener = (event: DocumentEventMap[K]) =>\n      savedHandler.current(event);\n    document.addEventListener(eventName, eventListener);\n    return () => {\n      document.removeEventListener(eventName, eventListener);\n    };\n  }, [eventName]);\n};\n\n/**\n * Props for the DateRange component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TDateRangeProps = {\n  /** Unique identifier for the date range */\n  id: string;\n  /** Label text to display above the date range */\n  label?: string;\n  /** Start date value (ISO string or formatted date string) */\n  startDate: string;\n  /** End date value (ISO string or formatted date string) */\n  endDate: string;\n  /** Callback function called when date range changes */\n  onChange(data: any): void;\n  /** Callback function called when calendar selection changes */\n  onCalendarChange?(data: any): void;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Error message to display below the date range */\n  errorMessage?: string;\n  /** Additional CSS classes for the wrapper */\n  className?: string;\n  /** Whether the date range is disabled */\n  disabled?: boolean;\n  /** Custom date format */\n  dateFormat?: string;\n  /** Whether popup should render inside parent element */\n  shouldPopOnParent?: boolean;\n  /** Custom function to get popup container */\n  getPopupContainer?: (trigger: HTMLElement | null) => HTMLElement;\n  /** Maximum date range in days */\n  maxDateRange?: number;\n  /** Whether the picker is open */\n  open?: boolean;\n  /** Callback function called when open state changes */\n  onOpenChange?(open: boolean): void;\n  /** Placement of the dropdown */\n  placement?: \"bottomLeft\" | \"bottomRight\" | \"topLeft\" | \"topRight\";\n  /** Preset date ranges shown in the picker dropdown */\n  presets?: { label: React.ReactNode; value: any }[];\n  /** Whether to render as an icon button that triggers the date picker */\n  renderAsIconButton?: boolean;\n  /** Additional CSS classes for the icon button */\n  iconButtonClassName?: string;\n  /** Additional CSS classes for the calendar icon inside the button */\n  iconClassName?: string;\n  /** Optional extra content in the label row (e.g. actions, badges) */\n  labelExtra?: React.ReactNode;\n  /** Input surface style: `'modified'` — Warning colors; `'deleted'` — Error colors; `'success'` — Success colors. */\n  inputEmphasis?: \"default\" | \"modified\" | \"deleted\" | \"success\";\n};\n\n/**\n * A date range picker component with label, validation, and styling support.\n * Features proper date handling, validation, and comprehensive prop support.\n * Built on top of Ant Design's RangePicker for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * DateRange component.\n *\n * @example\n * ```tsx\n * <DateRange\n *   id=\"event-dates\"\n *   label=\"Event Duration\"\n *   startDate={startDate}\n *   endDate={endDate}\n *   onChange={(dates) => {\n *     setStartDate(dates[0]);\n *     setEndDate(dates[1]);\n *   }}\n *   required\n * />\n * ```\n */\nexport const DateRange = ({\n  onCalendarChange = undefined,\n  onChange,\n  required,\n  label,\n  startDate,\n  endDate,\n  errorMessage,\n  className,\n  id,\n  disabled = false,\n  dateFormat,\n  shouldPopOnParent = true,\n  getPopupContainer: customGetPopupContainer,\n  maxDateRange,\n  open,\n  onOpenChange,\n  placement = \"bottomLeft\",\n  renderAsIconButton = false,\n  iconButtonClassName,\n  iconClassName,\n  labelExtra,\n  inputEmphasis = \"default\",\n  presets,\n}: TDateRangeProps) => {\n  const emphasisModifiedSkin = inputEmphasis === \"modified\" && !errorMessage;\n  const emphasisDeletedSkin = inputEmphasis === \"deleted\" && !errorMessage;\n  const emphasisSuccessSkin = inputEmphasis === \"success\" && !errorMessage;\n  const emphasisBg =\n    emphasisModifiedSkin ? \"var(--Warning-50, #FFFAEB)\" :\n    emphasisDeletedSkin ? \"var(--Error-50, #FEF2F2)\" :\n    emphasisSuccessSkin ? \"var(--Success-50, #F0FDF4)\" : \"\";\n  const emphasisBorder =\n    emphasisModifiedSkin ? \"var(--Warning-200, #FEDF89)\" :\n    emphasisDeletedSkin ? \"var(--Error-200, #FECACA)\" :\n    emphasisSuccessSkin ? \"var(--Success-200, #BBF7D0)\" : \"\";\n  const [isOpen, setIsOpen] = useState(false);\n  const [isNormalPickerOpen, setIsNormalPickerOpen] = useState(false);\n  const pickerRef = useRef<any>(null);\n  const normalPickerRef = useRef<any>(null);\n  const suppressNextIconOpenRef = useRef(false);\n  const suppressNextNormalOpenRef = useRef(false);\n\n  const parseDate = (str: string | number | Date | dayjs.Dayjs) => {\n    if (!str) return null;\n    return dayjs(str);\n  };\n\n  const START_ID = `date-range-start-${generateShortUUID()}`;\n  const END_ID = `date-range-end-${generateShortUUID()}`;\n\n  const handleIconClick = () => {\n    setIsOpen(true);\n    setTimeout(() => {\n      if (pickerRef.current) {\n        pickerRef.current.focus();\n      }\n    }, 0);\n  };\n\n  useEventListener(\"keydown\", (e: KeyboardEvent) => {\n    if (\n      e.key === KEYBOARD_KEYS.ENTER &&\n      document.activeElement instanceof HTMLInputElement\n    ) {\n      if (document?.activeElement?.id === START_ID) {\n        const date = dayjs(document?.activeElement?.value);\n        if (date.isValid()) {\n          onChange([date, parseDate(endDate)]);\n        }\n      }\n      if (document?.activeElement?.id === END_ID) {\n        const date = dayjs(document?.activeElement?.value);\n        if (date.isValid()) {\n          onChange([parseDate(startDate), date]);\n        }\n      }\n    }\n  });\n\n  const disabledDate = useCallback(\n    (current: dayjs.Dayjs) => {\n      const [start, end] = [parseDate(startDate), parseDate(endDate)];\n\n      if (!maxDateRange) return false;\n\n      if (start) {\n        return (\n          current.isBefore(start.startOf(\"day\")) ||\n          current.isAfter(start.add(maxDateRange, \"day\").endOf(\"day\"))\n        );\n      }\n\n      if (end) {\n        return (\n          current.isBefore(end.subtract(maxDateRange, \"day\").startOf(\"day\")) ||\n          current.isAfter(end.endOf(\"day\"))\n        );\n      }\n\n      return false;\n    },\n    [startDate, endDate, maxDateRange]\n  );\n\n  const handleKeyDownCapture = useCallback((e: React.KeyboardEvent) => {\n    if (e.key === KEYBOARD_KEYS.ENTER) {\n      const pickerIsOpen = renderAsIconButton ? isOpen : (open ?? isNormalPickerOpen);\n      if (!pickerIsOpen) {\n        e.preventDefault();\n        e.stopPropagation();\n\n        const form = (e.target as HTMLElement).closest('form');\n        if (form) {\n          const submitBtn = form.querySelector<HTMLButtonElement>('button[type=\"submit\"]');\n          if (submitBtn) {\n            submitBtn.click();\n          } else {\n            form.requestSubmit();\n          }\n        }\n      }\n    }\n  }, [renderAsIconButton, isOpen, open, isNormalPickerOpen]);\n\n  const handleIconPickerOpenChange = useCallback((nextOpen: boolean) => {\n    if (nextOpen && suppressNextIconOpenRef.current) {\n      suppressNextIconOpenRef.current = false;\n      setIsOpen(false);\n      return;\n    }\n\n    setIsOpen(nextOpen);\n    if (!nextOpen) {\n      suppressNextIconOpenRef.current = true;\n      requestAnimationFrame(() => {\n        pickerRef.current?.focus();\n        requestAnimationFrame(() => {\n          suppressNextIconOpenRef.current = false;\n        });\n      });\n    }\n  }, []);\n\n  const handleNormalOpenChange = useCallback((nextOpen: boolean) => {\n    if (nextOpen && suppressNextNormalOpenRef.current) {\n      suppressNextNormalOpenRef.current = false;\n      setIsNormalPickerOpen(false);\n      onOpenChange?.(false);\n      return;\n    }\n\n    setIsNormalPickerOpen(nextOpen);\n    onOpenChange?.(nextOpen);\n    if (!nextOpen) {\n      suppressNextNormalOpenRef.current = true;\n      requestAnimationFrame(() => {\n        normalPickerRef.current?.focus();\n        requestAnimationFrame(() => {\n          suppressNextNormalOpenRef.current = false;\n        });\n      });\n    }\n  }, [onOpenChange]);\n\n  if (renderAsIconButton) {\n    return (\n      <div id={id} className={className} onKeyDownCapture={handleKeyDownCapture}>\n        <IconButton\n          onClick={handleIconClick}\n          disabled={disabled}\n          variant=\"default\"\n          className={iconButtonClassName}\n        >\n          <CalendarMonthIcon size={20} className={cn(\"w-5 h-5\", iconClassName)} />\n        </IconButton>\n        <RangePicker\n          ref={pickerRef}\n          onChange={(dates) => {\n            onChange(dates);\n            setIsOpen(false);\n          }}\n          onCalendarChange={onCalendarChange}\n          value={[parseDate(startDate), parseDate(endDate)]}\n          id={{ start: START_ID, end: END_ID }}\n          allowClear\n          format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n          separator={<CheckIndeterminateSmallFilledIcon size={20} className=\"text-neutral-400 dark:text-gray-100\" />}\n          suffixIcon={<CalendarMonthIcon size={14} className=\"text-neutral-400 dark:text-gray-100\" />}\n          getPopupContainer={\n            customGetPopupContainer\n              ? customGetPopupContainer\n              : shouldPopOnParent\n                ? (trigger) => trigger.parentElement as HTMLElement\n                : () => document.body\n          }\n          disabled={disabled}\n          disabledDate={maxDateRange ? disabledDate : undefined}\n          autoComplete=\"off\"\n          open={isOpen}\n          onOpenChange={handleIconPickerOpenChange}\n          placement={placement}\n          presets={presets}\n          style={{ position: \"absolute\", opacity: 0, pointerEvents: \"none\", width: 0, height: 0 }}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div id={id} className={cn(\"flex flex-col\", className)} onKeyDownCapture={handleKeyDownCapture}>\n      {(label || labelExtra) && (\n        <div className=\"mb-1 flex items-center justify-between gap-1\">\n          <InputLabel label={label || \"\"} required={required || false} />\n          {labelExtra}\n        </div>\n      )}\n      {(emphasisBg || emphasisBorder) && (\n        <style>{`\n          #${id} .ant-picker {\n            background-color: ${emphasisBg} !important;\n            border-color: ${emphasisBorder} !important;\n          }\n          #${id} .ant-picker:hover {\n            border-color: ${emphasisBorder} !important;\n          }\n          #${id} .ant-picker.ant-picker-focused {\n            border-color: ${emphasisBorder} !important;\n            box-shadow: 0 0 0 2px ${emphasisDeletedSkin ? \"rgba(254,202,202,0.45)\" : emphasisModifiedSkin ? \"rgba(254,223,137,0.45)\" : \"rgba(187,247,208,0.45)\"} !important;\n          }\n          #${id} .ant-picker .ant-picker-input > input {\n            color: ${emphasisDeletedSkin ? \"#475467\" : emphasisSuccessSkin ? \"#101828\" : \"inherit\"};\n          }\n        `}</style>\n      )}\n      <RangePicker\n        ref={normalPickerRef}\n        onChange={onChange}\n        onCalendarChange={onCalendarChange}\n        value={[parseDate(startDate), parseDate(endDate)]}\n        id={{ start: START_ID, end: END_ID }}\n        allowClear\n        format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n        separator={\n          <CheckIndeterminateSmallFilledIcon size={20} className='text-neutral-400 dark:text-gray-100' />\n        }\n        suffixIcon={\n          <CalendarMonthIcon size={14} className='text-neutral-400 dark:text-gray-100' />\n        }\n        getPopupContainer={\n          customGetPopupContainer\n            ? customGetPopupContainer\n            : shouldPopOnParent\n              ? (trigger) => trigger.parentElement as HTMLElement\n              : () => document.body\n        }\n        disabled={disabled}\n        disabledDate={maxDateRange ? disabledDate : undefined}\n        open={open ?? isNormalPickerOpen}\n        onOpenChange={handleNormalOpenChange}\n        autoComplete=\"off\"\n        placement={placement}\n        presets={presets}\n      />\n      {errorMessage && (\n        <p\n          className={cn(\n            \"text-sm font-inter font-normal text-left pt-[6px]\",\n            \"text-red-500\"\n          )}\n        >\n          {errorMessage}\n        </p>\n      )}\n    </div>\n  );\n};\n\nDateRange.displayName = \"DateRange\";\n\n"],"names":["RangePicker","DatePicker","KEYBOARD_KEYS","generateShortUUID","useEventListener","eventName","handler","savedHandler","useRef","useEffect","eventListener","event","DateRange","onCalendarChange","onChange","required","label","startDate","endDate","errorMessage","className","id","disabled","dateFormat","shouldPopOnParent","customGetPopupContainer","maxDateRange","open","onOpenChange","placement","renderAsIconButton","iconButtonClassName","iconClassName","labelExtra","inputEmphasis","presets","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","emphasisBg","emphasisBorder","isOpen","setIsOpen","useState","isNormalPickerOpen","setIsNormalPickerOpen","pickerRef","normalPickerRef","suppressNextIconOpenRef","suppressNextNormalOpenRef","parseDate","str","dayjs","START_ID","END_ID","handleIconClick","date","disabledDate","useCallback","current","start","end","handleKeyDownCapture","form","submitBtn","handleIconPickerOpenChange","nextOpen","handleNormalOpenChange","jsxs","jsx","IconButton","CalendarMonthIcon","cn","dates","CheckIndeterminateSmallFilledIcon","trigger","InputLabel"],"mappings":"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"}

package/dist/components/forms/date-range/DateRange.d.ts

@@ -38,6 +38,11 @@ export type TDateRangeProps = {
     onOpenChange?(open: boolean): void;
     /** Placement of the dropdown */
     placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
+    /** Preset date ranges shown in the picker dropdown */
+    presets?: {
+        label: React.ReactNode;
+        value: any;
+    }[];
     /** Whether to render as an icon button that triggers the date picker */
     renderAsIconButton?: boolean;
     /** Additional CSS classes for the icon button */
@@ -73,6 +78,6 @@ export type TDateRangeProps = {
  * ```
  */
 export declare const DateRange: {
-    ({ onCalendarChange, onChange, required, label, startDate, endDate, errorMessage, className, id, disabled, dateFormat, shouldPopOnParent, getPopupContainer: customGetPopupContainer, maxDateRange, open, onOpenChange, placement, renderAsIconButton, iconButtonClassName, iconClassName, labelExtra, inputEmphasis, }: TDateRangeProps): import("react/jsx-runtime").JSX.Element;
+    ({ onCalendarChange, onChange, required, label, startDate, endDate, errorMessage, className, id, disabled, dateFormat, shouldPopOnParent, getPopupContainer: customGetPopupContainer, maxDateRange, open, onOpenChange, placement, renderAsIconButton, iconButtonClassName, iconClassName, labelExtra, inputEmphasis, presets, }: TDateRangeProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/forms/date-range/DateRange.es.js

@@ -1,29 +1,29 @@
 import { jsxs as R, jsx as t } from "react/jsx-runtime";
-import { DatePicker as ie } from "antd";
+import { DatePicker as ae } from "antd";
 import q from "../../../_virtual/index.es.js";
-import { useState as J, useRef as m, useCallback as I, useEffect as Q } from "react";
+import { useState as Q, useRef as m, useCallback as I, useEffect as X } from "react";
 import L from "dayjs";
-import ae from "../../button/IconButton.es.js";
-import { InputLabel as ce } from "../shared/InputLabel.es.js";
-import { CalendarMonthIcon as T, CheckIndeterminateSmallFilledIcon as X } from "../../icon/icons.generated.es.js";
-const { RangePicker: Z } = ie, G = {
+import ce from "../../button/IconButton.es.js";
+import { InputLabel as le } from "../shared/InputLabel.es.js";
+import { CalendarMonthIcon as T, CheckIndeterminateSmallFilledIcon as Z } from "../../icon/icons.generated.es.js";
+const { RangePicker: G } = ae, ee = {
   ENTER: "Enter"
-}, ee = () => Math.random().toString(36).substring(2, 9), le = (a, n) => {
+}, te = () => Math.random().toString(36).substring(2, 9), fe = (a, n) => {
   const p = m(n);
-  Q(() => {
+  X(() => {
     p.current = n;
-  }, [n]), Q(() => {
-    const f = (o) => p.current(o);
+  }, [n]), X(() => {
+    const f = (s) => p.current(s);
     return document.addEventListener(a, f), () => {
       document.removeEventListener(a, f);
     };
   }, [a]);
-}, fe = ({
+}, ue = ({
   onCalendarChange: a = void 0,
   onChange: n,
   required: p,
   label: f,
-  startDate: o,
+  startDate: s,
   endDate: u,
   errorMessage: d,
   className: M,
@@ -37,41 +37,42 @@ const { RangePicker: Z } = ie, G = {
   onOpenChange: x,
   placement: K = "bottomLeft",
   renderAsIconButton: C = !1,
-  iconButtonClassName: te,
-  iconClassName: re,
+  iconButtonClassName: re,
+  iconClassName: ne,
   labelExtra: P,
-  inputEmphasis: $ = "default"
+  inputEmphasis: $ = "default",
+  presets: j
 }) => {
-  const D = $ === "modified" && !d, y = $ === "deleted" && !d, w = $ === "success" && !d, j = D ? "var(--Warning-50, #FFFAEB)" : y ? "var(--Error-50, #FEF2F2)" : w ? "var(--Success-50, #F0FDF4)" : "", E = D ? "var(--Warning-200, #FEDF89)" : y ? "var(--Error-200, #FECACA)" : w ? "var(--Success-200, #BBF7D0)" : "", [Y, b] = J(!1), [A, _] = J(!1), h = m(null), H = m(null), N = m(!1), g = m(!1), s = (e) => e ? L(e) : null, O = `date-range-start-${ee()}`, B = `date-range-end-${ee()}`, ne = () => {
+  const D = $ === "modified" && !d, y = $ === "deleted" && !d, w = $ === "success" && !d, _ = D ? "var(--Warning-50, #FFFAEB)" : y ? "var(--Error-50, #FEF2F2)" : w ? "var(--Success-50, #F0FDF4)" : "", E = D ? "var(--Warning-200, #FEDF89)" : y ? "var(--Error-200, #FECACA)" : w ? "var(--Success-200, #BBF7D0)" : "", [Y, b] = Q(!1), [A, H] = Q(!1), h = m(null), U = m(null), N = m(!1), g = m(!1), o = (e) => e ? L(e) : null, O = `date-range-start-${te()}`, B = `date-range-end-${te()}`, oe = () => {
     b(!0), setTimeout(() => {
       h.current && h.current.focus();
     }, 0);
   };
-  le("keydown", (e) => {
-    if (e.key === G.ENTER && document.activeElement instanceof HTMLInputElement) {
+  fe("keydown", (e) => {
+    if (e.key === ee.ENTER && document.activeElement instanceof HTMLInputElement) {
       if (document?.activeElement?.id === O) {
         const r = L(document?.activeElement?.value);
-        r.isValid() && n([r, s(u)]);
+        r.isValid() && n([r, o(u)]);
       }
       if (document?.activeElement?.id === B) {
         const r = L(document?.activeElement?.value);
-        r.isValid() && n([s(o), r]);
+        r.isValid() && n([o(s), r]);
       }
     }
   });
-  const U = I(
+  const V = I(
     (e) => {
-      const [r, i] = [s(o), s(u)];
+      const [r, i] = [o(s), o(u)];
       return l ? r ? e.isBefore(r.startOf("day")) || e.isAfter(r.add(l, "day").endOf("day")) : i ? e.isBefore(i.subtract(l, "day").startOf("day")) || e.isAfter(i.endOf("day")) : !1 : !1;
     },
-    [o, u, l]
-  ), V = I((e) => {
-    if (e.key === G.ENTER && !(C ? Y : S ?? A)) {
+    [s, u, l]
+  ), W = I((e) => {
+    if (e.key === ee.ENTER && !(C ? Y : S ?? A)) {
       e.preventDefault(), e.stopPropagation();
       const i = e.target.closest("form");
       if (i) {
-        const W = i.querySelector('button[type="submit"]');
-        W ? W.click() : i.requestSubmit();
+        const J = i.querySelector('button[type="submit"]');
+        J ? J.click() : i.requestSubmit();
       }
     }
   }, [C, Y, S, A]), se = I((e) => {
@@ -84,60 +85,61 @@ const { RangePicker: Z } = ie, G = {
         N.current = !1;
       });
     }));
-  }, []), oe = I((e) => {
+  }, []), ie = I((e) => {
     if (e && g.current) {
-      g.current = !1, _(!1), x?.(!1);
+      g.current = !1, H(!1), x?.(!1);
       return;
     }
-    _(e), x?.(e), e || (g.current = !0, requestAnimationFrame(() => {
-      H.current?.focus(), requestAnimationFrame(() => {
+    H(e), x?.(e), e || (g.current = !0, requestAnimationFrame(() => {
+      U.current?.focus(), requestAnimationFrame(() => {
         g.current = !1;
       });
     }));
   }, [x]);
-  return C ? /* @__PURE__ */ R("div", { id: c, className: M, onKeyDownCapture: V, children: [
+  return C ? /* @__PURE__ */ R("div", { id: c, className: M, onKeyDownCapture: W, children: [
     /* @__PURE__ */ t(
-      ae,
+      ce,
       {
-        onClick: ne,
+        onClick: oe,
         disabled: F,
         variant: "default",
-        className: te,
-        children: /* @__PURE__ */ t(T, { size: 20, className: q("w-5 h-5", re) })
+        className: re,
+        children: /* @__PURE__ */ t(T, { size: 20, className: q("w-5 h-5", ne) })
       }
     ),
     /* @__PURE__ */ t(
-      Z,
+      G,
       {
         ref: h,
         onChange: (e) => {
           n(e), b(!1);
         },
         onCalendarChange: a,
-        value: [s(o), s(u)],
+        value: [o(s), o(u)],
         id: { start: O, end: B },
         allowClear: !0,
         format: k || "DD MMM, YYYY",
-        separator: /* @__PURE__ */ t(X, { size: 20, className: "text-neutral-400 dark:text-gray-100" }),
+        separator: /* @__PURE__ */ t(Z, { size: 20, className: "text-neutral-400 dark:text-gray-100" }),
         suffixIcon: /* @__PURE__ */ t(T, { size: 14, className: "text-neutral-400 dark:text-gray-100" }),
         getPopupContainer: v || (z ? (e) => e.parentElement : () => document.body),
         disabled: F,
-        disabledDate: l ? U : void 0,
+        disabledDate: l ? V : void 0,
         autoComplete: "off",
         open: Y,
         onOpenChange: se,
         placement: K,
+        presets: j,
         style: { position: "absolute", opacity: 0, pointerEvents: "none", width: 0, height: 0 }
       }
     )
-  ] }) : /* @__PURE__ */ R("div", { id: c, className: q("flex flex-col", M), onKeyDownCapture: V, children: [
+  ] }) : /* @__PURE__ */ R("div", { id: c, className: q("flex flex-col", M), onKeyDownCapture: W, children: [
     (f || P) && /* @__PURE__ */ R("div", { className: "mb-1 flex items-center justify-between gap-1", children: [
-      /* @__PURE__ */ t(ce, { label: f || "", required: p || !1 }),
+      /* @__PURE__ */ t(le, { label: f || "", required: p || !1 }),
       P
     ] }),
-    (j || E) && /* @__PURE__ */ t("style", { children: `
+    (_ || E) && /* @__PURE__ */ t("style", { children: `
           #${c} .ant-picker {
-            background-color: ${j} !important;
+            background-color: ${_} !important;
             border-color: ${E} !important;
           }
           #${c} .ant-picker:hover {
@@ -152,24 +154,25 @@ const { RangePicker: Z } = ie, G = {
           }
         ` }),
     /* @__PURE__ */ t(
-      Z,
+      G,
       {
-        ref: H,
+        ref: U,
         onChange: n,
         onCalendarChange: a,
-        value: [s(o), s(u)],
+        value: [o(s), o(u)],
         id: { start: O, end: B },
         allowClear: !0,
         format: k || "DD MMM, YYYY",
-        separator: /* @__PURE__ */ t(X, { size: 20, className: "text-neutral-400 dark:text-gray-100" }),
+        separator: /* @__PURE__ */ t(Z, { size: 20, className: "text-neutral-400 dark:text-gray-100" }),
         suffixIcon: /* @__PURE__ */ t(T, { size: 14, className: "text-neutral-400 dark:text-gray-100" }),
         getPopupContainer: v || (z ? (e) => e.parentElement : () => document.body),
         disabled: F,
-        disabledDate: l ? U : void 0,
+        disabledDate: l ? V : void 0,
         open: S ?? A,
-        onOpenChange: oe,
+        onOpenChange: ie,
         autoComplete: "off",
-        placement: K
+        placement: K,
+        presets: j
       }
     ),
     d && /* @__PURE__ */ t(
@@ -184,8 +187,8 @@ const { RangePicker: Z } = ie, G = {
     )
   ] });
 };
-fe.displayName = "DateRange";
+ue.displayName = "DateRange";
 export {
-  fe as DateRange
+  ue as DateRange
 };
 //# sourceMappingURL=DateRange.es.js.map

package/dist/components/forms/date-range/DateRange.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRange.es.js","sources":["../../../../src/components/forms/date-range/DateRange.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { DatePicker } from \"antd\";\nimport cn from \"classnames\";\nimport React from \"react\";\nimport dayjs from \"dayjs\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport IconButton from \"../../button/IconButton\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { CalendarMonthIcon, CheckIndeterminateSmallFilledIcon } from '../../icon';\n\nconst { RangePicker } = DatePicker;\n\n// Keyboard keys constant\nconst KEYBOARD_KEYS = {\n  ENTER: \"Enter\",\n} as const;\n\n/**\n * Generate a short UUID\n */\nconst generateShortUUID = (): string => {\n  return Math.random().toString(36).substring(2, 9);\n};\n\n/**\n * Hook to add event listeners\n */\nconst useEventListener = <K extends keyof DocumentEventMap>(\n  eventName: K,\n  handler: (event: DocumentEventMap[K]) => void\n) => {\n  const savedHandler = useRef(handler);\n\n  useEffect(() => {\n    savedHandler.current = handler;\n  }, [handler]);\n\n  useEffect(() => {\n    const eventListener = (event: DocumentEventMap[K]) =>\n      savedHandler.current(event);\n    document.addEventListener(eventName, eventListener);\n    return () => {\n      document.removeEventListener(eventName, eventListener);\n    };\n  }, [eventName]);\n};\n\n/**\n * Props for the DateRange component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TDateRangeProps = {\n  /** Unique identifier for the date range */\n  id: string;\n  /** Label text to display above the date range */\n  label?: string;\n  /** Start date value (ISO string or formatted date string) */\n  startDate: string;\n  /** End date value (ISO string or formatted date string) */\n  endDate: string;\n  /** Callback function called when date range changes */\n  onChange(data: any): void;\n  /** Callback function called when calendar selection changes */\n  onCalendarChange?(data: any): void;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Error message to display below the date range */\n  errorMessage?: string;\n  /** Additional CSS classes for the wrapper */\n  className?: string;\n  /** Whether the date range is disabled */\n  disabled?: boolean;\n  /** Custom date format */\n  dateFormat?: string;\n  /** Whether popup should render inside parent element */\n  shouldPopOnParent?: boolean;\n  /** Custom function to get popup container */\n  getPopupContainer?: (trigger: HTMLElement | null) => HTMLElement;\n  /** Maximum date range in days */\n  maxDateRange?: number;\n  /** Whether the picker is open */\n  open?: boolean;\n  /** Callback function called when open state changes */\n  onOpenChange?(open: boolean): void;\n  /** Placement of the dropdown */\n  placement?: \"bottomLeft\" | \"bottomRight\" | \"topLeft\" | \"topRight\";\n  /** Whether to render as an icon button that triggers the date picker */\n  renderAsIconButton?: boolean;\n  /** Additional CSS classes for the icon button */\n  iconButtonClassName?: string;\n  /** Additional CSS classes for the calendar icon inside the button */\n  iconClassName?: string;\n  /** Optional extra content in the label row (e.g. actions, badges) */\n  labelExtra?: React.ReactNode;\n  /** Input surface style: `'modified'` — Warning colors; `'deleted'` — Error colors; `'success'` — Success colors. */\n  inputEmphasis?: \"default\" | \"modified\" | \"deleted\" | \"success\";\n};\n\n/**\n * A date range picker component with label, validation, and styling support.\n * Features proper date handling, validation, and comprehensive prop support.\n * Built on top of Ant Design's RangePicker for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * DateRange component.\n *\n * @example\n * ```tsx\n * <DateRange\n *   id=\"event-dates\"\n *   label=\"Event Duration\"\n *   startDate={startDate}\n *   endDate={endDate}\n *   onChange={(dates) => {\n *     setStartDate(dates[0]);\n *     setEndDate(dates[1]);\n *   }}\n *   required\n * />\n * ```\n */\nexport const DateRange = ({\n  onCalendarChange = undefined,\n  onChange,\n  required,\n  label,\n  startDate,\n  endDate,\n  errorMessage,\n  className,\n  id,\n  disabled = false,\n  dateFormat,\n  shouldPopOnParent = true,\n  getPopupContainer: customGetPopupContainer,\n  maxDateRange,\n  open,\n  onOpenChange,\n  placement = \"bottomLeft\",\n  renderAsIconButton = false,\n  iconButtonClassName,\n  iconClassName,\n  labelExtra,\n  inputEmphasis = \"default\",\n}: TDateRangeProps) => {\n  const emphasisModifiedSkin = inputEmphasis === \"modified\" && !errorMessage;\n  const emphasisDeletedSkin = inputEmphasis === \"deleted\" && !errorMessage;\n  const emphasisSuccessSkin = inputEmphasis === \"success\" && !errorMessage;\n  const emphasisBg =\n    emphasisModifiedSkin ? \"var(--Warning-50, #FFFAEB)\" :\n    emphasisDeletedSkin ? \"var(--Error-50, #FEF2F2)\" :\n    emphasisSuccessSkin ? \"var(--Success-50, #F0FDF4)\" : \"\";\n  const emphasisBorder =\n    emphasisModifiedSkin ? \"var(--Warning-200, #FEDF89)\" :\n    emphasisDeletedSkin ? \"var(--Error-200, #FECACA)\" :\n    emphasisSuccessSkin ? \"var(--Success-200, #BBF7D0)\" : \"\";\n  const [isOpen, setIsOpen] = useState(false);\n  const [isNormalPickerOpen, setIsNormalPickerOpen] = useState(false);\n  const pickerRef = useRef<any>(null);\n  const normalPickerRef = useRef<any>(null);\n  const suppressNextIconOpenRef = useRef(false);\n  const suppressNextNormalOpenRef = useRef(false);\n\n  const parseDate = (str: string | number | Date | dayjs.Dayjs) => {\n    if (!str) return null;\n    return dayjs(str);\n  };\n\n  const START_ID = `date-range-start-${generateShortUUID()}`;\n  const END_ID = `date-range-end-${generateShortUUID()}`;\n\n  const handleIconClick = () => {\n    setIsOpen(true);\n    setTimeout(() => {\n      if (pickerRef.current) {\n        pickerRef.current.focus();\n      }\n    }, 0);\n  };\n\n  useEventListener(\"keydown\", (e: KeyboardEvent) => {\n    if (\n      e.key === KEYBOARD_KEYS.ENTER &&\n      document.activeElement instanceof HTMLInputElement\n    ) {\n      if (document?.activeElement?.id === START_ID) {\n        const date = dayjs(document?.activeElement?.value);\n        if (date.isValid()) {\n          onChange([date, parseDate(endDate)]);\n        }\n      }\n      if (document?.activeElement?.id === END_ID) {\n        const date = dayjs(document?.activeElement?.value);\n        if (date.isValid()) {\n          onChange([parseDate(startDate), date]);\n        }\n      }\n    }\n  });\n\n  const disabledDate = useCallback(\n    (current: dayjs.Dayjs) => {\n      const [start, end] = [parseDate(startDate), parseDate(endDate)];\n\n      if (!maxDateRange) return false;\n\n      if (start) {\n        return (\n          current.isBefore(start.startOf(\"day\")) ||\n          current.isAfter(start.add(maxDateRange, \"day\").endOf(\"day\"))\n        );\n      }\n\n      if (end) {\n        return (\n          current.isBefore(end.subtract(maxDateRange, \"day\").startOf(\"day\")) ||\n          current.isAfter(end.endOf(\"day\"))\n        );\n      }\n\n      return false;\n    },\n    [startDate, endDate, maxDateRange]\n  );\n\n  const handleKeyDownCapture = useCallback((e: React.KeyboardEvent) => {\n    if (e.key === KEYBOARD_KEYS.ENTER) {\n      const pickerIsOpen = renderAsIconButton ? isOpen : (open ?? isNormalPickerOpen);\n      if (!pickerIsOpen) {\n        e.preventDefault();\n        e.stopPropagation();\n\n        const form = (e.target as HTMLElement).closest('form');\n        if (form) {\n          const submitBtn = form.querySelector<HTMLButtonElement>('button[type=\"submit\"]');\n          if (submitBtn) {\n            submitBtn.click();\n          } else {\n            form.requestSubmit();\n          }\n        }\n      }\n    }\n  }, [renderAsIconButton, isOpen, open, isNormalPickerOpen]);\n\n  const handleIconPickerOpenChange = useCallback((nextOpen: boolean) => {\n    if (nextOpen && suppressNextIconOpenRef.current) {\n      suppressNextIconOpenRef.current = false;\n      setIsOpen(false);\n      return;\n    }\n\n    setIsOpen(nextOpen);\n    if (!nextOpen) {\n      suppressNextIconOpenRef.current = true;\n      requestAnimationFrame(() => {\n        pickerRef.current?.focus();\n        requestAnimationFrame(() => {\n          suppressNextIconOpenRef.current = false;\n        });\n      });\n    }\n  }, []);\n\n  const handleNormalOpenChange = useCallback((nextOpen: boolean) => {\n    if (nextOpen && suppressNextNormalOpenRef.current) {\n      suppressNextNormalOpenRef.current = false;\n      setIsNormalPickerOpen(false);\n      onOpenChange?.(false);\n      return;\n    }\n\n    setIsNormalPickerOpen(nextOpen);\n    onOpenChange?.(nextOpen);\n    if (!nextOpen) {\n      suppressNextNormalOpenRef.current = true;\n      requestAnimationFrame(() => {\n        normalPickerRef.current?.focus();\n        requestAnimationFrame(() => {\n          suppressNextNormalOpenRef.current = false;\n        });\n      });\n    }\n  }, [onOpenChange]);\n\n  if (renderAsIconButton) {\n    return (\n      <div id={id} className={className} onKeyDownCapture={handleKeyDownCapture}>\n        <IconButton\n          onClick={handleIconClick}\n          disabled={disabled}\n          variant=\"default\"\n          className={iconButtonClassName}\n        >\n          <CalendarMonthIcon size={20} className={cn(\"w-5 h-5\", iconClassName)} />\n        </IconButton>\n        <RangePicker\n          ref={pickerRef}\n          onChange={(dates) => {\n            onChange(dates);\n            setIsOpen(false);\n          }}\n          onCalendarChange={onCalendarChange}\n          value={[parseDate(startDate), parseDate(endDate)]}\n          id={{ start: START_ID, end: END_ID }}\n          allowClear\n          format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n          separator={<CheckIndeterminateSmallFilledIcon size={20} className=\"text-neutral-400 dark:text-gray-100\" />}\n          suffixIcon={<CalendarMonthIcon size={14} className=\"text-neutral-400 dark:text-gray-100\" />}\n          getPopupContainer={\n            customGetPopupContainer\n              ? customGetPopupContainer\n              : shouldPopOnParent\n                ? (trigger) => trigger.parentElement as HTMLElement\n                : () => document.body\n          }\n          disabled={disabled}\n          disabledDate={maxDateRange ? disabledDate : undefined}\n          autoComplete=\"off\"\n          open={isOpen}\n          onOpenChange={handleIconPickerOpenChange}\n          placement={placement}\n          style={{ position: \"absolute\", opacity: 0, pointerEvents: \"none\", width: 0, height: 0 }}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div id={id} className={cn(\"flex flex-col\", className)} onKeyDownCapture={handleKeyDownCapture}>\n      {(label || labelExtra) && (\n        <div className=\"mb-1 flex items-center justify-between gap-1\">\n          <InputLabel label={label || \"\"} required={required || false} />\n          {labelExtra}\n        </div>\n      )}\n      {(emphasisBg || emphasisBorder) && (\n        <style>{`\n          #${id} .ant-picker {\n            background-color: ${emphasisBg} !important;\n            border-color: ${emphasisBorder} !important;\n          }\n          #${id} .ant-picker:hover {\n            border-color: ${emphasisBorder} !important;\n          }\n          #${id} .ant-picker.ant-picker-focused {\n            border-color: ${emphasisBorder} !important;\n            box-shadow: 0 0 0 2px ${emphasisDeletedSkin ? \"rgba(254,202,202,0.45)\" : emphasisModifiedSkin ? \"rgba(254,223,137,0.45)\" : \"rgba(187,247,208,0.45)\"} !important;\n          }\n          #${id} .ant-picker .ant-picker-input > input {\n            color: ${emphasisDeletedSkin ? \"#475467\" : emphasisSuccessSkin ? \"#101828\" : \"inherit\"};\n          }\n        `}</style>\n      )}\n      <RangePicker\n        ref={normalPickerRef}\n        onChange={onChange}\n        onCalendarChange={onCalendarChange}\n        value={[parseDate(startDate), parseDate(endDate)]}\n        id={{ start: START_ID, end: END_ID }}\n        allowClear\n        format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n        separator={\n          <CheckIndeterminateSmallFilledIcon size={20} className='text-neutral-400 dark:text-gray-100' />\n        }\n        suffixIcon={\n          <CalendarMonthIcon size={14} className='text-neutral-400 dark:text-gray-100' />\n        }\n        getPopupContainer={\n          customGetPopupContainer\n            ? customGetPopupContainer\n            : shouldPopOnParent\n              ? (trigger) => trigger.parentElement as HTMLElement\n              : () => document.body\n        }\n        disabled={disabled}\n        disabledDate={maxDateRange ? disabledDate : undefined}\n        open={open ?? isNormalPickerOpen}\n        onOpenChange={handleNormalOpenChange}\n        autoComplete=\"off\"\n        placement={placement}\n      />\n      {errorMessage && (\n        <p\n          className={cn(\n            \"text-sm font-inter font-normal text-left pt-[6px]\",\n            \"text-red-500\"\n          )}\n        >\n          {errorMessage}\n        </p>\n      )}\n    </div>\n  );\n};\n\nDateRange.displayName = \"DateRange\";\n\n"],"names":["RangePicker","DatePicker","KEYBOARD_KEYS","generateShortUUID","useEventListener","eventName","handler","savedHandler","useRef","useEffect","eventListener","event","DateRange","onCalendarChange","onChange","required","label","startDate","endDate","errorMessage","className","id","disabled","dateFormat","shouldPopOnParent","customGetPopupContainer","maxDateRange","open","onOpenChange","placement","renderAsIconButton","iconButtonClassName","iconClassName","labelExtra","inputEmphasis","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","emphasisBg","emphasisBorder","isOpen","setIsOpen","useState","isNormalPickerOpen","setIsNormalPickerOpen","pickerRef","normalPickerRef","suppressNextIconOpenRef","suppressNextNormalOpenRef","parseDate","str","dayjs","START_ID","END_ID","handleIconClick","date","disabledDate","useCallback","current","start","end","handleKeyDownCapture","form","submitBtn","handleIconPickerOpenChange","nextOpen","handleNormalOpenChange","jsxs","jsx","IconButton","CalendarMonthIcon","cn","dates","CheckIndeterminateSmallFilledIcon","trigger","InputLabel"],"mappings":"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"}
+{"version":3,"file":"DateRange.es.js","sources":["../../../../src/components/forms/date-range/DateRange.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { DatePicker } from \"antd\";\nimport cn from \"classnames\";\nimport React from \"react\";\nimport dayjs from \"dayjs\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport IconButton from \"../../button/IconButton\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { CalendarMonthIcon, CheckIndeterminateSmallFilledIcon } from '../../icon';\n\nconst { RangePicker } = DatePicker;\n\n// Keyboard keys constant\nconst KEYBOARD_KEYS = {\n  ENTER: \"Enter\",\n} as const;\n\n/**\n * Generate a short UUID\n */\nconst generateShortUUID = (): string => {\n  return Math.random().toString(36).substring(2, 9);\n};\n\n/**\n * Hook to add event listeners\n */\nconst useEventListener = <K extends keyof DocumentEventMap>(\n  eventName: K,\n  handler: (event: DocumentEventMap[K]) => void\n) => {\n  const savedHandler = useRef(handler);\n\n  useEffect(() => {\n    savedHandler.current = handler;\n  }, [handler]);\n\n  useEffect(() => {\n    const eventListener = (event: DocumentEventMap[K]) =>\n      savedHandler.current(event);\n    document.addEventListener(eventName, eventListener);\n    return () => {\n      document.removeEventListener(eventName, eventListener);\n    };\n  }, [eventName]);\n};\n\n/**\n * Props for the DateRange component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TDateRangeProps = {\n  /** Unique identifier for the date range */\n  id: string;\n  /** Label text to display above the date range */\n  label?: string;\n  /** Start date value (ISO string or formatted date string) */\n  startDate: string;\n  /** End date value (ISO string or formatted date string) */\n  endDate: string;\n  /** Callback function called when date range changes */\n  onChange(data: any): void;\n  /** Callback function called when calendar selection changes */\n  onCalendarChange?(data: any): void;\n  /** Whether the field is required */\n  required?: boolean;\n  /** Error message to display below the date range */\n  errorMessage?: string;\n  /** Additional CSS classes for the wrapper */\n  className?: string;\n  /** Whether the date range is disabled */\n  disabled?: boolean;\n  /** Custom date format */\n  dateFormat?: string;\n  /** Whether popup should render inside parent element */\n  shouldPopOnParent?: boolean;\n  /** Custom function to get popup container */\n  getPopupContainer?: (trigger: HTMLElement | null) => HTMLElement;\n  /** Maximum date range in days */\n  maxDateRange?: number;\n  /** Whether the picker is open */\n  open?: boolean;\n  /** Callback function called when open state changes */\n  onOpenChange?(open: boolean): void;\n  /** Placement of the dropdown */\n  placement?: \"bottomLeft\" | \"bottomRight\" | \"topLeft\" | \"topRight\";\n  /** Preset date ranges shown in the picker dropdown */\n  presets?: { label: React.ReactNode; value: any }[];\n  /** Whether to render as an icon button that triggers the date picker */\n  renderAsIconButton?: boolean;\n  /** Additional CSS classes for the icon button */\n  iconButtonClassName?: string;\n  /** Additional CSS classes for the calendar icon inside the button */\n  iconClassName?: string;\n  /** Optional extra content in the label row (e.g. actions, badges) */\n  labelExtra?: React.ReactNode;\n  /** Input surface style: `'modified'` — Warning colors; `'deleted'` — Error colors; `'success'` — Success colors. */\n  inputEmphasis?: \"default\" | \"modified\" | \"deleted\" | \"success\";\n};\n\n/**\n * A date range picker component with label, validation, and styling support.\n * Features proper date handling, validation, and comprehensive prop support.\n * Built on top of Ant Design's RangePicker for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * DateRange component.\n *\n * @example\n * ```tsx\n * <DateRange\n *   id=\"event-dates\"\n *   label=\"Event Duration\"\n *   startDate={startDate}\n *   endDate={endDate}\n *   onChange={(dates) => {\n *     setStartDate(dates[0]);\n *     setEndDate(dates[1]);\n *   }}\n *   required\n * />\n * ```\n */\nexport const DateRange = ({\n  onCalendarChange = undefined,\n  onChange,\n  required,\n  label,\n  startDate,\n  endDate,\n  errorMessage,\n  className,\n  id,\n  disabled = false,\n  dateFormat,\n  shouldPopOnParent = true,\n  getPopupContainer: customGetPopupContainer,\n  maxDateRange,\n  open,\n  onOpenChange,\n  placement = \"bottomLeft\",\n  renderAsIconButton = false,\n  iconButtonClassName,\n  iconClassName,\n  labelExtra,\n  inputEmphasis = \"default\",\n  presets,\n}: TDateRangeProps) => {\n  const emphasisModifiedSkin = inputEmphasis === \"modified\" && !errorMessage;\n  const emphasisDeletedSkin = inputEmphasis === \"deleted\" && !errorMessage;\n  const emphasisSuccessSkin = inputEmphasis === \"success\" && !errorMessage;\n  const emphasisBg =\n    emphasisModifiedSkin ? \"var(--Warning-50, #FFFAEB)\" :\n    emphasisDeletedSkin ? \"var(--Error-50, #FEF2F2)\" :\n    emphasisSuccessSkin ? \"var(--Success-50, #F0FDF4)\" : \"\";\n  const emphasisBorder =\n    emphasisModifiedSkin ? \"var(--Warning-200, #FEDF89)\" :\n    emphasisDeletedSkin ? \"var(--Error-200, #FECACA)\" :\n    emphasisSuccessSkin ? \"var(--Success-200, #BBF7D0)\" : \"\";\n  const [isOpen, setIsOpen] = useState(false);\n  const [isNormalPickerOpen, setIsNormalPickerOpen] = useState(false);\n  const pickerRef = useRef<any>(null);\n  const normalPickerRef = useRef<any>(null);\n  const suppressNextIconOpenRef = useRef(false);\n  const suppressNextNormalOpenRef = useRef(false);\n\n  const parseDate = (str: string | number | Date | dayjs.Dayjs) => {\n    if (!str) return null;\n    return dayjs(str);\n  };\n\n  const START_ID = `date-range-start-${generateShortUUID()}`;\n  const END_ID = `date-range-end-${generateShortUUID()}`;\n\n  const handleIconClick = () => {\n    setIsOpen(true);\n    setTimeout(() => {\n      if (pickerRef.current) {\n        pickerRef.current.focus();\n      }\n    }, 0);\n  };\n\n  useEventListener(\"keydown\", (e: KeyboardEvent) => {\n    if (\n      e.key === KEYBOARD_KEYS.ENTER &&\n      document.activeElement instanceof HTMLInputElement\n    ) {\n      if (document?.activeElement?.id === START_ID) {\n        const date = dayjs(document?.activeElement?.value);\n        if (date.isValid()) {\n          onChange([date, parseDate(endDate)]);\n        }\n      }\n      if (document?.activeElement?.id === END_ID) {\n        const date = dayjs(document?.activeElement?.value);\n        if (date.isValid()) {\n          onChange([parseDate(startDate), date]);\n        }\n      }\n    }\n  });\n\n  const disabledDate = useCallback(\n    (current: dayjs.Dayjs) => {\n      const [start, end] = [parseDate(startDate), parseDate(endDate)];\n\n      if (!maxDateRange) return false;\n\n      if (start) {\n        return (\n          current.isBefore(start.startOf(\"day\")) ||\n          current.isAfter(start.add(maxDateRange, \"day\").endOf(\"day\"))\n        );\n      }\n\n      if (end) {\n        return (\n          current.isBefore(end.subtract(maxDateRange, \"day\").startOf(\"day\")) ||\n          current.isAfter(end.endOf(\"day\"))\n        );\n      }\n\n      return false;\n    },\n    [startDate, endDate, maxDateRange]\n  );\n\n  const handleKeyDownCapture = useCallback((e: React.KeyboardEvent) => {\n    if (e.key === KEYBOARD_KEYS.ENTER) {\n      const pickerIsOpen = renderAsIconButton ? isOpen : (open ?? isNormalPickerOpen);\n      if (!pickerIsOpen) {\n        e.preventDefault();\n        e.stopPropagation();\n\n        const form = (e.target as HTMLElement).closest('form');\n        if (form) {\n          const submitBtn = form.querySelector<HTMLButtonElement>('button[type=\"submit\"]');\n          if (submitBtn) {\n            submitBtn.click();\n          } else {\n            form.requestSubmit();\n          }\n        }\n      }\n    }\n  }, [renderAsIconButton, isOpen, open, isNormalPickerOpen]);\n\n  const handleIconPickerOpenChange = useCallback((nextOpen: boolean) => {\n    if (nextOpen && suppressNextIconOpenRef.current) {\n      suppressNextIconOpenRef.current = false;\n      setIsOpen(false);\n      return;\n    }\n\n    setIsOpen(nextOpen);\n    if (!nextOpen) {\n      suppressNextIconOpenRef.current = true;\n      requestAnimationFrame(() => {\n        pickerRef.current?.focus();\n        requestAnimationFrame(() => {\n          suppressNextIconOpenRef.current = false;\n        });\n      });\n    }\n  }, []);\n\n  const handleNormalOpenChange = useCallback((nextOpen: boolean) => {\n    if (nextOpen && suppressNextNormalOpenRef.current) {\n      suppressNextNormalOpenRef.current = false;\n      setIsNormalPickerOpen(false);\n      onOpenChange?.(false);\n      return;\n    }\n\n    setIsNormalPickerOpen(nextOpen);\n    onOpenChange?.(nextOpen);\n    if (!nextOpen) {\n      suppressNextNormalOpenRef.current = true;\n      requestAnimationFrame(() => {\n        normalPickerRef.current?.focus();\n        requestAnimationFrame(() => {\n          suppressNextNormalOpenRef.current = false;\n        });\n      });\n    }\n  }, [onOpenChange]);\n\n  if (renderAsIconButton) {\n    return (\n      <div id={id} className={className} onKeyDownCapture={handleKeyDownCapture}>\n        <IconButton\n          onClick={handleIconClick}\n          disabled={disabled}\n          variant=\"default\"\n          className={iconButtonClassName}\n        >\n          <CalendarMonthIcon size={20} className={cn(\"w-5 h-5\", iconClassName)} />\n        </IconButton>\n        <RangePicker\n          ref={pickerRef}\n          onChange={(dates) => {\n            onChange(dates);\n            setIsOpen(false);\n          }}\n          onCalendarChange={onCalendarChange}\n          value={[parseDate(startDate), parseDate(endDate)]}\n          id={{ start: START_ID, end: END_ID }}\n          allowClear\n          format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n          separator={<CheckIndeterminateSmallFilledIcon size={20} className=\"text-neutral-400 dark:text-gray-100\" />}\n          suffixIcon={<CalendarMonthIcon size={14} className=\"text-neutral-400 dark:text-gray-100\" />}\n          getPopupContainer={\n            customGetPopupContainer\n              ? customGetPopupContainer\n              : shouldPopOnParent\n                ? (trigger) => trigger.parentElement as HTMLElement\n                : () => document.body\n          }\n          disabled={disabled}\n          disabledDate={maxDateRange ? disabledDate : undefined}\n          autoComplete=\"off\"\n          open={isOpen}\n          onOpenChange={handleIconPickerOpenChange}\n          placement={placement}\n          presets={presets}\n          style={{ position: \"absolute\", opacity: 0, pointerEvents: \"none\", width: 0, height: 0 }}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div id={id} className={cn(\"flex flex-col\", className)} onKeyDownCapture={handleKeyDownCapture}>\n      {(label || labelExtra) && (\n        <div className=\"mb-1 flex items-center justify-between gap-1\">\n          <InputLabel label={label || \"\"} required={required || false} />\n          {labelExtra}\n        </div>\n      )}\n      {(emphasisBg || emphasisBorder) && (\n        <style>{`\n          #${id} .ant-picker {\n            background-color: ${emphasisBg} !important;\n            border-color: ${emphasisBorder} !important;\n          }\n          #${id} .ant-picker:hover {\n            border-color: ${emphasisBorder} !important;\n          }\n          #${id} .ant-picker.ant-picker-focused {\n            border-color: ${emphasisBorder} !important;\n            box-shadow: 0 0 0 2px ${emphasisDeletedSkin ? \"rgba(254,202,202,0.45)\" : emphasisModifiedSkin ? \"rgba(254,223,137,0.45)\" : \"rgba(187,247,208,0.45)\"} !important;\n          }\n          #${id} .ant-picker .ant-picker-input > input {\n            color: ${emphasisDeletedSkin ? \"#475467\" : emphasisSuccessSkin ? \"#101828\" : \"inherit\"};\n          }\n        `}</style>\n      )}\n      <RangePicker\n        ref={normalPickerRef}\n        onChange={onChange}\n        onCalendarChange={onCalendarChange}\n        value={[parseDate(startDate), parseDate(endDate)]}\n        id={{ start: START_ID, end: END_ID }}\n        allowClear\n        format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n        separator={\n          <CheckIndeterminateSmallFilledIcon size={20} className='text-neutral-400 dark:text-gray-100' />\n        }\n        suffixIcon={\n          <CalendarMonthIcon size={14} className='text-neutral-400 dark:text-gray-100' />\n        }\n        getPopupContainer={\n          customGetPopupContainer\n            ? customGetPopupContainer\n            : shouldPopOnParent\n              ? (trigger) => trigger.parentElement as HTMLElement\n              : () => document.body\n        }\n        disabled={disabled}\n        disabledDate={maxDateRange ? disabledDate : undefined}\n        open={open ?? isNormalPickerOpen}\n        onOpenChange={handleNormalOpenChange}\n        autoComplete=\"off\"\n        placement={placement}\n        presets={presets}\n      />\n      {errorMessage && (\n        <p\n          className={cn(\n            \"text-sm font-inter font-normal text-left pt-[6px]\",\n            \"text-red-500\"\n          )}\n        >\n          {errorMessage}\n        </p>\n      )}\n    </div>\n  );\n};\n\nDateRange.displayName = \"DateRange\";\n\n"],"names":["RangePicker","DatePicker","KEYBOARD_KEYS","generateShortUUID","useEventListener","eventName","handler","savedHandler","useRef","useEffect","eventListener","event","DateRange","onCalendarChange","onChange","required","label","startDate","endDate","errorMessage","className","id","disabled","dateFormat","shouldPopOnParent","customGetPopupContainer","maxDateRange","open","onOpenChange","placement","renderAsIconButton","iconButtonClassName","iconClassName","labelExtra","inputEmphasis","presets","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","emphasisBg","emphasisBorder","isOpen","setIsOpen","useState","isNormalPickerOpen","setIsNormalPickerOpen","pickerRef","normalPickerRef","suppressNextIconOpenRef","suppressNextNormalOpenRef","parseDate","str","dayjs","START_ID","END_ID","handleIconClick","date","disabledDate","useCallback","current","start","end","handleKeyDownCapture","form","submitBtn","handleIconPickerOpenChange","nextOpen","handleNormalOpenChange","jsxs","jsx","IconButton","CalendarMonthIcon","cn","dates","CheckIndeterminateSmallFilledIcon","trigger","InputLabel"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lax-wp/design-system",
   "private": false,
-  "version": "0.14.3",
+  "version": "0.14.5",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",