@djangocfg/ui-core 2.1.17 → 2.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.17",
+  "version": "2.1.19",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -102,7 +102,7 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.17",
+    "@djangocfg/typescript-config": "^2.1.19",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/resizable.tsx

@@ -8,97 +8,155 @@ import { DragHandleDots2Icon } from "@radix-ui/react-icons"
 const ResizablePanelGroup = ({
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
-    className={cn(
-      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className
-    )}
-    {...props}
-  />
-)
-
-const ResizablePanel = ResizablePrimitive.Panel
-
-// Size variants for the handle hit area
-const sizeVariants = {
-  sm: { hitArea: 4, indicator: 4 },   // 4px hit area, 4px indicator height
-  md: { hitArea: 8, indicator: 8 },   // 8px hit area, 8px indicator height
-  lg: { hitArea: 12, indicator: 12 }, // 12px hit area, 12px indicator height
-} as const
-
-export interface ResizableHandleProps
-  extends React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> {
-  /** Show classic dots handle icon */
-  withHandle?: boolean
-  /** Size variant - controls hit area and indicator size */
-  size?: keyof typeof sizeVariants
-  /** Show visual indicator on hover */
-  showIndicator?: boolean
-  /** Custom indicator height in pixels (overrides size variant) */
-  indicatorHeight?: number
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => {
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  // SSR fallback - render static flex container
+  if (!mounted) {
+    return (
+      <div
+        className={cn(
+          "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+          className
+        )}
+      >
+        {props.children}
+      </div>
+    )
+  }
+
+  return (
+    <ResizablePrimitive.PanelGroup
+      className={cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const ResizablePanel = React.forwardRef<
+  React.ElementRef<typeof ResizablePrimitive.Panel>,
+  React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Panel>
+>(({ className, defaultSize, minSize, maxSize, children, ...props }, ref) => {
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  // SSR fallback - render static div with default size
+  if (!mounted) {
+    const direction = (props as any)['data-panel-group-direction']
+    const sizeStyle = defaultSize
+      ? direction === 'vertical'
+        ? { height: `${defaultSize}%` }
+        : { width: `${defaultSize}%` }
+      : { flex: 1 }
+
+    return (
+      <div className={cn("overflow-hidden", className)} style={sizeStyle}>
+        {children}
+      </div>
+    )
+  }
+
+  return (
+    <ResizablePrimitive.Panel
+      ref={ref}
+      className={className}
+      defaultSize={defaultSize}
+      minSize={minSize}
+      maxSize={maxSize}
+      {...props}
+    >
+      {children}
+    </ResizablePrimitive.Panel>
+  )
+})
+ResizablePanel.displayName = "ResizablePanel"
+
+export interface ResizableHandleProps extends React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> {
+  withHandle?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  showIndicator?: boolean;
+  indicatorHeight?: number;
 }
 
 const ResizableHandle = ({
   withHandle,
-  size = "md",
-  showIndicator = true,
-  indicatorHeight,
   className,
+  size = 'md',
+  showIndicator = false,
+  indicatorHeight = 32,
   ...props
 }: ResizableHandleProps) => {
-  const variant = sizeVariants[size]
-  const hitAreaPx = variant.hitArea
-  const indicatorPx = indicatorHeight ?? variant.indicator * 4 // 32px default for md
+  const [mounted, setMounted] = React.useState(false)
+
+  React.useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  // Size variants for hit area
+  const sizeClasses = {
+    sm: 'after:w-0.5',
+    md: 'after:w-1',
+    lg: 'after:w-1.5',
+  }
+
+  // SSR fallback - render static border
+  if (!mounted) {
+    return (
+      <div
+        className={cn(
+          "bg-border w-px",
+          "data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full",
+          className
+        )}
+      />
+    )
+  }
 
   return (
     <ResizablePrimitive.PanelResizeHandle
       className={cn(
-        "group/resize relative flex items-center justify-center",
-        "bg-border transition-colors",
-        "hover:bg-primary/30 active:bg-primary/50",
-        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
-        // Horizontal (default)
-        "w-px",
-        // Vertical
-        "data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full",
+        "relative flex items-center justify-center bg-border",
+        "w-px h-full",
+        "hover:bg-primary/20 active:bg-primary/30",
+        "transition-colors",
+        // Invisible hit area for easier dragging
+        "after:absolute after:inset-y-0 after:left-1/2 after:-translate-x-1/2",
+        sizeClasses[size],
+        "data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:h-px",
+        "data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:inset-x-0",
+        "data-[panel-group-direction=vertical]:after:top-1/2 data-[panel-group-direction=vertical]:after:-translate-y-1/2",
+        "data-[panel-group-direction=vertical]:after:h-0.5 data-[panel-group-direction=vertical]:after:w-full",
+        "data-[panel-group-direction=vertical]:after:translate-x-0",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
         className
       )}
-      style={{
-        // Expand hit area without changing visual width
-        // Using padding to increase clickable area
-      }}
       {...props}
     >
-      {/* Expanded hit area - invisible but clickable */}
-      <div
-        className={cn(
-          "absolute inset-y-0 cursor-ew-resize z-10",
-          "data-[panel-group-direction=vertical]:inset-x-0 data-[panel-group-direction=vertical]:inset-y-auto",
-          "data-[panel-group-direction=vertical]:cursor-ns-resize"
-        )}
-        style={{
-          left: -hitAreaPx / 2,
-          right: -hitAreaPx / 2,
-        }}
-      />
-
-      {/* Visual indicator - appears on hover */}
+      {/* Optional pill indicator */}
       {showIndicator && (
         <div
           className={cn(
-            "absolute rounded-full bg-border opacity-0 transition-opacity",
-            "group-hover/resize:opacity-100 group-active/resize:bg-primary/50",
-            // Horizontal
-            "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-1",
-            // Vertical
-            "data-[panel-group-direction=vertical]:w-auto data-[panel-group-direction=vertical]:h-1",
+            "absolute z-10 rounded-full bg-border opacity-0 hover:opacity-100 transition-opacity",
+            "w-1 data-[panel-group-direction=vertical]:w-auto data-[panel-group-direction=vertical]:h-1"
           )}
-          style={{ height: indicatorPx }}
+          style={{
+            height: `${indicatorHeight}px`,
+            width: '4px',
+          }}
         />
       )}
 
-      {/* Classic dots handle */}
+      {/* Optional dots handle */}
       {withHandle && (
         <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
           <DragHandleDots2Icon className="h-2.5 w-2.5" />