@djangocfg/ui-core 2.1.411 → 2.1.413

package/src/components/layout/stack/index.tsx

@@ -0,0 +1,349 @@
+"use client"
+
+import { cva } from "class-variance-authority"
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+
+import { cn } from "../../../lib/utils"
+
+interface ItemDimension {
+  itemId: number
+  size: number
+}
+
+type Side = "top" | "bottom"
+
+function getDataState(isExpanded: boolean) {
+  return isExpanded ? "expanded" : "collapsed"
+}
+
+interface StackContextValue {
+  side: Side
+  childrenCount: number
+  itemCount: number
+  expandedItemCount: number
+  gap: number
+  scale: number
+  offset: number
+  expandOnHover: boolean
+  isExpanded: boolean
+  isInteracting: boolean
+  dimensions: ItemDimension[]
+  setDimensions: React.Dispatch<React.SetStateAction<ItemDimension[]>>
+}
+
+const StackContext = React.createContext<StackContextValue | null>(null)
+
+function useStackContext(consumerName: string) {
+  const context = React.useContext(StackContext)
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`Stack\``)
+  }
+  return context
+}
+
+interface StackProps extends React.ComponentProps<"div"> {
+  side?: Side
+  itemCount?: number
+  expandedItemCount?: number
+  gap?: number
+  scale?: number
+  offset?: number
+  expandOnHover?: boolean
+  asChild?: boolean
+}
+
+function Stack(props: StackProps) {
+  const {
+    side = "bottom",
+    itemCount = 3,
+    expandedItemCount,
+    gap = 8,
+    scale = 0.05,
+    offset = 10,
+    className,
+    children,
+    style,
+    onMouseEnter: onMouseEnterProp,
+    onMouseLeave: onMouseLeaveProp,
+    onMouseMove: onMouseMoveProp,
+    onPointerDown: onPointerDownProp,
+    onPointerUp: onPointerUpProp,
+    expandOnHover = false,
+    asChild,
+    ...rootProps
+  } = props
+
+  const [isExpanded, setIsExpanded] = React.useState(false)
+  const [isInteracting, setIsInteracting] = React.useState(false)
+  const [dimensions, setDimensions] = React.useState<ItemDimension[]>([])
+
+  const childrenArray = React.Children.toArray(children).filter(
+    React.isValidElement,
+  )
+  const childrenCount = childrenArray.length
+
+  const effectiveExpandedItemCount = expandedItemCount ?? childrenCount
+
+  const onMouseEnter = React.useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      onMouseEnterProp?.(event)
+      if (event.defaultPrevented) return
+
+      if (expandOnHover) {
+        setIsExpanded(true)
+      }
+    },
+    [expandOnHover, onMouseEnterProp],
+  )
+
+  const onMouseMove = React.useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      onMouseMoveProp?.(event)
+      if (event.defaultPrevented) return
+
+      if (expandOnHover) {
+        setIsExpanded(true)
+      }
+    },
+    [expandOnHover, onMouseMoveProp],
+  )
+
+  const onMouseLeave = React.useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      onMouseLeaveProp?.(event)
+      if (event.defaultPrevented) return
+
+      if (expandOnHover && !isInteracting) {
+        setIsExpanded(false)
+      }
+    },
+    [expandOnHover, isInteracting, onMouseLeaveProp],
+  )
+
+  const onPointerDown = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      onPointerDownProp?.(event)
+      if (event.defaultPrevented) return
+
+      setIsInteracting(true)
+    },
+    [onPointerDownProp],
+  )
+
+  const onPointerUp = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      onPointerUpProp?.(event)
+      if (event.defaultPrevented) return
+
+      setIsInteracting(false)
+    },
+    [onPointerUpProp],
+  )
+
+  const contextValue = React.useMemo<StackContextValue>(
+    () => ({
+      side,
+      childrenCount,
+      itemCount,
+      expandedItemCount: effectiveExpandedItemCount,
+      gap,
+      scale,
+      offset,
+      expandOnHover,
+      isExpanded,
+      isInteracting,
+      dimensions,
+      setDimensions,
+    }),
+    [
+      side,
+      childrenCount,
+      itemCount,
+      effectiveExpandedItemCount,
+      gap,
+      scale,
+      offset,
+      expandOnHover,
+      isExpanded,
+      isInteracting,
+      dimensions,
+    ],
+  )
+
+  const RootPrimitive = asChild ? Slot : "div"
+
+  return (
+    <StackContext.Provider value={contextValue}>
+      <RootPrimitive
+        data-slot="stack"
+        data-state={getDataState(isExpanded)}
+        onMouseEnter={onMouseEnter}
+        onMouseMove={onMouseMove}
+        onMouseLeave={onMouseLeave}
+        onPointerDown={onPointerDown}
+        onPointerUp={onPointerUp}
+        {...rootProps}
+        className={cn("relative w-full", className)}
+        style={
+          {
+            "--gap": `${gap}px`,
+            "--offset": `${offset}px`,
+            "--scale": scale,
+            ...style,
+          } as React.CSSProperties
+        }
+      >
+        {childrenArray.map((child, index) => (
+          <StackItemWrapper key={index} index={index}>
+            {child}
+          </StackItemWrapper>
+        ))}
+      </RootPrimitive>
+    </StackContext.Provider>
+  )
+}
+
+const stackItemWrapperVariants = cva(
+  "absolute w-full transition-all duration-300 ease-out",
+  {
+    variants: {
+      side: {
+        top: [
+          "top-0 left-0 origin-top",
+          "translate-y-[calc(var(--translate)*-1)] scale-[var(--item-scale)]",
+          "after:absolute after:top-full after:left-0 after:w-full after:content-['']",
+        ],
+        bottom: [
+          "bottom-0 left-0 origin-bottom",
+          "translate-y-[var(--translate)] scale-[var(--item-scale)]",
+          "after:absolute after:bottom-full after:left-0 after:w-full after:content-['']",
+        ],
+      },
+      isExpanded: {
+        true: "after:h-[calc(var(--gap)+1px)]",
+        false: "",
+      },
+      isVisible: {
+        true: "",
+        false: "pointer-events-none",
+      },
+    },
+  },
+)
+
+type StackItemWrapperElement = HTMLDivElement
+
+interface StackItemWrapperProps extends React.ComponentProps<"div"> {
+  index: number
+}
+
+function StackItemWrapper(props: StackItemWrapperProps) {
+  const { children, className, index, style, ...itemProps } = props
+
+  const {
+    side,
+    childrenCount,
+    itemCount,
+    expandedItemCount,
+    gap,
+    scale,
+    offset,
+    isExpanded,
+    dimensions,
+    setDimensions,
+  } = useStackContext("StackItemWrapper")
+
+  const itemRef = React.useRef<StackItemWrapperElement>(null)
+
+  const isFront = index === 0
+  const isVisible = isExpanded ? index < expandedItemCount : index < itemCount
+
+  React.useEffect(() => {
+    const itemNode = itemRef.current
+    if (itemNode) {
+      const rect = itemNode.getBoundingClientRect()
+      const measuredHeight = rect.height
+      const currentScale = 1 - index * scale
+      const naturalHeight = measuredHeight / currentScale
+
+      setDimensions((d) => {
+        const existing = d.find((item) => item.itemId === index)
+        if (!existing) {
+          return [...d, { itemId: index, size: naturalHeight }]
+        }
+        return d
+      })
+    }
+  }, [index, scale, setDimensions])
+
+  const itemsSizeBefore = React.useMemo(() => {
+    return dimensions.reduce((prev, curr) => {
+      if (curr.itemId >= index) return prev
+      return prev + curr.size
+    }, 0)
+  }, [dimensions, index])
+
+  const itemScale = isExpanded ? 1 : 1 - index * scale
+  const translateValue = isExpanded
+    ? index * gap + itemsSizeBefore
+    : index * offset
+  const zIndex = childrenCount - index
+
+  const opacity = !isVisible ? 0 : isExpanded ? 1 : 1 - index * 0.15
+
+  return (
+    <div
+      ref={itemRef}
+      data-slot="stack-item-wrapper"
+      data-index={index}
+      data-front={isFront}
+      data-visible={isVisible}
+      data-expanded={isExpanded}
+      className={cn(
+        stackItemWrapperVariants({ side, isExpanded, isVisible, className }),
+      )}
+      style={
+        {
+          "--translate": `${translateValue}px`,
+          "--item-scale": itemScale,
+          zIndex,
+          opacity,
+          ...style,
+        } as React.CSSProperties
+      }
+      {...itemProps}
+    >
+      <div
+        data-index={index}
+        data-position={isFront ? "front" : "back"}
+        data-state={getDataState(isExpanded)}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+interface StackItemProps extends React.ComponentProps<"div"> {
+  asChild?: boolean
+}
+
+function StackItem(props: StackItemProps) {
+  const { asChild, className, ...itemProps } = props
+
+  const ItemPrimitive = asChild ? Slot : "div"
+
+  return (
+    <ItemPrimitive
+      data-slot="stack-item"
+      {...itemProps}
+      className={cn(
+        "rounded-lg border bg-card p-4 shadow-sm transition-shadow duration-200 hover:shadow-md",
+        className,
+      )}
+    />
+  )
+}
+
+export { Stack, StackItem, type StackProps }

package/src/components/navigation/context-menu/index.tsx

@@ -63,7 +63,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "z-[700] max-h-[--radix-context-menu-content-available-height] min-w-32 overflow-y-auto overflow-x-hidden rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-[700] max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-[var(--radius-popover)] border bg-popover backdrop-blur-xl p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
@@ -85,8 +85,9 @@ const ContextMenuItem = React.forwardRef<
     ref={ref}
     data-variant={variant}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-[var(--radius-sm)] px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive",
+      "relative flex cursor-default select-none items-center gap-2 rounded-[var(--radius-sm)] px-2 py-1 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground",
+      "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive [&[data-variant=destructive]_svg]:text-destructive",
       inset && "pl-8",
       className
     )}
@@ -102,7 +103,8 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-[var(--radius-sm)] py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center gap-2 rounded-[var(--radius-sm)] py-1 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "[&_svg]:size-4 [&_svg]:shrink-0",
       className
     )}
     checked={checked}
@@ -126,7 +128,8 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-[var(--radius-sm)] py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center gap-2 rounded-[var(--radius-sm)] py-1 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "[&_svg]:size-4 [&_svg]:shrink-0",
       className
     )}
     {...props}
@@ -178,7 +181,7 @@ const ContextMenuShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "ml-auto pl-4 text-xs tabular-nums tracking-wide text-muted-foreground",
         className
       )}
       {...props}