@exegia/corpora-ui 0.17.0 → 0.19.0

package/src/components/blocks/shell/animated-panel.tsx

@@ -0,0 +1,135 @@
+"use client"
+// beui.dev/components/motion/animated-sidebar
+
+import { motion } from "motion/react"
+import { EASE_OUT } from "@/lib/ease.ts"
+import { cn } from "@/lib/utils"
+import type { AnimatedSidebarProps } from "./type"
+import {
+  AnimatedSidebarPanelContext,
+  SIDEBAR_MORPH_TRANSITION,
+  PANEL_TRANSITION,
+  REDUCED_TRANSITION,
+  useAnimatedSidebar
+} from "./utils"
+
+export function AnimatedPanel({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "icon",
+  ariaLabel = "Sidebar",
+  children,
+  className,
+  panelClassName,
+  style,
+  ref,
+  ...props
+}: AnimatedSidebarProps) {
+  const context = useAnimatedSidebar()
+  const sideOpen = context.open[side]
+  const collapsed = collapsible !== "none" && !sideOpen
+  const offcanvas = collapsed && collapsible === "offcanvas"
+  const width = offcanvas
+    ? "0px"
+    : collapsed
+      ? "var(--sidebar-width-icon)"
+      : "var(--sidebar-width)"
+
+  if (context.isMobile) return <div>TODO: Create Mobile nav experience</div>
+
+  return (
+    <motion.aside
+      {...props}
+      ref={ref}
+      initial={false}
+      aria-label={ariaLabel}
+      data-slot="sidebar"
+      data-state={collapsed ? "collapsed" : "expanded"}
+      data-collapsible={collapsible}
+      data-variant={variant}
+      data-side={side}
+      animate={{
+        width,
+        // Swallow the shell's gap-x-2 column gap while off canvas so the
+        // shell edge keeps a constant spacing-2 inset whether the panel is
+        // open (gap + panel + margin) or collapsed (gap + this).
+        ...(side === "right"
+          ? { marginLeft: offcanvas ? "-0.5rem" : "0rem" }
+          : { marginRight: offcanvas ? "-0.5rem" : "0rem" }),
+      }}
+      transition={context.reduce ? { duration: 0 } : SIDEBAR_MORPH_TRANSITION}
+      style={style}
+      className={cn(
+        "group/sidebar relative hidden h-full shrink-0 will-change-[width] md:block",
+        "peer flex!",
+        side === "right" && "order-last",
+        className
+      )}
+    >
+      {side === "right" && !collapsed && (
+        // The handle occupies the shell's gap-x-2 column gap. It must stay
+        // outside the clipping mask below or the gap would never receive
+        // hover — clipping cuts hit-testing, not just painting.
+        <motion.div
+          className="absolute inset-y-0 -left-2 z-10 w-2 cursor-col-resize"
+          initial="idle"
+          whileHover="hover"
+        >
+          <motion.div
+            variants={{ idle: { scaleY: 0 }, hover: { scaleY: 1 } }}
+            transition={
+              context.reduce
+                ? { duration: 0 }
+                : { duration: 0.2, ease: EASE_OUT }
+            }
+            className="h-full w-full bg-radial/decreasing from-amber-300/70 to-amber-500/0 to-40%"
+          />
+        </motion.div>
+      )}
+      {/* The off canvas panel keeps its full width and slides out of the
+          zero-width rail, so mask it to the aside's box here instead of
+          clipping the aside itself — the aside must stay unclipped for the
+          gap handle above to be hoverable. */}
+      <div
+        className={
+          collapsible === "offcanvas"
+            ? "absolute inset-0 overflow-hidden rounded-[inherit]"
+            : "contents"
+        }
+      >
+        <motion.div
+          initial={false}
+          animate={{
+            opacity: offcanvas ? 0 : 1,
+            x: offcanvas ? (side === "left" ? "-100%" : "100%") : "0%",
+          }}
+          transition={context.reduce ? REDUCED_TRANSITION : PANEL_TRANSITION}
+          className={cn(
+            "sticky top-0 flex flex-col overflow-hidden",
+         //   collapsible === "offcanvas" && "w-(--sidebar-width)",
+            // Pin the right panel to the aside's trailing edge so the width
+            // animation expands the panel out of it instead of revealing a
+            // detached strip.
+            side === "right" && "ml-auto",
+
+            // Panels fill the shell's container, not the viewport — the shell
+            // owns its own scrolling, so a bounded host (docs demo, split
+            // view) must bound the panels too. Full-page apps size the shell
+            // itself (e.g., h-svh). The bottom gap comes from the shell
+            // container's padding, so panels only carry their top offset.
+            variant === "floating" && "mx-2 mt-2 h-[calc(100%-0.5rem)]",
+            variant === "inset" && "mt-2 h-[calc(100%-0.5rem)]",
+
+            panelClassName
+          )}
+        >
+          <AnimatedSidebarPanelContext.Provider
+            value={{ collapsed, collapsible, side }}
+          >
+            {children}
+          </AnimatedSidebarPanelContext.Provider>
+        </motion.div>
+      </div>
+    </motion.aside>
+  )
+}

