@exegia/corpora-ui 0.17.0 → 0.18.0

package/src/components/ui/sheet.tsx

@@ -0,0 +1,135 @@
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-3 right-3"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-0.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn(
+        "font-heading text-base font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/index.css

@@ -191,4 +191,4 @@
   html {
     @apply font-sans;
     }
-}
+}

package/src/index.ts

@@ -43,13 +43,25 @@ export * from "./components/blocks/nav/sidebar-block"
 export * from "./components/blocks/nav/sidebar"
 export * from "./components/blocks/shell"
 export { default as ShellLayout } from "./components/blocks/shell"
+export * from "./components/blocks/scaffold"
 export { default as Layout } from "./components/blocks/layout"
 export * from "./components/blocks/profile/profile-card-block"
 
 // motion primitives
-export * from "./components/motion/animated-sidebar"
 export * from "./components/motion/shared-layout-bg"
 
+// The v0.17 sidebar monolith became the shell block's AnimatedPanel parts.
+// `blocks/shell` above already exports every part under its new name; these
+// aliases keep the published AnimatedSidebar* names working for consumers.
+// `MobileSidebar` is intentionally absent — AnimatedPanel carries a TODO for
+// the replacement mobile experience.
+export {
+  AnimatedPanel as AnimatedSidebar,
+  AnimatedPanelProvider as AnimatedSidebarProvider,
+  AnimatedPanelTrigger as AnimatedSidebarTrigger,
+  AnimatedPanelInset as AnimatedSidebarInset,
+} from "./components/blocks/shell"
+
 // lib
 export * from "./lib/auth-accent"
 export * from "./lib/ease"

package/src/lib/ease.ts

@@ -1,3 +1,5 @@
+import type { Transition, Variants } from "motion/react"
+
 export const EASE_OUT = [0.16, 1, 0.3, 1] as const;
 export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;
 export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;
@@ -51,3 +53,27 @@ export const SPRING_GLIDE = {
   damping: 50,
   mass: 0.5,
 } as const;
+
+
+// This needs a softer layout spring than the app defaults, so the overflow group
+// stays visually attached to the toggle while entering and leaving.
+export const SHELL_TRANSITION: Transition = {
+  type: "spring",
+  stiffness: 220,
+  damping: 17,
+  mass: 0.85,
+};
+
+export const ICON_VARIANTS: Variants = {
+  hidden: { opacity: 0, filter: "blur(3px)" },
+  visible: {
+    opacity: 1,
+    filter: "blur(0px)",
+    transition: { duration: 0.18, ease: EASE_OUT },
+  },
+  exit: {
+    opacity: 0,
+    filter: "blur(3px)",
+    transition: { duration: 0.18, ease: EASE_OUT },
+  },
+};

package/src/lib/hooks/use-hover-capable.ts

@@ -0,0 +1,23 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+/**
+ * Returns true only on devices that have a true hover (mouse / trackpad).
+ * Touch devices fire phantom `:hover` on tap that sticks until tap-elsewhere
+ * — gate hover-only effects (scale lifts, magnetic pulls) behind this.
+ */
+export function useHoverCapable() {
+  const [canHover, setCanHover] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mq = window.matchMedia("(hover: hover) and (pointer: fine)");
+    const update = () => setCanHover(mq.matches);
+    update();
+    mq.addEventListener?.("change", update);
+    return () => mq.removeEventListener?.("change", update);
+  }, []);
+
+  return canHover;
+}

package/dist-lib/components/motion/animated-sidebar.d.ts

