@sth87/shadcn-design-system 0.1.6 → 0.1.7

package/dist/esm/components/ImageViewer/ImageViewer.js

@@ -200,7 +200,7 @@ const S = ({
       "div",
       {
         className: L(
-          "ds:ds-image-viewer-root ds:relative ds:inline-block",
+          "ds:image-viewer-root ds:relative ds:inline-block",
           h
         ),
         children: /* @__PURE__ */ v("div", { className: "ds:relative ds:inline-block", children: [
@@ -220,7 +220,7 @@ const S = ({
               width: n,
               height: i,
               className: L(
-                "ds:ds-image-viewer-img ds:max-w-full ds:h-auto ds:align-middle",
+                "ds:image-viewer-img ds:max-w-full ds:h-auto ds:align-middle",
                 g && "ds:opacity-0",
                 f
               ),
@@ -234,7 +234,7 @@ const S = ({
             {
               onClick: u,
               className: L(
-                "ds:ds-image-viewer-mask ds:absolute ds:inset-0 ds:flex ds:items-center ds:justify-center ds:opacity-0 ds:hover:opacity-100 ds:transition-opacity ds:cursor-pointer",
+                "ds:image-viewer-mask ds:absolute ds:inset-0 ds:flex ds:items-center ds:justify-center ds:opacity-0 ds:hover:opacity-100 ds:transition-opacity ds:cursor-pointer",
                 "ds:bg-black/50 ds:backdrop-blur-sm"
               ),
               children: /* @__PURE__ */ v("div", { className: "ds:text-white ds:text-sm ds:flex ds:items-center ds:gap-2", children: [

package/dist/esm/components/ImageViewer/ImageViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageViewer.js","sources":["../../../../src/components/ImageViewer/ImageViewer.tsx"],"sourcesContent":["import React, { useState, useCallback, useEffect } from \"react\";\nimport { ZoomIn } from \"lucide-react\";\nimport { cn } from \"@dsui/ui/index\";\n\n// Dynamic import for react-viewer to avoid SSR issues\nlet Viewer: any = null;\nif (typeof window !== \"undefined\") {\n  import(\"react-viewer\").then((module) => {\n    Viewer = module.default;\n  });\n}\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ImageInfo {\n  src: string;\n  alt?: string;\n  downloadUrl?: string;\n}\n\nexport interface ImageViewerProps {\n  images: ImageInfo[];\n  visible?: boolean;\n  onClose?: () => void;\n  activeIndex?: number;\n  onIndexChange?: (_index: number) => void;\n  zoomSpeed?: number;\n  disableKeyboardSupport?: boolean;\n  noNavbar?: boolean;\n  noToolbar?: boolean;\n  rotatable?: boolean;\n  scalable?: boolean;\n  changeable?: boolean;\n  noClose?: boolean;\n  minScale?: number;\n  maxScale?: number;\n  defaultScale?: number;\n  className?: string;\n  downloadable?: boolean;\n  noImgDetails?: boolean;\n  noResetZoomAfterChange?: boolean;\n  drag?: boolean;\n}\n\nexport interface ImageViewerImageProps\n  extends React.ImgHTMLAttributes<HTMLImageElement> {\n  src: string;\n  alt?: string;\n  width?: string | number;\n  height?: string | number;\n  preview?: boolean;\n  previewSrc?: string;\n  fallback?: string;\n  placeholder?: React.ReactNode | boolean;\n  className?: string;\n  wrapperClassName?: string;\n  onPreviewClick?: () => void;\n}\n\n// ============================================================================\n// ImageViewer Component\n// ============================================================================\n\nexport const ImageViewer: React.FC<ImageViewerProps> = ({\n  images,\n  visible = false,\n  onClose,\n  activeIndex = 0,\n  onIndexChange,\n  zoomSpeed = 0.1,\n  disableKeyboardSupport = false,\n  noNavbar = false,\n  noToolbar = false,\n  rotatable = true,\n  scalable = true,\n  changeable = true,\n  noClose = false,\n  minScale = 0.1,\n  maxScale = 50,\n  defaultScale = 1,\n  className,\n  downloadable = false,\n  noImgDetails = false,\n  noResetZoomAfterChange = false,\n  drag = false,\n}) => {\n  const [currentIndex, setCurrentIndex] = useState(activeIndex);\n  const [ViewerComponent, setViewerComponent] = useState<any>(null);\n\n  // Load Viewer dynamically on client-side only\n  useEffect(() => {\n    if (typeof window !== \"undefined\" && !ViewerComponent) {\n      import(\"react-viewer\").then((module) => {\n        setViewerComponent(() => module.default);\n      });\n    }\n  }, [ViewerComponent]);\n\n  useEffect(() => {\n    setCurrentIndex(activeIndex);\n  }, [activeIndex]);\n\n  const handleClose = useCallback(() => {\n    onClose?.();\n  }, [onClose]);\n\n  const handleIndexChange = useCallback(\n    (_activeImage: any, index: number) => {\n      setCurrentIndex(index);\n      onIndexChange?.(index);\n    },\n    [onIndexChange]\n  );\n\n  // Handle download to save file locally\n  const handleDownload = useCallback(() => {\n    const currentImage = images[currentIndex];\n    const downloadUrl = currentImage.downloadUrl || currentImage.src;\n\n    // Create a temporary anchor element to trigger download\n    const link = document.createElement(\"a\");\n    link.href = downloadUrl;\n    link.download = currentImage.alt || `image-${currentIndex + 1}`;\n\n    // For cross-origin images, try to download via fetch\n    fetch(downloadUrl)\n      .then((response) => response.blob())\n      .then((blob) => {\n        const url = window.URL.createObjectURL(blob);\n        link.href = url;\n        document.body.appendChild(link);\n        link.click();\n        document.body.removeChild(link);\n        window.URL.revokeObjectURL(url);\n      })\n      .catch(() => {\n        // Fallback: do nothing if fetch fails\n      });\n  }, [images, currentIndex]);\n\n  // Transform images to include downloadUrl\n  const viewerImages = images.map((img) => ({\n    src: img.src,\n    alt: img.alt || \"\",\n    downloadUrl: img.downloadUrl || img.src,\n  }));\n\n  // Don't render until Viewer is loaded\n  if (!ViewerComponent) {\n    return null;\n  }\n\n  return (\n    <ViewerComponent\n      visible={visible}\n      onClose={handleClose}\n      onMaskClick={handleClose}\n      images={viewerImages}\n      activeIndex={currentIndex}\n      onChange={handleIndexChange}\n      zoomSpeed={zoomSpeed}\n      disableKeyboardSupport={disableKeyboardSupport}\n      noNavbar={noNavbar}\n      noToolbar={noToolbar}\n      rotatable={rotatable}\n      scalable={scalable}\n      changeable={changeable}\n      noClose={noClose}\n      minScale={minScale}\n      maxScale={maxScale}\n      defaultScale={defaultScale}\n      className={cn(\"ds:image-viewer-antd-style\", className)}\n      downloadable={downloadable}\n      noImgDetails={noImgDetails}\n      noResetZoomAfterChange={noResetZoomAfterChange}\n      showTotal={true}\n      drag={drag}\n      customToolbar={(toolbars: any) => {\n        // Replace download button with a custom-rendered button to prevent viewer state change\n        return toolbars.map((toolbar: any) => {\n          if (toolbar.key === \"download\") {\n            return {\n              ...toolbar,\n              actionType: undefined, // Remove default action\n              onClick: undefined,\n              render: (\n                <button\n                  type=\"button\"\n                  className=\"ds:react-viewer-icon ds:react-viewer-download\"\n                  title=\"Download\"\n                  style={{\n                    background: \"none\",\n                    border: \"none\",\n                    cursor: \"pointer\",\n                    padding: 0,\n                  }}\n                  onClick={(e) => {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    handleDownload();\n                  }}\n                >\n                  {/* SVG icon for download (Ant Design style) */}\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                    <path\n                      d=\"M10 3v10m0 0l-4-4m4 4l4-4\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.5\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                    <rect\n                      x=\"4\"\n                      y=\"17\"\n                      width=\"12\"\n                      height=\"2\"\n                      rx=\"1\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </button>\n              ),\n            };\n          }\n          return toolbar;\n        });\n      }}\n    />\n  );\n};\n\nImageViewer.displayName = \"ImageViewer\";\n\n// ============================================================================\n// ImageViewerImage Component (Wrapper for single image with preview)\n// ============================================================================\n\nexport const ImageViewerImage: React.FC<ImageViewerImageProps> = ({\n  src,\n  alt = \"\",\n  width,\n  height,\n  preview = true,\n  previewSrc,\n  fallback,\n  placeholder,\n  className,\n  wrapperClassName,\n  onPreviewClick,\n  onError,\n  ...props\n}) => {\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(false);\n  const [viewerVisible, setViewerVisible] = useState(false);\n\n  const handleLoad = () => {\n    setLoading(false);\n    setError(false);\n  };\n\n  const handleError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setLoading(false);\n    setError(true);\n    onError?.(e);\n  };\n\n  const handlePreview = () => {\n    if (!preview) return;\n    setViewerVisible(true);\n    onPreviewClick?.();\n  };\n\n  const handleCloseViewer = () => {\n    setViewerVisible(false);\n  };\n\n  const showPlaceholder = loading && placeholder;\n  const showFallback = error && fallback;\n  const showPreviewMask = preview && !loading && !error;\n\n  return (\n    <>\n      <div\n        className={cn(\n          \"ds:ds-image-viewer-root ds:relative ds:inline-block\",\n          wrapperClassName\n        )}\n      >\n        <div className=\"ds:relative ds:inline-block\">\n          {showPlaceholder && (\n            <div\n              className=\"ds:absolute ds:inset-0 ds:flex ds:items-center ds:justify-center ds:bg-muted ds:animate-pulse\"\n              style={{ width, height }}\n            >\n              {placeholder === true ? (\n                <div className=\"ds:w-8 ds:h-8 ds:border-2 ds:border-primary ds:border-t-transparent ds:rounded-full ds:animate-spin\" />\n              ) : (\n                placeholder\n              )}\n            </div>\n          )}\n\n          <img\n            src={showFallback ? fallback : src}\n            alt={alt}\n            width={width}\n            height={height}\n            className={cn(\n              \"ds:ds-image-viewer-img ds:max-w-full ds:h-auto ds:align-middle\",\n              loading && \"ds:opacity-0\",\n              className\n            )}\n            onLoad={handleLoad}\n            onError={handleError}\n            {...props}\n          />\n\n          {showPreviewMask && (\n            <div\n              onClick={handlePreview}\n              className={cn(\n                \"ds:ds-image-viewer-mask ds:absolute ds:inset-0 ds:flex ds:items-center ds:justify-center ds:opacity-0 ds:hover:opacity-100 ds:transition-opacity ds:cursor-pointer\",\n                \"ds:bg-black/50 ds:backdrop-blur-sm\"\n              )}\n            >\n              <div className=\"ds:text-white ds:text-sm ds:flex ds:items-center ds:gap-2\">\n                <ZoomIn className=\"ds:w-5 ds:h-5\" />\n                <span>Preview</span>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Viewer Modal */}\n      <ImageViewer\n        images={[{ src: previewSrc || src, alt }]}\n        visible={viewerVisible}\n        onClose={handleCloseViewer}\n        rotatable\n        scalable\n        downloadable\n      />\n    </>\n  );\n};\n\nImageViewerImage.displayName = \"ImageViewer.Image\";\n\n// ============================================================================\n// ImageViewerGroup Component\n// ============================================================================\n\ninterface ImageViewerGroupProps {\n  children: React.ReactNode;\n  images: ImageInfo[];\n  preview?: boolean;\n}\n\nexport const ImageViewerGroup: React.FC<ImageViewerGroupProps> = ({\n  children,\n  images,\n  preview = true,\n}) => {\n  const [viewerVisible, setViewerVisible] = useState(false);\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  const handlePreview = useCallback((index: number) => {\n    setCurrentIndex(index);\n    setViewerVisible(true);\n  }, []);\n\n  const handleClose = useCallback(() => {\n    setViewerVisible(false);\n  }, []);\n\n  const contextValue = React.useMemo(\n    () => ({\n      handlePreview,\n      preview,\n    }),\n    [handlePreview, preview]\n  );\n\n  return (\n    <>\n      <ImageViewerGroupContext.Provider value={contextValue}>\n        {children}\n      </ImageViewerGroupContext.Provider>\n\n      <ImageViewer\n        images={images}\n        visible={viewerVisible}\n        onClose={handleClose}\n        activeIndex={currentIndex}\n        onIndexChange={setCurrentIndex}\n        rotatable\n        scalable\n        downloadable\n      />\n    </>\n  );\n};\n\nImageViewerGroup.displayName = \"ImageViewer.Group\";\n\n// Context for Group\nconst ImageViewerGroupContext = React.createContext<{\n  handlePreview?: (_index: number) => void;\n  preview?: boolean;\n} | null>(null);\n\n// Export with namespace\nconst ImageViewerNamespace = Object.assign(ImageViewer, {\n  Image: ImageViewerImage,\n  Group: ImageViewerGroup,\n});\n\nexport default ImageViewerNamespace;\n"],"names":["n","module","ImageViewer","images","visible","onClose","activeIndex","onIndexChange","zoomSpeed","disableKeyboardSupport","noNavbar","noToolbar","rotatable","scalable","changeable","noClose","minScale","maxScale","defaultScale","className","downloadable","noImgDetails","noResetZoomAfterChange","drag","currentIndex","setCurrentIndex","useState","ViewerComponent","setViewerComponent","useEffect","handleClose","useCallback","handleIndexChange","_activeImage","index","handleDownload","currentImage","downloadUrl","link","response","blob","url","viewerImages","img","jsx","cn","toolbars","toolbar","e","jsxs","ImageViewerImage","src","alt","width","height","preview","previewSrc","fallback","placeholder","wrapperClassName","onPreviewClick","onError","props","loading","setLoading","error","setError","viewerVisible","setViewerVisible","handleLoad","handleError","handlePreview","handleCloseViewer","showPlaceholder","showFallback","showPreviewMask","Fragment","ZoomIn","ImageViewerGroup","children","contextValue","React","ImageViewerGroupContext"],"mappings":"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"}
+{"version":3,"file":"ImageViewer.js","sources":["../../../../src/components/ImageViewer/ImageViewer.tsx"],"sourcesContent":["import React, { useState, useCallback, useEffect } from \"react\";\nimport { ZoomIn } from \"lucide-react\";\nimport { cn } from \"@dsui/ui/index\";\n\n// Dynamic import for react-viewer to avoid SSR issues\nlet Viewer: any = null;\nif (typeof window !== \"undefined\") {\n  import(\"react-viewer\").then((module) => {\n    Viewer = module.default;\n  });\n}\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ImageInfo {\n  src: string;\n  alt?: string;\n  downloadUrl?: string;\n}\n\nexport interface ImageViewerProps {\n  images: ImageInfo[];\n  visible?: boolean;\n  onClose?: () => void;\n  activeIndex?: number;\n  onIndexChange?: (_index: number) => void;\n  zoomSpeed?: number;\n  disableKeyboardSupport?: boolean;\n  noNavbar?: boolean;\n  noToolbar?: boolean;\n  rotatable?: boolean;\n  scalable?: boolean;\n  changeable?: boolean;\n  noClose?: boolean;\n  minScale?: number;\n  maxScale?: number;\n  defaultScale?: number;\n  className?: string;\n  downloadable?: boolean;\n  noImgDetails?: boolean;\n  noResetZoomAfterChange?: boolean;\n  drag?: boolean;\n}\n\nexport interface ImageViewerImageProps\n  extends React.ImgHTMLAttributes<HTMLImageElement> {\n  src: string;\n  alt?: string;\n  width?: string | number;\n  height?: string | number;\n  preview?: boolean;\n  previewSrc?: string;\n  fallback?: string;\n  placeholder?: React.ReactNode | boolean;\n  className?: string;\n  wrapperClassName?: string;\n  onPreviewClick?: () => void;\n}\n\n// ============================================================================\n// ImageViewer Component\n// ============================================================================\n\nexport const ImageViewer: React.FC<ImageViewerProps> = ({\n  images,\n  visible = false,\n  onClose,\n  activeIndex = 0,\n  onIndexChange,\n  zoomSpeed = 0.1,\n  disableKeyboardSupport = false,\n  noNavbar = false,\n  noToolbar = false,\n  rotatable = true,\n  scalable = true,\n  changeable = true,\n  noClose = false,\n  minScale = 0.1,\n  maxScale = 50,\n  defaultScale = 1,\n  className,\n  downloadable = false,\n  noImgDetails = false,\n  noResetZoomAfterChange = false,\n  drag = false,\n}) => {\n  const [currentIndex, setCurrentIndex] = useState(activeIndex);\n  const [ViewerComponent, setViewerComponent] = useState<any>(null);\n\n  // Load Viewer dynamically on client-side only\n  useEffect(() => {\n    if (typeof window !== \"undefined\" && !ViewerComponent) {\n      import(\"react-viewer\").then((module) => {\n        setViewerComponent(() => module.default);\n      });\n    }\n  }, [ViewerComponent]);\n\n  useEffect(() => {\n    setCurrentIndex(activeIndex);\n  }, [activeIndex]);\n\n  const handleClose = useCallback(() => {\n    onClose?.();\n  }, [onClose]);\n\n  const handleIndexChange = useCallback(\n    (_activeImage: any, index: number) => {\n      setCurrentIndex(index);\n      onIndexChange?.(index);\n    },\n    [onIndexChange]\n  );\n\n  // Handle download to save file locally\n  const handleDownload = useCallback(() => {\n    const currentImage = images[currentIndex];\n    const downloadUrl = currentImage.downloadUrl || currentImage.src;\n\n    // Create a temporary anchor element to trigger download\n    const link = document.createElement(\"a\");\n    link.href = downloadUrl;\n    link.download = currentImage.alt || `image-${currentIndex + 1}`;\n\n    // For cross-origin images, try to download via fetch\n    fetch(downloadUrl)\n      .then((response) => response.blob())\n      .then((blob) => {\n        const url = window.URL.createObjectURL(blob);\n        link.href = url;\n        document.body.appendChild(link);\n        link.click();\n        document.body.removeChild(link);\n        window.URL.revokeObjectURL(url);\n      })\n      .catch(() => {\n        // Fallback: do nothing if fetch fails\n      });\n  }, [images, currentIndex]);\n\n  // Transform images to include downloadUrl\n  const viewerImages = images.map((img) => ({\n    src: img.src,\n    alt: img.alt || \"\",\n    downloadUrl: img.downloadUrl || img.src,\n  }));\n\n  // Don't render until Viewer is loaded\n  if (!ViewerComponent) {\n    return null;\n  }\n\n  return (\n    <ViewerComponent\n      visible={visible}\n      onClose={handleClose}\n      onMaskClick={handleClose}\n      images={viewerImages}\n      activeIndex={currentIndex}\n      onChange={handleIndexChange}\n      zoomSpeed={zoomSpeed}\n      disableKeyboardSupport={disableKeyboardSupport}\n      noNavbar={noNavbar}\n      noToolbar={noToolbar}\n      rotatable={rotatable}\n      scalable={scalable}\n      changeable={changeable}\n      noClose={noClose}\n      minScale={minScale}\n      maxScale={maxScale}\n      defaultScale={defaultScale}\n      className={cn(\"ds:image-viewer-antd-style\", className)}\n      downloadable={downloadable}\n      noImgDetails={noImgDetails}\n      noResetZoomAfterChange={noResetZoomAfterChange}\n      showTotal={true}\n      drag={drag}\n      customToolbar={(toolbars: any) => {\n        // Replace download button with a custom-rendered button to prevent viewer state change\n        return toolbars.map((toolbar: any) => {\n          if (toolbar.key === \"download\") {\n            return {\n              ...toolbar,\n              actionType: undefined, // Remove default action\n              onClick: undefined,\n              render: (\n                <button\n                  type=\"button\"\n                  className=\"ds:react-viewer-icon ds:react-viewer-download\"\n                  title=\"Download\"\n                  style={{\n                    background: \"none\",\n                    border: \"none\",\n                    cursor: \"pointer\",\n                    padding: 0,\n                  }}\n                  onClick={(e) => {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    handleDownload();\n                  }}\n                >\n                  {/* SVG icon for download (Ant Design style) */}\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                    <path\n                      d=\"M10 3v10m0 0l-4-4m4 4l4-4\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.5\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                    <rect\n                      x=\"4\"\n                      y=\"17\"\n                      width=\"12\"\n                      height=\"2\"\n                      rx=\"1\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </button>\n              ),\n            };\n          }\n          return toolbar;\n        });\n      }}\n    />\n  );\n};\n\nImageViewer.displayName = \"ImageViewer\";\n\n// ============================================================================\n// ImageViewerImage Component (Wrapper for single image with preview)\n// ============================================================================\n\nexport const ImageViewerImage: React.FC<ImageViewerImageProps> = ({\n  src,\n  alt = \"\",\n  width,\n  height,\n  preview = true,\n  previewSrc,\n  fallback,\n  placeholder,\n  className,\n  wrapperClassName,\n  onPreviewClick,\n  onError,\n  ...props\n}) => {\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(false);\n  const [viewerVisible, setViewerVisible] = useState(false);\n\n  const handleLoad = () => {\n    setLoading(false);\n    setError(false);\n  };\n\n  const handleError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    setLoading(false);\n    setError(true);\n    onError?.(e);\n  };\n\n  const handlePreview = () => {\n    if (!preview) return;\n    setViewerVisible(true);\n    onPreviewClick?.();\n  };\n\n  const handleCloseViewer = () => {\n    setViewerVisible(false);\n  };\n\n  const showPlaceholder = loading && placeholder;\n  const showFallback = error && fallback;\n  const showPreviewMask = preview && !loading && !error;\n\n  return (\n    <>\n      <div\n        className={cn(\n          \"ds:image-viewer-root ds:relative ds:inline-block\",\n          wrapperClassName\n        )}\n      >\n        <div className=\"ds:relative ds:inline-block\">\n          {showPlaceholder && (\n            <div\n              className=\"ds:absolute ds:inset-0 ds:flex ds:items-center ds:justify-center ds:bg-muted ds:animate-pulse\"\n              style={{ width, height }}\n            >\n              {placeholder === true ? (\n                <div className=\"ds:w-8 ds:h-8 ds:border-2 ds:border-primary ds:border-t-transparent ds:rounded-full ds:animate-spin\" />\n              ) : (\n                placeholder\n              )}\n            </div>\n          )}\n\n          <img\n            src={showFallback ? fallback : src}\n            alt={alt}\n            width={width}\n            height={height}\n            className={cn(\n              \"ds:image-viewer-img ds:max-w-full ds:h-auto ds:align-middle\",\n              loading && \"ds:opacity-0\",\n              className\n            )}\n            onLoad={handleLoad}\n            onError={handleError}\n            {...props}\n          />\n\n          {showPreviewMask && (\n            <div\n              onClick={handlePreview}\n              className={cn(\n                \"ds:image-viewer-mask ds:absolute ds:inset-0 ds:flex ds:items-center ds:justify-center ds:opacity-0 ds:hover:opacity-100 ds:transition-opacity ds:cursor-pointer\",\n                \"ds:bg-black/50 ds:backdrop-blur-sm\"\n              )}\n            >\n              <div className=\"ds:text-white ds:text-sm ds:flex ds:items-center ds:gap-2\">\n                <ZoomIn className=\"ds:w-5 ds:h-5\" />\n                <span>Preview</span>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Viewer Modal */}\n      <ImageViewer\n        images={[{ src: previewSrc || src, alt }]}\n        visible={viewerVisible}\n        onClose={handleCloseViewer}\n        rotatable\n        scalable\n        downloadable\n      />\n    </>\n  );\n};\n\nImageViewerImage.displayName = \"ImageViewer.Image\";\n\n// ============================================================================\n// ImageViewerGroup Component\n// ============================================================================\n\ninterface ImageViewerGroupProps {\n  children: React.ReactNode;\n  images: ImageInfo[];\n  preview?: boolean;\n}\n\nexport const ImageViewerGroup: React.FC<ImageViewerGroupProps> = ({\n  children,\n  images,\n  preview = true,\n}) => {\n  const [viewerVisible, setViewerVisible] = useState(false);\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  const handlePreview = useCallback((index: number) => {\n    setCurrentIndex(index);\n    setViewerVisible(true);\n  }, []);\n\n  const handleClose = useCallback(() => {\n    setViewerVisible(false);\n  }, []);\n\n  const contextValue = React.useMemo(\n    () => ({\n      handlePreview,\n      preview,\n    }),\n    [handlePreview, preview]\n  );\n\n  return (\n    <>\n      <ImageViewerGroupContext.Provider value={contextValue}>\n        {children}\n      </ImageViewerGroupContext.Provider>\n\n      <ImageViewer\n        images={images}\n        visible={viewerVisible}\n        onClose={handleClose}\n        activeIndex={currentIndex}\n        onIndexChange={setCurrentIndex}\n        rotatable\n        scalable\n        downloadable\n      />\n    </>\n  );\n};\n\nImageViewerGroup.displayName = \"ImageViewer.Group\";\n\n// Context for Group\nconst ImageViewerGroupContext = React.createContext<{\n  handlePreview?: (_index: number) => void;\n  preview?: boolean;\n} | null>(null);\n\n// Export with namespace\nconst ImageViewerNamespace = Object.assign(ImageViewer, {\n  Image: ImageViewerImage,\n  Group: ImageViewerGroup,\n});\n\nexport default ImageViewerNamespace;\n"],"names":["n","module","ImageViewer","images","visible","onClose","activeIndex","onIndexChange","zoomSpeed","disableKeyboardSupport","noNavbar","noToolbar","rotatable","scalable","changeable","noClose","minScale","maxScale","defaultScale","className","downloadable","noImgDetails","noResetZoomAfterChange","drag","currentIndex","setCurrentIndex","useState","ViewerComponent","setViewerComponent","useEffect","handleClose","useCallback","handleIndexChange","_activeImage","index","handleDownload","currentImage","downloadUrl","link","response","blob","url","viewerImages","img","jsx","cn","toolbars","toolbar","e","jsxs","ImageViewerImage","src","alt","width","height","preview","previewSrc","fallback","placeholder","wrapperClassName","onPreviewClick","onError","props","loading","setLoading","error","setError","viewerVisible","setViewerVisible","handleLoad","handleError","handlePreview","handleCloseViewer","showPlaceholder","showFallback","showPreviewMask","Fragment","ZoomIn","ImageViewerGroup","children","contextValue","React","ImageViewerGroupContext"],"mappings":"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"}

package/dist/esm/components/Table/data-table.js

@@ -64,7 +64,7 @@ function po({
           "div",
           {
             className: a(
-              "ds:overflow-auto ds:rounded-md ds:border ds-border-border",
+              "ds:overflow-auto ds:rounded-md ds:border ds:border-border",
               s && "ds:blur-sm"
             ),
             children: /* @__PURE__ */ i(b, { children: [

package/dist/esm/components/Table/data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","sources":["../../../../src/components/Table/data-table.tsx"],"sourcesContent":["import { flexRender, type Table as TanstackTable } from \"@tanstack/react-table\";\nimport type * as React from \"react\";\n\nimport { DataTablePagination } from \"./data-table-pagination\";\nimport {\n  cn,\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@dsui/ui\";\nimport { getCommonPinningStyles } from \"@/utils/data-table\";\nimport { DataTableColumnHeader } from \"./data-table-column-header\";\n\nexport interface DataTableProps<TData> extends React.ComponentProps<\"div\"> {\n  table: TanstackTable<TData>;\n  actionBar?: React.ReactNode;\n  pagination?:\n    | boolean\n    | Omit<React.ComponentProps<typeof DataTablePagination<TData>>, \"table\">;\n  sticky?: boolean | { offsetHeader?: number; offsetScroll?: number };\n  bordered?: boolean;\n  loading?: boolean;\n  footer?: (currentPageData: TData[]) => React.ReactNode;\n}\n\nexport function DataTable<TData>({\n  table,\n  actionBar,\n  children,\n  className,\n  pagination = true,\n  sticky,\n  bordered,\n  loading,\n  footer,\n  ...props\n}: DataTableProps<TData>) {\n  return (\n    <div\n      className={cn(\n        \"ds:flex ds:w-full ds:flex-col ds:gap-2.5 ds:relative\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {loading && (\n        <div className=\"ds:absolute ds:inset-0 ds:bg-background/50 ds:flex ds:items-center ds:justify-center ds:z-20\">\n          Loading...\n        </div>\n      )}\n      <div\n        className={cn(\n          \"ds:overflow-auto ds:rounded-md ds:border ds-border-border\",\n          loading && \"ds:blur-sm\"\n        )}\n      >\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead\n                    key={header.id}\n                    colSpan={header.colSpan}\n                    style={{\n                      ...getCommonPinningStyles({ column: header.column }),\n                    }}\n                  >\n                    {header.isPlaceholder ? null : header.column.columnDef\n                        .header ? (\n                      typeof header.column.columnDef.header === \"function\" ? (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext()\n                        )\n                      ) : (\n                        <DataTableColumnHeader column={header.column} />\n                      )\n                    ) : null}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell\n                      key={cell.id}\n                      style={{\n                        ...getCommonPinningStyles({ column: cell.column }),\n                      }}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={table.getAllColumns().length}\n                  className=\"ds:h-24 ds:text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n          {footer && (\n            <tfoot>\n              <TableRow>\n                <TableCell colSpan={table.getAllColumns().length}>\n                  {footer(table.getRowModel().rows.map((row) => row.original))}\n                </TableCell>\n              </TableRow>\n            </tfoot>\n          )}\n        </Table>\n      </div>\n      <div className=\"ds:flex ds:flex-col ds:gap-2.5\">\n        {pagination && (\n          <DataTablePagination\n            table={table}\n            {...(pagination === true ? {} : pagination)}\n          />\n        )}\n        {actionBar &&\n          table.getFilteredSelectedRowModel().rows.length > 0 &&\n          actionBar}\n      </div>\n    </div>\n  );\n}\n"],"names":["DataTable","table","actionBar","children","className","pagination","sticky","bordered","loading","footer","props","jsxs","cn","jsx","Table","TableHeader","headerGroup","TableRow","header","TableHead","getCommonPinningStyles","flexRender","DataTableColumnHeader","TableBody","row","cell","TableCell","DataTablePagination"],"mappings":"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"}
+{"version":3,"file":"data-table.js","sources":["../../../../src/components/Table/data-table.tsx"],"sourcesContent":["import { flexRender, type Table as TanstackTable } from \"@tanstack/react-table\";\nimport type * as React from \"react\";\n\nimport { DataTablePagination } from \"./data-table-pagination\";\nimport {\n  cn,\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@dsui/ui\";\nimport { getCommonPinningStyles } from \"@/utils/data-table\";\nimport { DataTableColumnHeader } from \"./data-table-column-header\";\n\nexport interface DataTableProps<TData> extends React.ComponentProps<\"div\"> {\n  table: TanstackTable<TData>;\n  actionBar?: React.ReactNode;\n  pagination?:\n    | boolean\n    | Omit<React.ComponentProps<typeof DataTablePagination<TData>>, \"table\">;\n  sticky?: boolean | { offsetHeader?: number; offsetScroll?: number };\n  bordered?: boolean;\n  loading?: boolean;\n  footer?: (currentPageData: TData[]) => React.ReactNode;\n}\n\nexport function DataTable<TData>({\n  table,\n  actionBar,\n  children,\n  className,\n  pagination = true,\n  sticky,\n  bordered,\n  loading,\n  footer,\n  ...props\n}: DataTableProps<TData>) {\n  return (\n    <div\n      className={cn(\n        \"ds:flex ds:w-full ds:flex-col ds:gap-2.5 ds:relative\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {loading && (\n        <div className=\"ds:absolute ds:inset-0 ds:bg-background/50 ds:flex ds:items-center ds:justify-center ds:z-20\">\n          Loading...\n        </div>\n      )}\n      <div\n        className={cn(\n          \"ds:overflow-auto ds:rounded-md ds:border ds:border-border\",\n          loading && \"ds:blur-sm\"\n        )}\n      >\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead\n                    key={header.id}\n                    colSpan={header.colSpan}\n                    style={{\n                      ...getCommonPinningStyles({ column: header.column }),\n                    }}\n                  >\n                    {header.isPlaceholder ? null : header.column.columnDef\n                        .header ? (\n                      typeof header.column.columnDef.header === \"function\" ? (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext()\n                        )\n                      ) : (\n                        <DataTableColumnHeader column={header.column} />\n                      )\n                    ) : null}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell\n                      key={cell.id}\n                      style={{\n                        ...getCommonPinningStyles({ column: cell.column }),\n                      }}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={table.getAllColumns().length}\n                  className=\"ds:h-24 ds:text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n          {footer && (\n            <tfoot>\n              <TableRow>\n                <TableCell colSpan={table.getAllColumns().length}>\n                  {footer(table.getRowModel().rows.map((row) => row.original))}\n                </TableCell>\n              </TableRow>\n            </tfoot>\n          )}\n        </Table>\n      </div>\n      <div className=\"ds:flex ds:flex-col ds:gap-2.5\">\n        {pagination && (\n          <DataTablePagination\n            table={table}\n            {...(pagination === true ? {} : pagination)}\n          />\n        )}\n        {actionBar &&\n          table.getFilteredSelectedRowModel().rows.length > 0 &&\n          actionBar}\n      </div>\n    </div>\n  );\n}\n"],"names":["DataTable","table","actionBar","children","className","pagination","sticky","bordered","loading","footer","props","jsxs","cn","jsx","Table","TableHeader","headerGroup","TableRow","header","TableHead","getCommonPinningStyles","flexRender","DataTableColumnHeader","TableBody","row","cell","TableCell","DataTablePagination"],"mappings":"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"}

package/dist/esm/hooks/use-data-table.js

@@ -1,95 +1,97 @@
-import { useReactTable as oe, getFacetedMinMaxValues as ne, getFacetedUniqueValues as ie, getFacetedRowModel as se, getSortedRowModel as ae, getPaginationRowModel as re, getFilteredRowModel as le, getCoreRowModel as ce } from "@tanstack/react-table";
-import { useQueryState as A, parseAsInteger as v, parseAsArrayOf as ue, parseAsString as Y, useQueryStates as ge } from "nuqs";
+import { useReactTable as ie, getFacetedMinMaxValues as se, getFacetedUniqueValues as ae, getFacetedRowModel as re, getSortedRowModel as le, getPaginationRowModel as ce, getFilteredRowModel as ue, getCoreRowModel as ge } from "@tanstack/react-table";
+import { useQueryState as A, parseAsInteger as v, parseAsArrayOf as de, parseAsString as Y, useQueryStates as fe } from "nuqs";
 import * as t from "react";
-import { useDebouncedCallback as de } from "./use-debounced-callback.js";
-import { getSortingStateParser as fe } from "../utils/parsers.js";
-const pe = "page", me = "perPage", Se = "sort", we = "filters", be = "joinOperator", Me = ",", Re = 300, ye = 50;
-function Ee(j) {
+import { useDebouncedCallback as pe } from "./use-debounced-callback.js";
+import { getSortingStateParser as me } from "../utils/parsers.js";
+const Se = "page", we = "perPage", be = "sort", Ce = "filters", Me = "joinOperator", Re = ",", ye = 300, Pe = 50;
+function Ke(j) {
   const {
     columns: g,
     pageCount: U,
-    initialState: a,
+    initialState: s,
     queryKeys: d,
-    history: E = "replace",
-    debounceMs: p = Re,
-    throttleMs: S = ye,
-    clearOnDefault: K = !1,
+    history: O = "replace",
+    debounceMs: p = ye,
+    throttleMs: S = Pe,
+    clearOnDefault: E = !1,
     enableAdvancedFilter: r = !1,
-    scroll: O = !1,
+    scroll: K = !1,
     shallow: w = !0,
     startTransition: x,
     enableNuqs: i = !1,
     ...b
-  } = j, I = d?.page ?? pe, T = d?.perPage ?? me, _ = d?.sort ?? Se, V = d?.filters ?? we, k = d?.joinOperator ?? be, c = t.useMemo(
+  } = j, I = d?.page ?? Se, T = d?.perPage ?? we, _ = d?.sort ?? be, V = d?.filters ?? Ce, k = d?.joinOperator ?? Me, c = t.useMemo(
     () => ({
-      history: E,
-      scroll: O,
+      history: O,
+      scroll: K,
       shallow: w,
       throttleMs: S,
       debounceMs: p,
-      clearOnDefault: K,
+      clearOnDefault: E,
       startTransition: x
     }),
     [
-      E,
       O,
+      K,
       w,
       S,
       p,
-      K,
+      E,
       x
     ]
   ), [B, N] = t.useState(
-    a?.rowSelection ?? {}
-  ), [G, H] = t.useState(a?.columnVisibility ?? {}), [M, m] = i ? A(
+    s?.rowSelection ?? {}
+  ), [G, H] = t.useState(s?.columnVisibility ?? {}), [L, Q] = t.useState(
+    s?.columnOrder ?? []
+  ), [C, m] = i ? A(
     I,
     v.withOptions(c).withDefault(1)
-  ) : t.useState(a?.pagination?.pageIndex ?? 0), [z, R] = i ? A(
+  ) : t.useState(s?.pagination?.pageIndex ?? 0), [z, M] = i ? A(
     T,
-    v.withOptions(c).withDefault(a?.pagination?.pageSize ?? 10)
-  ) : t.useState(a?.pagination?.pageSize ?? 10), y = t.useMemo(() => ({
-    pageIndex: i ? M - 1 : M,
+    v.withOptions(c).withDefault(s?.pagination?.pageSize ?? 10)
+  ) : t.useState(s?.pagination?.pageSize ?? 10), R = t.useMemo(() => ({
+    pageIndex: i ? C - 1 : C,
     // zero-based index
     pageSize: z
-  }), [M, z, i]), L = t.useCallback(
+  }), [C, z, i]), Z = t.useCallback(
     (e) => {
       if (typeof e == "function") {
-        const o = e(y);
+        const o = e(R);
         m(
           i ? o.pageIndex + 1 : o.pageIndex
-        ), R(o.pageSize);
+        ), M(o.pageSize);
       } else
         m(
           i ? e.pageIndex + 1 : e.pageIndex
-        ), R(e.pageSize);
+        ), M(e.pageSize);
     },
-    [y, m, R, i]
-  ), Q = t.useMemo(() => new Set(
+    [R, m, M, i]
+  ), J = t.useMemo(() => new Set(
     g.map((e) => e.id).filter(Boolean)
-  ), [g]), [C, P] = i ? A(
+  ), [g]), [y, P] = i ? A(
     _,
-    fe(Q).withOptions(c).withDefault(a?.sorting ?? [])
-  ) : t.useState(a?.sorting ?? []), Z = t.useCallback(
+    me(J).withOptions(c).withDefault(s?.sorting ?? [])
+  ) : t.useState(s?.sorting ?? []), W = t.useCallback(
     (e) => {
       if (typeof e == "function") {
-        const o = e(C);
+        const o = e(y);
         P(o);
       } else
         P(e);
     },
-    [C, P]
-  ), u = t.useMemo(() => r ? [] : g.filter((e) => e.enableColumnFilter), [g, r]), J = t.useMemo(() => r ? {} : u.reduce((e, o) => (o.meta?.variant === "multiSelect" ? e[o.id ?? ""] = ue(
+    [y, P]
+  ), u = t.useMemo(() => r ? [] : g.filter((e) => e.enableColumnFilter), [g, r]), X = t.useMemo(() => r ? {} : u.reduce((e, o) => (o.meta?.variant === "multiSelect" ? e[o.id ?? ""] = de(
     Y,
-    Me
-  ).withOptions(c) : e[o.id ?? ""] = Y.withOptions(c), e), {}), [u, c, r]), [D, W] = i ? ge(J) : t.useState({}), q = de(
+    Re
+  ).withOptions(c) : e[o.id ?? ""] = Y.withOptions(c), e), {}), [u, c, r]), [D, $] = i ? fe(X) : t.useState({}), q = pe(
     (e) => {
-      m(1), W(e);
+      m(1), $(e);
     },
     p
-  ), X = t.useMemo(() => r ? [] : Object.entries(D).reduce(
+  ), ee = t.useMemo(() => r ? [] : Object.entries(D).reduce(
     (e, [o, n]) => {
       if (n !== null) {
-        const s = u.find((f) => f.id === o)?.meta?.variant === "multiSelect", l = Array.isArray(n) ? n : s && typeof n == "string" && /[^a-zA-Z0-9]/.test(n) ? n.split(/[^a-zA-Z0-9]+/).filter(Boolean) : s ? [n] : n;
+        const a = u.find((f) => f.id === o)?.meta?.variant === "multiSelect", l = Array.isArray(n) ? n : a && typeof n == "string" && /[^a-zA-Z0-9]/.test(n) ? n.split(/[^a-zA-Z0-9]+/).filter(Boolean) : a ? [n] : n;
         e.push({
           id: o,
           value: l
@@ -98,19 +100,19 @@ function Ee(j) {
       return e;
     },
     []
-  ), [D, r, u]), [$, ee] = t.useState(X), te = t.useCallback(
+  ), [D, r, u]), [te, oe] = t.useState(ee), ne = t.useCallback(
     (e) => {
-      r || ee((o) => {
-        const n = typeof e == "function" ? e(o) : e, F = n.reduce((s, l) => {
+      r || oe((o) => {
+        const n = typeof e == "function" ? e(o) : e, F = n.reduce((a, l) => {
           const f = u.find((h) => h.id === l.id);
           if (f) {
             const h = f.meta?.variant === "multiSelect";
-            s[l.id] = l.value;
+            a[l.id] = l.value;
           }
-          return console.log("filterParsers", f, s), s;
+          return console.log("filterParsers", f, a), a;
         }, {});
-        for (const s of o)
-          n.some((l) => l.id === s.id) || (F[s.id] = null);
+        for (const a of o)
+          n.some((l) => l.id === a.id) || (F[a.id] = null);
         return i && q(F), n;
       });
     },
@@ -121,15 +123,16 @@ function Ee(j) {
       i
     ]
   );
-  return { table: oe({
-    initialState: a,
+  return { table: ie({
+    initialState: s,
     pageCount: U,
     state: {
-      pagination: y,
-      sorting: C,
+      pagination: R,
+      sorting: y,
       columnVisibility: G,
+      columnOrder: L,
       rowSelection: B,
-      columnFilters: $
+      columnFilters: te
     },
     defaultColumn: {
       ...b.defaultColumn,
@@ -140,17 +143,18 @@ function Ee(j) {
     },
     enableRowSelection: !0,
     onRowSelectionChange: N,
-    onPaginationChange: L,
-    onSortingChange: Z,
-    onColumnFiltersChange: te,
+    onPaginationChange: Z,
+    onSortingChange: W,
+    onColumnFiltersChange: ne,
     onColumnVisibilityChange: H,
-    getCoreRowModel: ce(),
-    getFilteredRowModel: le(),
-    getPaginationRowModel: re(),
-    getSortedRowModel: ae(),
-    getFacetedRowModel: se(),
-    getFacetedUniqueValues: ie(),
-    getFacetedMinMaxValues: ne(),
+    onColumnOrderChange: Q,
+    getCoreRowModel: ge(),
+    getFilteredRowModel: ue(),
+    getPaginationRowModel: ce(),
+    getSortedRowModel: le(),
+    getFacetedRowModel: re(),
+    getFacetedUniqueValues: ae(),
+    getFacetedMinMaxValues: se(),
     meta: {
       ...b.meta,
       queryKeys: {
@@ -166,6 +170,6 @@ function Ee(j) {
   }), shallow: w, debounceMs: p, throttleMs: S };
 }
 export {
-  Ee as useDataTable
+  Ke as useDataTable
 };
 //# sourceMappingURL=use-data-table.js.map

package/dist/esm/hooks/use-data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-data-table.js","sources":["../../../src/hooks/use-data-table.ts"],"sourcesContent":["\"use client\";\n\n/* eslint-disable react-hooks/rules-of-hooks */\n\nimport {\n  type ColumnFiltersState,\n  getCoreRowModel,\n  getFacetedMinMaxValues,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type RowSelectionState,\n  type SortingState,\n  type TableOptions,\n  type TableState,\n  type Updater,\n  useReactTable,\n  type VisibilityState,\n} from \"@tanstack/react-table\";\nimport {\n  parseAsArrayOf,\n  parseAsInteger,\n  parseAsString,\n  type SingleParser,\n  type UseQueryStateOptions,\n  useQueryState,\n  useQueryStates,\n} from \"nuqs\";\nimport * as React from \"react\";\n\nimport { useDebouncedCallback } from \"@/hooks/use-debounced-callback\";\nimport { getSortingStateParser } from \"@/utils/parsers\";\nimport type { ExtendedColumnSort, QueryKeys } from \"@/types/data-table\";\n\nconst PAGE_KEY = \"page\";\nconst PER_PAGE_KEY = \"perPage\";\nconst SORT_KEY = \"sort\";\nconst FILTERS_KEY = \"filters\";\nconst JOIN_OPERATOR_KEY = \"joinOperator\";\nconst ARRAY_SEPARATOR = \",\";\nconst DEBOUNCE_MS = 300;\nconst THROTTLE_MS = 50;\n\ninterface UseDataTableProps<TData>\n  extends Omit<\n    TableOptions<TData>,\n    // | \"state\"\n    // | \"pageCount\"\n    \"getCoreRowModel\"\n  > {\n  initialState?: Omit<Partial<TableState>, \"sorting\"> & {\n    sorting?: ExtendedColumnSort<TData>[];\n  };\n  queryKeys?: Partial<QueryKeys>;\n  history?: \"push\" | \"replace\";\n  debounceMs?: number;\n  throttleMs?: number;\n  clearOnDefault?: boolean;\n  enableAdvancedFilter?: boolean;\n  scroll?: boolean;\n  shallow?: boolean;\n  startTransition?: React.TransitionStartFunction;\n  enableNuqs?: boolean;\n}\n\nexport function useDataTable<TData>(props: UseDataTableProps<TData>) {\n  const {\n    columns,\n    pageCount,\n    initialState,\n    queryKeys,\n    history = \"replace\",\n    debounceMs = DEBOUNCE_MS,\n    throttleMs = THROTTLE_MS,\n    clearOnDefault = false,\n    enableAdvancedFilter = false,\n    scroll = false,\n    shallow = true,\n    startTransition,\n    enableNuqs = false,\n    ...tableProps\n  } = props;\n  const pageKey = queryKeys?.page ?? PAGE_KEY;\n  const perPageKey = queryKeys?.perPage ?? PER_PAGE_KEY;\n  const sortKey = queryKeys?.sort ?? SORT_KEY;\n  const filtersKey = queryKeys?.filters ?? FILTERS_KEY;\n  const joinOperatorKey = queryKeys?.joinOperator ?? JOIN_OPERATOR_KEY;\n\n  const queryStateOptions = React.useMemo<\n    Omit<UseQueryStateOptions<string>, \"parse\">\n  >(\n    () => ({\n      history,\n      scroll,\n      shallow,\n      throttleMs,\n      debounceMs,\n      clearOnDefault,\n      startTransition: startTransition as any,\n    }),\n    [\n      history,\n      scroll,\n      shallow,\n      throttleMs,\n      debounceMs,\n      clearOnDefault,\n      startTransition,\n    ]\n  );\n\n  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>(\n    initialState?.rowSelection ?? {}\n  );\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>(initialState?.columnVisibility ?? {});\n\n  const [page, setPage] = enableNuqs\n    ? useQueryState(\n        pageKey,\n        parseAsInteger.withOptions(queryStateOptions).withDefault(1)\n      )\n    : React.useState(initialState?.pagination?.pageIndex ?? 0);\n\n  const [perPage, setPerPage] = enableNuqs\n    ? useQueryState(\n        perPageKey,\n        parseAsInteger\n          .withOptions(queryStateOptions)\n          .withDefault(initialState?.pagination?.pageSize ?? 10)\n      )\n    : React.useState(initialState?.pagination?.pageSize ?? 10);\n\n  const pagination: PaginationState = React.useMemo(() => {\n    return {\n      pageIndex: enableNuqs ? page - 1 : page, // zero-based index\n      pageSize: perPage,\n    };\n  }, [page, perPage, enableNuqs]);\n\n  const onPaginationChange = React.useCallback(\n    (updaterOrValue: Updater<PaginationState>) => {\n      if (typeof updaterOrValue === \"function\") {\n        const newPagination = updaterOrValue(pagination);\n        void setPage(\n          enableNuqs ? newPagination.pageIndex + 1 : newPagination.pageIndex\n        );\n        void setPerPage(newPagination.pageSize);\n      } else {\n        void setPage(\n          enableNuqs ? updaterOrValue.pageIndex + 1 : updaterOrValue.pageIndex\n        );\n        void setPerPage(updaterOrValue.pageSize);\n      }\n    },\n    [pagination, setPage, setPerPage, enableNuqs]\n  );\n\n  const columnIds = React.useMemo(() => {\n    return new Set(\n      columns.map((column) => column.id).filter(Boolean) as string[]\n    );\n  }, [columns]);\n\n  // Note: enableNuqs should be stable (not change during component lifecycle)\n  // to avoid violating React hooks rules. If it changes, it may cause issues.\n  const [sorting, setSorting] = enableNuqs\n    ? useQueryState(\n        sortKey,\n        getSortingStateParser<TData>(columnIds)\n          .withOptions(queryStateOptions)\n          .withDefault(initialState?.sorting ?? [])\n      )\n    : React.useState(initialState?.sorting ?? []);\n\n  const onSortingChange = React.useCallback(\n    (updaterOrValue: Updater<SortingState>) => {\n      if (typeof updaterOrValue === \"function\") {\n        const newSorting = updaterOrValue(sorting);\n        setSorting(newSorting as ExtendedColumnSort<TData>[]);\n      } else {\n        setSorting(updaterOrValue as ExtendedColumnSort<TData>[]);\n      }\n    },\n    [sorting, setSorting]\n  );\n\n  const filterableColumns = React.useMemo(() => {\n    if (enableAdvancedFilter) return [];\n\n    return columns.filter((column) => column.enableColumnFilter);\n  }, [columns, enableAdvancedFilter]);\n\n  const filterParsers = React.useMemo(() => {\n    if (enableAdvancedFilter) return {};\n\n    return filterableColumns.reduce<\n      Record<string, SingleParser<string> | SingleParser<string[]>>\n    >((acc, column) => {\n      if (column.meta?.variant === \"multiSelect\") {\n        acc[column.id ?? \"\"] = parseAsArrayOf(\n          parseAsString,\n          ARRAY_SEPARATOR\n        ).withOptions(queryStateOptions);\n      } else {\n        acc[column.id ?? \"\"] = parseAsString.withOptions(queryStateOptions);\n      }\n      return acc;\n    }, {});\n  }, [filterableColumns, queryStateOptions, enableAdvancedFilter]);\n\n  // Note: enableNuqs should be stable (not change during component lifecycle)\n  const [filterValues, setFilterValues] = enableNuqs\n    ? useQueryStates(filterParsers)\n    : React.useState<Record<string, string | string[] | null>>({});\n\n  const debouncedSetFilterValues = useDebouncedCallback(\n    (values: typeof filterValues) => {\n      void setPage(1);\n      void setFilterValues(values);\n    },\n    debounceMs\n  );\n\n  const initialColumnFilters: ColumnFiltersState = React.useMemo(() => {\n    if (enableAdvancedFilter) return [];\n\n    return Object.entries(filterValues).reduce<ColumnFiltersState>(\n      (filters, [key, value]) => {\n        if (value !== null) {\n          const column = filterableColumns.find((col) => col.id === key);\n          const isMultiSelect = column?.meta?.variant === \"multiSelect\";\n\n          const processedValue = Array.isArray(value)\n            ? value\n            : isMultiSelect &&\n                typeof value === \"string\" &&\n                /[^a-zA-Z0-9]/.test(value)\n              ? value.split(/[^a-zA-Z0-9]+/).filter(Boolean)\n              : isMultiSelect\n                ? [value]\n                : value;\n\n          filters.push({\n            id: key,\n            value: processedValue,\n          });\n        }\n        return filters;\n      },\n      []\n    );\n  }, [filterValues, enableAdvancedFilter, filterableColumns]);\n\n  const [columnFilters, setColumnFilters] =\n    React.useState<ColumnFiltersState>(initialColumnFilters);\n\n  const onColumnFiltersChange = React.useCallback(\n    (updaterOrValue: Updater<ColumnFiltersState>) => {\n      if (enableAdvancedFilter) return;\n\n      setColumnFilters((prev) => {\n        const next =\n          typeof updaterOrValue === \"function\"\n            ? updaterOrValue(prev)\n            : updaterOrValue;\n\n        const filterUpdates = next.reduce<\n          Record<string, string | string[] | null>\n        >((acc, filter) => {\n          const column = filterableColumns.find((col) => col.id === filter.id);\n          if (column) {\n            const isMultiSelect = column.meta?.variant === \"multiSelect\";\n            acc[filter.id] = isMultiSelect\n              ? (filter.value as string[])\n              : (filter.value as string);\n          }\n          console.log(\"filterParsers\", column, acc);\n          return acc;\n        }, {});\n\n        for (const prevFilter of prev) {\n          if (!next.some((filter) => filter.id === prevFilter.id)) {\n            filterUpdates[prevFilter.id] = null;\n          }\n        }\n\n        if (enableNuqs) {\n          debouncedSetFilterValues(filterUpdates);\n        }\n        return next;\n      });\n    },\n    [\n      debouncedSetFilterValues,\n      filterableColumns,\n      enableAdvancedFilter,\n      enableNuqs,\n    ]\n  );\n\n  const table = useReactTable({\n    initialState,\n    pageCount,\n    state: {\n      pagination,\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n    },\n    defaultColumn: {\n      ...tableProps.defaultColumn,\n      enableColumnFilter: true,\n      enableSorting: false,\n      enableHiding: true,\n      enablePinning: true,\n    },\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onPaginationChange,\n    onSortingChange,\n    onColumnFiltersChange,\n    onColumnVisibilityChange: setColumnVisibility,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n    getFacetedMinMaxValues: getFacetedMinMaxValues(),\n    meta: {\n      ...tableProps.meta,\n      queryKeys: {\n        page: pageKey,\n        perPage: perPageKey,\n        sort: sortKey,\n        filters: filtersKey,\n        joinOperator: joinOperatorKey,\n      },\n    },\n    ...tableProps,\n    columns,\n  });\n\n  return { table, shallow, debounceMs, throttleMs };\n}\n"],"names":["PAGE_KEY","PER_PAGE_KEY","SORT_KEY","FILTERS_KEY","JOIN_OPERATOR_KEY","ARRAY_SEPARATOR","DEBOUNCE_MS","THROTTLE_MS","useDataTable","props","columns","pageCount","initialState","queryKeys","history","debounceMs","throttleMs","clearOnDefault","enableAdvancedFilter","scroll","shallow","startTransition","enableNuqs","tableProps","pageKey","perPageKey","sortKey","filtersKey","joinOperatorKey","queryStateOptions","React","rowSelection","setRowSelection","columnVisibility","setColumnVisibility","page","setPage","useQueryState","parseAsInteger","perPage","setPerPage","pagination","onPaginationChange","updaterOrValue","newPagination","columnIds","column","sorting","setSorting","getSortingStateParser","onSortingChange","newSorting","filterableColumns","filterParsers","acc","parseAsArrayOf","parseAsString","filterValues","setFilterValues","useQueryStates","debouncedSetFilterValues","useDebouncedCallback","values","initialColumnFilters","filters","key","value","isMultiSelect","col","processedValue","columnFilters","setColumnFilters","onColumnFiltersChange","prev","next","filterUpdates","filter","prevFilter","useReactTable","getCoreRowModel","getFilteredRowModel","getPaginationRowModel","getSortedRowModel","getFacetedRowModel","getFacetedUniqueValues","getFacetedMinMaxValues"],"mappings":"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"}
+{"version":3,"file":"use-data-table.js","sources":["../../../src/hooks/use-data-table.ts"],"sourcesContent":["\"use client\";\n\n/* eslint-disable react-hooks/rules-of-hooks */\n\nimport {\n  type ColumnFiltersState,\n  type ColumnOrderState,\n  getCoreRowModel,\n  getFacetedMinMaxValues,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type PaginationState,\n  type RowSelectionState,\n  type SortingState,\n  type TableOptions,\n  type TableState,\n  type Updater,\n  useReactTable,\n  type VisibilityState,\n} from \"@tanstack/react-table\";\nimport {\n  parseAsArrayOf,\n  parseAsInteger,\n  parseAsString,\n  type SingleParser,\n  type UseQueryStateOptions,\n  useQueryState,\n  useQueryStates,\n} from \"nuqs\";\nimport * as React from \"react\";\n\nimport { useDebouncedCallback } from \"@/hooks/use-debounced-callback\";\nimport { getSortingStateParser } from \"@/utils/parsers\";\nimport type { ExtendedColumnSort, QueryKeys } from \"@/types/data-table\";\n\nconst PAGE_KEY = \"page\";\nconst PER_PAGE_KEY = \"perPage\";\nconst SORT_KEY = \"sort\";\nconst FILTERS_KEY = \"filters\";\nconst JOIN_OPERATOR_KEY = \"joinOperator\";\nconst ARRAY_SEPARATOR = \",\";\nconst DEBOUNCE_MS = 300;\nconst THROTTLE_MS = 50;\n\ninterface UseDataTableProps<TData>\n  extends Omit<\n    TableOptions<TData>,\n    // | \"state\"\n    // | \"pageCount\"\n    \"getCoreRowModel\"\n  > {\n  initialState?: Omit<Partial<TableState>, \"sorting\"> & {\n    sorting?: ExtendedColumnSort<TData>[];\n  };\n  queryKeys?: Partial<QueryKeys>;\n  history?: \"push\" | \"replace\";\n  debounceMs?: number;\n  throttleMs?: number;\n  clearOnDefault?: boolean;\n  enableAdvancedFilter?: boolean;\n  scroll?: boolean;\n  shallow?: boolean;\n  startTransition?: React.TransitionStartFunction;\n  enableNuqs?: boolean;\n}\n\nexport function useDataTable<TData>(props: UseDataTableProps<TData>) {\n  const {\n    columns,\n    pageCount,\n    initialState,\n    queryKeys,\n    history = \"replace\",\n    debounceMs = DEBOUNCE_MS,\n    throttleMs = THROTTLE_MS,\n    clearOnDefault = false,\n    enableAdvancedFilter = false,\n    scroll = false,\n    shallow = true,\n    startTransition,\n    enableNuqs = false,\n    ...tableProps\n  } = props;\n  const pageKey = queryKeys?.page ?? PAGE_KEY;\n  const perPageKey = queryKeys?.perPage ?? PER_PAGE_KEY;\n  const sortKey = queryKeys?.sort ?? SORT_KEY;\n  const filtersKey = queryKeys?.filters ?? FILTERS_KEY;\n  const joinOperatorKey = queryKeys?.joinOperator ?? JOIN_OPERATOR_KEY;\n\n  const queryStateOptions = React.useMemo<\n    Omit<UseQueryStateOptions<string>, \"parse\">\n  >(\n    () => ({\n      history,\n      scroll,\n      shallow,\n      throttleMs,\n      debounceMs,\n      clearOnDefault,\n      startTransition: startTransition as any,\n    }),\n    [\n      history,\n      scroll,\n      shallow,\n      throttleMs,\n      debounceMs,\n      clearOnDefault,\n      startTransition,\n    ]\n  );\n\n  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>(\n    initialState?.rowSelection ?? {}\n  );\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>(initialState?.columnVisibility ?? {});\n  const [columnOrder, setColumnOrder] = React.useState<ColumnOrderState>(\n    initialState?.columnOrder ?? []\n  );\n\n  const [page, setPage] = enableNuqs\n    ? useQueryState(\n        pageKey,\n        parseAsInteger.withOptions(queryStateOptions).withDefault(1)\n      )\n    : React.useState(initialState?.pagination?.pageIndex ?? 0);\n\n  const [perPage, setPerPage] = enableNuqs\n    ? useQueryState(\n        perPageKey,\n        parseAsInteger\n          .withOptions(queryStateOptions)\n          .withDefault(initialState?.pagination?.pageSize ?? 10)\n      )\n    : React.useState(initialState?.pagination?.pageSize ?? 10);\n\n  const pagination: PaginationState = React.useMemo(() => {\n    return {\n      pageIndex: enableNuqs ? page - 1 : page, // zero-based index\n      pageSize: perPage,\n    };\n  }, [page, perPage, enableNuqs]);\n\n  const onPaginationChange = React.useCallback(\n    (updaterOrValue: Updater<PaginationState>) => {\n      if (typeof updaterOrValue === \"function\") {\n        const newPagination = updaterOrValue(pagination);\n        void setPage(\n          enableNuqs ? newPagination.pageIndex + 1 : newPagination.pageIndex\n        );\n        void setPerPage(newPagination.pageSize);\n      } else {\n        void setPage(\n          enableNuqs ? updaterOrValue.pageIndex + 1 : updaterOrValue.pageIndex\n        );\n        void setPerPage(updaterOrValue.pageSize);\n      }\n    },\n    [pagination, setPage, setPerPage, enableNuqs]\n  );\n\n  const columnIds = React.useMemo(() => {\n    return new Set(\n      columns.map((column) => column.id).filter(Boolean) as string[]\n    );\n  }, [columns]);\n\n  // Note: enableNuqs should be stable (not change during component lifecycle)\n  // to avoid violating React hooks rules. If it changes, it may cause issues.\n  const [sorting, setSorting] = enableNuqs\n    ? useQueryState(\n        sortKey,\n        getSortingStateParser<TData>(columnIds)\n          .withOptions(queryStateOptions)\n          .withDefault(initialState?.sorting ?? [])\n      )\n    : React.useState(initialState?.sorting ?? []);\n\n  const onSortingChange = React.useCallback(\n    (updaterOrValue: Updater<SortingState>) => {\n      if (typeof updaterOrValue === \"function\") {\n        const newSorting = updaterOrValue(sorting);\n        setSorting(newSorting as ExtendedColumnSort<TData>[]);\n      } else {\n        setSorting(updaterOrValue as ExtendedColumnSort<TData>[]);\n      }\n    },\n    [sorting, setSorting]\n  );\n\n  const filterableColumns = React.useMemo(() => {\n    if (enableAdvancedFilter) return [];\n\n    return columns.filter((column) => column.enableColumnFilter);\n  }, [columns, enableAdvancedFilter]);\n\n  const filterParsers = React.useMemo(() => {\n    if (enableAdvancedFilter) return {};\n\n    return filterableColumns.reduce<\n      Record<string, SingleParser<string> | SingleParser<string[]>>\n    >((acc, column) => {\n      if (column.meta?.variant === \"multiSelect\") {\n        acc[column.id ?? \"\"] = parseAsArrayOf(\n          parseAsString,\n          ARRAY_SEPARATOR\n        ).withOptions(queryStateOptions);\n      } else {\n        acc[column.id ?? \"\"] = parseAsString.withOptions(queryStateOptions);\n      }\n      return acc;\n    }, {});\n  }, [filterableColumns, queryStateOptions, enableAdvancedFilter]);\n\n  // Note: enableNuqs should be stable (not change during component lifecycle)\n  const [filterValues, setFilterValues] = enableNuqs\n    ? useQueryStates(filterParsers)\n    : React.useState<Record<string, string | string[] | null>>({});\n\n  const debouncedSetFilterValues = useDebouncedCallback(\n    (values: typeof filterValues) => {\n      void setPage(1);\n      void setFilterValues(values);\n    },\n    debounceMs\n  );\n\n  const initialColumnFilters: ColumnFiltersState = React.useMemo(() => {\n    if (enableAdvancedFilter) return [];\n\n    return Object.entries(filterValues).reduce<ColumnFiltersState>(\n      (filters, [key, value]) => {\n        if (value !== null) {\n          const column = filterableColumns.find((col) => col.id === key);\n          const isMultiSelect = column?.meta?.variant === \"multiSelect\";\n\n          const processedValue = Array.isArray(value)\n            ? value\n            : isMultiSelect &&\n                typeof value === \"string\" &&\n                /[^a-zA-Z0-9]/.test(value)\n              ? value.split(/[^a-zA-Z0-9]+/).filter(Boolean)\n              : isMultiSelect\n                ? [value]\n                : value;\n\n          filters.push({\n            id: key,\n            value: processedValue,\n          });\n        }\n        return filters;\n      },\n      []\n    );\n  }, [filterValues, enableAdvancedFilter, filterableColumns]);\n\n  const [columnFilters, setColumnFilters] =\n    React.useState<ColumnFiltersState>(initialColumnFilters);\n\n  const onColumnFiltersChange = React.useCallback(\n    (updaterOrValue: Updater<ColumnFiltersState>) => {\n      if (enableAdvancedFilter) return;\n\n      setColumnFilters((prev) => {\n        const next =\n          typeof updaterOrValue === \"function\"\n            ? updaterOrValue(prev)\n            : updaterOrValue;\n\n        const filterUpdates = next.reduce<\n          Record<string, string | string[] | null>\n        >((acc, filter) => {\n          const column = filterableColumns.find((col) => col.id === filter.id);\n          if (column) {\n            const isMultiSelect = column.meta?.variant === \"multiSelect\";\n            acc[filter.id] = isMultiSelect\n              ? (filter.value as string[])\n              : (filter.value as string);\n          }\n          console.log(\"filterParsers\", column, acc);\n          return acc;\n        }, {});\n\n        for (const prevFilter of prev) {\n          if (!next.some((filter) => filter.id === prevFilter.id)) {\n            filterUpdates[prevFilter.id] = null;\n          }\n        }\n\n        if (enableNuqs) {\n          debouncedSetFilterValues(filterUpdates);\n        }\n        return next;\n      });\n    },\n    [\n      debouncedSetFilterValues,\n      filterableColumns,\n      enableAdvancedFilter,\n      enableNuqs,\n    ]\n  );\n\n  const table = useReactTable({\n    initialState,\n    pageCount,\n    state: {\n      pagination,\n      sorting,\n      columnVisibility,\n      columnOrder,\n      rowSelection,\n      columnFilters,\n    },\n    defaultColumn: {\n      ...tableProps.defaultColumn,\n      enableColumnFilter: true,\n      enableSorting: false,\n      enableHiding: true,\n      enablePinning: true,\n    },\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onPaginationChange,\n    onSortingChange,\n    onColumnFiltersChange,\n    onColumnVisibilityChange: setColumnVisibility,\n    onColumnOrderChange: setColumnOrder,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n    getFacetedMinMaxValues: getFacetedMinMaxValues(),\n    meta: {\n      ...tableProps.meta,\n      queryKeys: {\n        page: pageKey,\n        perPage: perPageKey,\n        sort: sortKey,\n        filters: filtersKey,\n        joinOperator: joinOperatorKey,\n      },\n    },\n    ...tableProps,\n    columns,\n  });\n\n  return { table, shallow, debounceMs, throttleMs };\n}\n"],"names":["PAGE_KEY","PER_PAGE_KEY","SORT_KEY","FILTERS_KEY","JOIN_OPERATOR_KEY","ARRAY_SEPARATOR","DEBOUNCE_MS","THROTTLE_MS","useDataTable","props","columns","pageCount","initialState","queryKeys","history","debounceMs","throttleMs","clearOnDefault","enableAdvancedFilter","scroll","shallow","startTransition","enableNuqs","tableProps","pageKey","perPageKey","sortKey","filtersKey","joinOperatorKey","queryStateOptions","React","rowSelection","setRowSelection","columnVisibility","setColumnVisibility","columnOrder","setColumnOrder","page","setPage","useQueryState","parseAsInteger","perPage","setPerPage","pagination","onPaginationChange","updaterOrValue","newPagination","columnIds","column","sorting","setSorting","getSortingStateParser","onSortingChange","newSorting","filterableColumns","filterParsers","acc","parseAsArrayOf","parseAsString","filterValues","setFilterValues","useQueryStates","debouncedSetFilterValues","useDebouncedCallback","values","initialColumnFilters","filters","key","value","isMultiSelect","col","processedValue","columnFilters","setColumnFilters","onColumnFiltersChange","prev","next","filterUpdates","filter","prevFilter","useReactTable","getCoreRowModel","getFilteredRowModel","getPaginationRowModel","getSortedRowModel","getFacetedRowModel","getFacetedUniqueValues","getFacetedMinMaxValues"],"mappings":"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"}

package/dist/esm/packages/ui/src/components/table.js

@@ -37,20 +37,20 @@ function n({ className: t, ...e }) {
     }
   );
 }
-function c({ className: t, ...e }) {
+function b({ className: t, ...e }) {
   return /* @__PURE__ */ a(
     "tr",
     {
       "data-slot": "table-row",
       className: d(
-        "ds:hover:bg-muted/50 ds:data-[state=selected]:bg-muted ds:border-b ds:transition-colors",
+        "ds:hover:bg-muted/50 ds:data-[state=selected]:bg-muted ds:border-b ds:border-border ds:transition-colors",
         t
       ),
       ...e
     }
   );
 }
-function b({ className: t, ...e }) {
+function c({ className: t, ...e }) {
   return /* @__PURE__ */ a(
     "th",
     {
@@ -80,8 +80,8 @@ export {
   o as Table,
   n as TableBody,
   i as TableCell,
-  b as TableHead,
+  c as TableHead,
   r as TableHeader,
-  c as TableRow
+  b as TableRow
 };
 //# sourceMappingURL=table.js.map

package/dist/esm/packages/ui/src/components/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":["../../../../../../../../packages/ui/src/components/table.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@dsui/ui/lib/utils\";\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"ds:relative ds:w-full ds:overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"ds:w-full ds:caption-bottom ds:text-sm\", className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"ds:[&_tr]:border-b\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"ds:[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"ds:bg-muted/50 ds:border-t ds:font-medium ds:[&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"ds:hover:bg-muted/50 ds:data-[state=selected]:bg-muted ds:border-b ds:transition-colors\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"ds:text-foreground ds:h-10 ds:px-2 ds:text-left ds:align-middle ds:font-medium ds:whitespace-nowrap ds:[&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"ds:p-2 ds:align-middle ds:whitespace-nowrap ds:[&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"ds:text-muted-foreground ds:mt-4 ds:text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n};\n"],"names":["Table","className","props","jsx","cn","TableHeader","TableBody","TableRow","TableHead","TableCell"],"mappings":";;AAMA,SAASA,EAAM,EAAE,WAAAC,GAAW,GAAGC,KAAwC;AACrE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAU;AAAA,MAEV,UAAA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAWC,EAAG,0CAA0CH,CAAS;AAAA,UAChE,GAAGC;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;AAEA,SAASG,EAAY,EAAE,WAAAJ,GAAW,GAAGC,KAAwC;AAC3E,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,sBAAsBH,CAAS;AAAA,MAC5C,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASI,EAAU,EAAE,WAAAL,GAAW,GAAGC,KAAwC;AACzE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,iCAAiCH,CAAS;AAAA,MACvD,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAeA,SAASK,EAAS,EAAE,WAAAN,GAAW,GAAGC,KAAqC;AACrE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAH;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASM,EAAU,EAAE,WAAAP,GAAW,GAAGC,KAAqC;AACtE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAH;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASO,EAAU,EAAE,WAAAR,GAAW,GAAGC,KAAqC;AACtE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAH;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"table.js","sources":["../../../../../../../../packages/ui/src/components/table.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@dsui/ui/lib/utils\";\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"ds:relative ds:w-full ds:overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"ds:w-full ds:caption-bottom ds:text-sm\", className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"ds:[&_tr]:border-b\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"ds:[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"ds:bg-muted/50 ds:border-t ds:font-medium ds:[&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"ds:hover:bg-muted/50 ds:data-[state=selected]:bg-muted ds:border-b ds:border-border ds:transition-colors\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"ds:text-foreground ds:h-10 ds:px-2 ds:text-left ds:align-middle ds:font-medium ds:whitespace-nowrap ds:[&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"ds:p-2 ds:align-middle ds:whitespace-nowrap ds:[&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"ds:text-muted-foreground ds:mt-4 ds:text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n};\n"],"names":["Table","className","props","jsx","cn","TableHeader","TableBody","TableRow","TableHead","TableCell"],"mappings":";;AAMA,SAASA,EAAM,EAAE,WAAAC,GAAW,GAAGC,KAAwC;AACrE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAU;AAAA,MAEV,UAAA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAWC,EAAG,0CAA0CH,CAAS;AAAA,UAChE,GAAGC;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;AAEA,SAASG,EAAY,EAAE,WAAAJ,GAAW,GAAGC,KAAwC;AAC3E,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,sBAAsBH,CAAS;AAAA,MAC5C,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASI,EAAU,EAAE,WAAAL,GAAW,GAAGC,KAAwC;AACzE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,iCAAiCH,CAAS;AAAA,MACvD,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAeA,SAASK,EAAS,EAAE,WAAAN,GAAW,GAAGC,KAAqC;AACrE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAH;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASM,EAAU,EAAE,WAAAP,GAAW,GAAGC,KAAqC;AACtE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAH;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASO,EAAU,EAAE,WAAAR,GAAW,GAAGC,KAAqC;AACtE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAH;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}