package/src/components/blocks/shell/animated-sidebar-content.tsx

@@ -0,0 +1,19 @@
+import { forwardRef, type HTMLAttributes } from "react"
+import { cn } from "@/lib/utils"
+
+export const AnimatedSidebarContent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(function AnimatedSidebarContent({ className, ...props }, forwardedRef) {
+  return (
+    <div
+      {...props}
+      ref={forwardedRef}
+      data-slot="sidebar-content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-x-hidden overflow-y-auto overscroll-contain px-2 py-2",
+        className
+      )}
+    />
+  )
+})

package/src/components/blocks/shell/animated-sidebar-footer.tsx

@@ -0,0 +1,19 @@
+import { forwardRef, type HTMLAttributes } from "react"
+import { cn } from "@/lib/utils"
+
+export const AnimatedSidebarFooter = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(function AnimatedSidebarFooter({ className, ...props }, forwardedRef) {
+  return (
+    <div
+      {...props}
+      ref={forwardedRef}
+      data-slot="sidebar-footer"
+      className={cn(
+        "flex shrink-0 flex-col gap-2 border-t border-border p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]",
+        className
+      )}
+    />
+  )
+})

package/src/components/blocks/shell/animated-sidebar-group-content.tsx

@@ -0,0 +1,16 @@
+import { forwardRef, type HTMLAttributes } from "react"
+import { cn } from "@/lib/utils"
+
+export const AnimatedSidebarGroupContent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(function AnimatedSidebarGroupContent({ className, ...props }, forwardedRef) {
+  return (
+    <div
+      {...props}
+      ref={forwardedRef}
+      data-slot="sidebar-group-content"
+      className={cn("w-full min-w-0", className)}
+    />
+  )
+})

package/src/components/blocks/shell/animated-sidebar-group-label.tsx