@@ -1,106 +0,0 @@
-import { HTMLMotionProps } from 'motion/react';
-import { ButtonHTMLAttributes, CSSProperties, HTMLAttributes, ReactNode } from 'react';
-export type SidebarSide = "left" | "right";
-/** Open flags keyed by the side. Sides left out stay uncontrolled / at their
- * default — there is no per-side prop, the record IS the API. */
-export type SidebarOpenState = Partial<Record<SidebarSide, boolean>>;
-type SidebarVariant = "sidebar" | "floating" | "inset";
-type SidebarCollapsible = "offcanvas" | "icon" | "none";
-interface AnimatedSidebarContextValue {
-    isMobile: boolean;
-    layoutId: string;
-    /** Desktop open state, keyed by side. */
-    open: Record<SidebarSide, boolean>;
-    /** Mobile overlay open state, keyed by side. */
-    openMobile: Record<SidebarSide, boolean>;
-    reduce: boolean;
-    setOpen: (open: boolean, side: SidebarSide) => void;
-    setOpenMobile: (open: boolean, side: SidebarSide) => void;
-    /** Mobile-aware: toggles the overlay below md, the docked panel above. */
-    toggleSidebar: (side: SidebarSide) => void;
-    triggerRefs: Record<SidebarSide, React.RefObject<HTMLButtonElement | null>>;
-}
-export declare function useAnimatedSidebar(): AnimatedSidebarContextValue;
-type SidebarProviderStyle = CSSProperties & {
-    "--sidebar-width"?: string;
-    "--sidebar-width-icon"?: string;
-    "--sidebar-width-mobile"?: string;
-};
-export interface AnimatedSidebarProviderProps extends HTMLAttributes<HTMLDivElement> {
-    /** Controlled desktop open state, keyed by the side. A side left undefined
-     * stays uncontrolled. */
-    open?: SidebarOpenState;
-    /** Initial desktop open state, merged over `{ left: true, right: false }`. */
-    defaultOpen?: SidebarOpenState;
-    onOpenChange?: (open: boolean, side: SidebarSide) => void;
-    /** Controlled mobile overlay state, keyed by side. */
-    openMobile?: SidebarOpenState;
-    /** Initial mobile overlay state — every side starts closed. */
-    defaultOpenMobile?: SidebarOpenState;
-    onOpenMobileChange?: (open: boolean, side: SidebarSide) => void;
-    style?: SidebarProviderStyle;
-}
-export declare function AnimatedSidebarProvider({ children, open, defaultOpen, onOpenChange, openMobile, defaultOpenMobile, onOpenMobileChange, className, style, ...props }: AnimatedSidebarProviderProps): import("react").JSX.Element;
-export interface AnimatedSidebarProps extends Omit<HTMLMotionProps<"aside">, "children"> {
-    children?: ReactNode;
-    side?: SidebarSide;
-    variant?: SidebarVariant;
-    collapsible?: SidebarCollapsible;
-    ariaLabel?: string;
-    panelClassName?: string;
-}
-export declare const AnimatedSidebar: import('react').ForwardRefExoticComponent<Omit<AnimatedSidebarProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
-export interface AnimatedSidebarTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    side?: SidebarSide;
-}
-export declare const AnimatedSidebarTrigger: import('react').ForwardRefExoticComponent<AnimatedSidebarTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
-export interface AnimatedSidebarCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    side?: SidebarSide;
-}
-export declare const AnimatedSidebarClose: import('react').ForwardRefExoticComponent<AnimatedSidebarCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
-export interface AnimatedSidebarInsetProps extends HTMLMotionProps<"main"> {
-}
-export declare const AnimatedSidebarInset: import('react').ForwardRefExoticComponent<Omit<AnimatedSidebarInsetProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
-export declare const AnimatedSidebarHeader: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const AnimatedSidebarContent: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const AnimatedSidebarFooter: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const AnimatedSidebarGroup: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const AnimatedSidebarGroupLabel: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const AnimatedSidebarGroupContent: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const AnimatedSidebarMenu: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & import('react').RefAttributes<HTMLUListElement>>;
-export declare const AnimatedSidebarMenuItem: import('react').ForwardRefExoticComponent<Omit<HTMLMotionProps<"li">, "ref"> & import('react').RefAttributes<HTMLLIElement>>;
-export interface AnimatedSidebarMenuSubProps extends Omit<HTMLMotionProps<"ul">, "children"> {
-    open: boolean;
-    children?: ReactNode;
-}
-export declare const AnimatedSidebarMenuSub: import('react').ForwardRefExoticComponent<Omit<AnimatedSidebarMenuSubProps, "ref"> & import('react').RefAttributes<HTMLUListElement>>;
-export declare const AnimatedSidebarMenuSubItem: import('react').ForwardRefExoticComponent<Omit<HTMLMotionProps<"li">, "ref"> & import('react').RefAttributes<HTMLLIElement>>;
-export interface AnimatedSidebarMenuSubButtonProps {
-    children: ReactNode;
-    icon?: ReactNode;
-    href?: string;
-    isActive?: boolean;
-    disabled?: boolean;
-    closeOnSelect?: boolean;
-    target?: "_blank" | "_self" | "_parent" | "_top";
-    rel?: string;
-    onSelect?: () => void;
-    className?: string;
-}
-export declare function AnimatedSidebarMenuSubButton({ children, icon, href, isActive, disabled, closeOnSelect, target, rel, onSelect, className, }: AnimatedSidebarMenuSubButtonProps): import("react").JSX.Element;
-export interface AnimatedSidebarMenuButtonProps {
-    children: ReactNode;
-    icon?: ReactNode;
-    badge?: ReactNode;
-    href?: string;
-    isActive?: boolean;
-    ariaExpanded?: boolean;
-    disabled?: boolean;
-    closeOnSelect?: boolean;
-    target?: "_blank" | "_self" | "_parent" | "_top";
-    rel?: string;
-    onSelect?: () => void;
-    className?: string;
-}
-export declare function AnimatedSidebarMenuButton({ children, icon, badge, href, isActive, ariaExpanded, disabled, closeOnSelect, target, rel, onSelect, className, }: AnimatedSidebarMenuButtonProps): import("react").JSX.Element;
-export {};