@@ -0,0 +1,29 @@
+import { forwardRef, type HTMLAttributes } from "react"
+import { cn } from "@/lib/utils"
+import { useAnimatedSidebarPanel } from "./utils"
+
+export const AnimatedSidebarGroupLabel = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(function AnimatedSidebarGroupLabel(
+  { children, className, ...props },
+  forwardedRef
+) {
+  const { collapsed } = useAnimatedSidebarPanel()
+
+  return (
+    <div
+      {...props}
+      ref={forwardedRef}
+      aria-hidden={collapsed}
+      data-slot="sidebar-group-label"
+      className={cn(
+        "mb-1 h-7 overflow-hidden px-2 text-[10px] font-medium tracking-[0.14em] text-muted-foreground uppercase transition-opacity",
+        collapsed ? "opacity-0" : "opacity-100",
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+})

package/src/components/blocks/shell/animated-sidebar-group.tsx

@@ -0,0 +1,16 @@
+import { forwardRef, type HTMLAttributes } from "react"
+import { cn } from "@/lib/utils"
+
+export const AnimatedSidebarGroup = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(function AnimatedSidebarGroup({ className, ...props }, forwardedRef) {
+  return (
+    <div
+      {...props}
+      ref={forwardedRef}
+      data-slot="sidebar-group"
+      className={cn("flex w-full min-w-0 flex-col px-1 py-1.5", className)}
+    />
+  )
+})

package/src/components/blocks/shell/animated-sidebar-header.tsx

@@ -0,0 +1,16 @@
+import { forwardRef, type HTMLAttributes } from "react"
+import { cn } from "@/lib/utils"
+
+export const AnimatedSidebarHeader = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(function AnimatedSidebarHeader({ className, ...props }, forwardedRef) {
+  return (
+    <div
+      {...props}
+      ref={forwardedRef}
+      data-slot="sidebar-header"
+      className={cn("flex shrink-0 flex-col gap-2 p-3", className)}
+    />
+  )
+})

package/src/components/blocks/shell/animated-sidebar-menu-button.tsx

@@ -0,0 +1,151 @@
+import type * as React from "react"
+import { ChevronRight } from "lucide-react"
+import { motion } from "motion/react"
+import { SPRING_LAYOUT, SPRING_PRESS } from "@/lib/ease"
+import { cn } from "@/lib/utils"
+import type { AnimatedSidebarMenuButtonProps } from "./type"
+import {
+  LABEL_ENTER_TRANSITION,
+  LABEL_EXIT_TRANSITION,
+  REDUCED_TRANSITION,
+  useAnimatedSidebar,
+  useAnimatedSidebarPanel,
+} from "./utils"
+
+export function AnimatedSidebarMenuButton({
+  children,
+  icon,
+  badge,
+  href,
+  isActive = false,
+  ariaExpanded,
+  disabled = false,
+  closeOnSelect,
+  target,
+  rel,
+  onSelect,
+  className,
+}: AnimatedSidebarMenuButtonProps) {
+  const context = useAnimatedSidebar()
+  const panel = useAnimatedSidebarPanel()
+  const textLabel = typeof children === "string" ? children : undefined
+
+  const select = (
+    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+  ) => {
+    if (disabled) {
+      event.preventDefault()
+      return
+    }
+    onSelect?.()
+    const shouldCloseOnSelect = closeOnSelect ?? ariaExpanded === undefined
+    if (context.isMobile && shouldCloseOnSelect) {
+      context.setOpenMobile(false, panel.side)
+    }
+  }
+
+  const content = (
+    <>
+      {isActive ? (
+        <motion.span
+          layoutId={context.layoutId}
+          transition={context.reduce ? { duration: 0 } : SPRING_LAYOUT}
+          className="absolute inset-0 rounded-xl bg-muted"
+        />
+      ) : null}
+      {icon ? (
+        <span
+          aria-hidden="true"
+          className="relative z-10 grid size-5 shrink-0 place-items-center"
+        >
+          {icon}
+        </span>
+      ) : null}
+      <motion.span
+        initial={false}
+        animate={{
+          opacity: panel.collapsed ? 0 : 1,
+          x: panel.collapsed ? -4 : 0,
+        }}
+        transition={
+          context.reduce
+            ? REDUCED_TRANSITION
+            : panel.collapsed
+              ? LABEL_EXIT_TRANSITION
+              : LABEL_ENTER_TRANSITION
+        }
+        aria-hidden={panel.collapsed}
+        className={cn(
+          "relative z-10 min-w-0 flex-1 truncate",
+          panel.collapsed && "pointer-events-none"
+        )}
+      >
+        {children}
+      </motion.span>
+      {badge && !panel.collapsed ? (
+        <span className="relative z-10 shrink-0 text-xs text-muted-foreground">
+          {badge}
+        </span>
+      ) : null}
+      {ariaExpanded !== undefined ? (
+        <motion.span
+          aria-hidden="true"
+          initial={false}
+          animate={{
+            opacity: panel.collapsed ? 0 : 1,
+            rotate: ariaExpanded ? 90 : 0,
+            x: panel.collapsed ? 4 : 0,
+          }}
+          transition={context.reduce ? { duration: 0 } : SPRING_LAYOUT}
+          className="relative z-10 grid size-4 shrink-0 place-items-center text-muted-foreground"
+        >
+          <ChevronRight className="size-3.5" />
+        </motion.span>
+      ) : null}
+    </>
+  )
+
+  const interactiveClassName = cn(
+    "relative flex min-h-9 w-full min-w-0 items-center gap-2.5 overflow-hidden rounded-xl px-3 text-left text-sm font-medium outline-none",
+    "text-muted-foreground transition-colors hover:text-foreground",
+    "focus-visible:bg-muted/70 focus-visible:ring-2 focus-visible:ring-ring",
+    isActive && "text-foreground",
+    disabled && "cursor-not-allowed opacity-40",
+    className
+  )
+
+  return href ? (
+    <motion.a
+      href={href}
+      target={target}
+      rel={rel ?? (target === "_blank" ? "noreferrer noopener" : undefined)}
+      aria-current={isActive ? "page" : undefined}
+      aria-expanded={ariaExpanded}
+      aria-disabled={disabled || undefined}
+      aria-label={panel.collapsed ? textLabel : undefined}
+      title={panel.collapsed ? textLabel : undefined}
+      tabIndex={disabled ? -1 : undefined}
+      onClick={select}
+      whileTap={context.reduce || disabled ? undefined : { scale: 0.98 }}
+      transition={SPRING_PRESS}
+      className={interactiveClassName}
+    >
+      {content}
+    </motion.a>
+  ) : (
+    <motion.button
+      type="button"
+      disabled={disabled}
+      aria-current={isActive ? "page" : undefined}
+      aria-expanded={ariaExpanded}
+      aria-label={panel.collapsed ? textLabel : undefined}
+      title={panel.collapsed ? textLabel : undefined}
+      onClick={select}
+      whileTap={context.reduce || disabled ? undefined : { scale: 0.98 }}
+      transition={SPRING_PRESS}
+      className={interactiveClassName}
+    >
+      {content}
+    </motion.button>
+  )
+}

package/src/components/blocks/shell/animated-sidebar-menu-item.tsx

@@ -0,0 +1,20 @@
+import { forwardRef } from "react"
+import { motion, type HTMLMotionProps } from "motion/react"
+import { SPRING_LAYOUT } from "@/lib/ease"
+import { cn } from "@/lib/utils"
+
+export const AnimatedSidebarMenuItem = forwardRef<
+  HTMLLIElement,
+  HTMLMotionProps<"li">
+>(function AnimatedSidebarMenuItem({ className, ...props }, forwardedRef) {
+  return (
+    <motion.li
+      {...props}
+      ref={forwardedRef}
+      layout="position"
+      transition={SPRING_LAYOUT}
+      data-slot="sidebar-menu-item"
+      className={cn("relative", className)}
+    />
+  )
+})

package/src/components/blocks/shell/animated-sidebar-menu-sub-button.tsx

@@ -0,0 +1,85 @@
+import type * as React from "react"
+import { motion } from "motion/react"
+import { SPRING_PRESS } from "@/lib/ease"
+import { cn } from "@/lib/utils"
+import type { AnimatedSidebarMenuSubButtonProps } from "./type"
+import { useAnimatedSidebar, useAnimatedSidebarPanel } from "./utils"
+
+export function AnimatedSidebarMenuSubButton({
+  children,
+  icon,
+  href,
+  isActive = false,
+  disabled = false,
+  closeOnSelect = true,
+  target,
+  rel,
+  onSelect,
+  className,
+}: AnimatedSidebarMenuSubButtonProps) {
+  const context = useAnimatedSidebar()
+  const panel = useAnimatedSidebarPanel()
+
+  const select = (
+    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+  ) => {
+    if (disabled) {
+      event.preventDefault()
+      return
+    }
+    onSelect?.()
+    if (context.isMobile && closeOnSelect) {
+      context.setOpenMobile(false, panel.side)
+    }
+  }
+
+  const content = (
+    <>
+      <span
+        aria-hidden="true"
+        className="grid size-4 shrink-0 place-items-center"
+      >
+        {icon ?? <span className="size-1 rounded-full bg-current" />}
+      </span>
+      <span className="min-w-0 flex-1 truncate">{children}</span>
+    </>
+  )
+
+  const interactiveClassName = cn(
+    "flex min-h-8 w-full min-w-0 items-center gap-2 rounded-lg px-2 text-left text-xs outline-none",
+    "text-muted-foreground transition-colors hover:bg-muted/60 hover:text-foreground",
+    "focus-visible:bg-muted/70 focus-visible:ring-2 focus-visible:ring-ring",
+    isActive && "bg-muted/70 text-foreground",
+    disabled && "cursor-not-allowed opacity-40",
+    className
+  )
+
+  return href ? (
+    <motion.a
+      href={href}
+      target={target}
+      rel={rel ?? (target === "_blank" ? "noreferrer noopener" : undefined)}
+      aria-current={isActive ? "page" : undefined}
+      aria-disabled={disabled || undefined}
+      tabIndex={disabled ? -1 : undefined}
+      onClick={select}
+      whileTap={context.reduce || disabled ? undefined : { scale: 0.98 }}
+      transition={SPRING_PRESS}
+      className={interactiveClassName}
+    >
+      {content}
+    </motion.a>
+  ) : (
+    <motion.button
+      type="button"
+      disabled={disabled}
+      aria-current={isActive ? "page" : undefined}
+      onClick={select}
+      whileTap={context.reduce || disabled ? undefined : { scale: 0.98 }}
+      transition={SPRING_PRESS}
+      className={interactiveClassName}
+    >
+      {content}
+    </motion.button>
+  )
+}

package/src/components/blocks/shell/animated-sidebar-menu-sub-item.tsx

@@ -0,0 +1,19 @@
+import { forwardRef } from "react"
+import { motion, type HTMLMotionProps } from "motion/react"
+import { cn } from "@/lib/utils"
+import { SUBMENU_ITEM_VARIANTS } from "./utils"
+
+export const AnimatedSidebarMenuSubItem = forwardRef<
+  HTMLLIElement,
+  HTMLMotionProps<"li">
+>(function AnimatedSidebarMenuSubItem({ className, ...props }, forwardedRef) {
+  return (
+    <motion.li
+      {...props}
+      ref={forwardedRef}
+      variants={SUBMENU_ITEM_VARIANTS}
+      data-slot="sidebar-menu-sub-item"
+      className={cn("relative min-w-0", className)}
+    />
+  )
+})

package/src/components/blocks/shell/animated-sidebar-menu-sub.tsx

@@ -0,0 +1,44 @@
+import { forwardRef } from "react"
+import { AnimatePresence, motion } from "motion/react"
+import { cn } from "@/lib/utils"
+import type { AnimatedSidebarMenuSubProps } from "./type"
+import {
+  SUBMENU_VARIANTS,
+  useAnimatedSidebar,
+  useAnimatedSidebarPanel,
+} from "./utils"
+
+export const AnimatedSidebarMenuSub = forwardRef<
+  HTMLUListElement,
+  AnimatedSidebarMenuSubProps
+>(function AnimatedSidebarMenuSub(
+  { open, children, className, ...props },
+  forwardedRef
+) {
+  const context = useAnimatedSidebar()
+  const panel = useAnimatedSidebarPanel()
+
+  return (
+    <AnimatePresence initial={false} mode="popLayout">
+      {open && !panel.collapsed ? (
+        <motion.ul
+          {...props}
+          ref={forwardedRef}
+          key="sidebar-submenu"
+          variants={context.reduce ? undefined : SUBMENU_VARIANTS}
+          initial={context.reduce ? false : "closed"}
+          animate={context.reduce ? { opacity: 1 } : "open"}
+          exit={context.reduce ? { opacity: 0 } : "closed"}
+          transition={context.reduce ? { duration: 0.12 } : undefined}
+          data-slot="sidebar-menu-sub"
+          className={cn(
+            "relative mt-1 ml-5 flex min-w-0 flex-col gap-0.5 border-l border-border pl-3",
+            className
+          )}
+        >
+          {children}
+        </motion.ul>
+      ) : null}
+    </AnimatePresence>
+  )
+})

package/src/components/blocks/shell/animated-sidebar-menu.tsx

@@ -0,0 +1,26 @@
+import { forwardRef, type HTMLAttributes, type Ref } from "react"
+import { SharedLayoutBg } from "@/components/motion/shared-layout-bg"
+import { cn } from "@/lib/utils"
+
+export const AnimatedSidebarMenu = forwardRef<
+  HTMLUListElement,
+  HTMLAttributes<HTMLUListElement>
+>(function AnimatedSidebarMenu(
+  { children, className, ...props },
+  forwardedRef
+) {
+  return (
+    <SharedLayoutBg
+      {...props}
+      ref={forwardedRef as Ref<HTMLElement>}
+      as="ul"
+      inset={0}
+      pillClassName="rounded-xl bg-muted/70"
+      pillContainerClassName="inset-y-auto top-0 h-9"
+      data-slot="sidebar-menu"
+      className={cn("flex w-full min-w-0 list-none flex-col gap-0.5", className)}
+    >
+      {children}
+    </SharedLayoutBg>
+  )
+})

package/src/components/blocks/shell/index.ts

@@ -4,4 +4,22 @@ export type * from "./type"
 export * from "./use-shell-panels"
 export * from "./utils"
 
+export * from "./animated-panel"
+export * from "./animated-panel-inset"
+export * from "./animated-panel-provider"
+export * from "./animated-panel-trigger"
+
+export * from "./animated-sidebar-header"
+export * from "./animated-sidebar-content"
+export * from "./animated-sidebar-footer"
+export * from "./animated-sidebar-group"
+export * from "./animated-sidebar-group-label"
+export * from "./animated-sidebar-group-content"
+export * from "./animated-sidebar-menu"
+export * from "./animated-sidebar-menu-item"
+export * from "./animated-sidebar-menu-sub"
+export * from "./animated-sidebar-menu-sub-item"
+export * from "./animated-sidebar-menu-sub-button"
+export * from "./animated-sidebar-menu-button"
+
 export { ShellLayout as default }