@exegia/corpora-ui 0.16.0 → 0.18.0

package/src/components/blocks/shell/use-shell-panels.ts

@@ -2,10 +2,10 @@
 
 import { useCallback, useMemo, useState } from "react"
 
-import type { SidebarSide } from "@/components/motion/animated-sidebar"
 import type {
   ShellPanelControlProps,
   ShellPanelControls,
+  SidebarSide,
   UseShellPanelsOptions,
 } from "./type"
 

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

@@ -1,2 +1,143 @@
-
 export const TITLE_BAR_HEIGHT = 48
+// The desktop rail settles at a hard zero-width boundary. Keep the spring
+// critically damped so it cannot overshoot, pause against that boundary, and
+// then snap back during the final frame.
+import { EASE_OUT, EASE_DRAWER } from "@/lib/ease.ts"
+import type { Variants } from "motion/react"
+import { createContext, useContext, useSyncExternalStore } from "react"
+import type {
+  AnimatedSidebarContextValue,
+  AnimatedSidebarPanelContextValue,
+} from "./type"
+
+export const SIDEBAR_MORPH_TRANSITION = {
+  type: "spring",
+  stiffness: 380,
+  damping: 35,
+  mass: 0.75,
+} as const
+
+export const LABEL_ENTER_TRANSITION = {
+  duration: 0.2,
+  delay: 0.08,
+  ease: EASE_OUT,
+} as const
+
+export const LABEL_EXIT_TRANSITION = {
+  duration: 0.12,
+  ease: EASE_OUT,
+} as const
+
+export const PANEL_TRANSITION = {
+  duration: 0.36,
+  ease: EASE_DRAWER,
+} as const
+
+export const REDUCED_TRANSITION = {
+  duration: 0.16,
+  ease: EASE_OUT,
+} as const
+
+const SUBMENU_TRANSITION = {
+  duration: 0.18,
+  ease: EASE_OUT,
+} as const
+
+export const SUBMENU_VARIANTS: Variants = {
+  closed: {
+    opacity: 0,
+    clipPath: "inset(0 0 100% 0 round 8px)",
+    transition: {
+      duration: 0.14,
+      ease: EASE_OUT,
+      staggerChildren: 0.025,
+      staggerDirection: -1,
+    },
+  },
+  open: {
+    opacity: 1,
+    clipPath: "inset(0 0 0% 0 round 8px)",
+    transition: {
+      duration: 0.2,
+      delayChildren: 0.035,
+      ease: EASE_OUT,
+      staggerChildren: 0.045,
+    },
+  },
+}
+
+export const SUBMENU_ITEM_VARIANTS: Variants = {
+  closed: {
+    opacity: 0,
+    y: -6,
+    filter: "blur(3px)",
+  },
+  open: {
+    opacity: 1,
+    y: 0,
+    filter: "blur(0px)",
+    transition: SUBMENU_TRANSITION,
+  },
+}
+
+export const FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])",
+].join(",")
+
+export const MOBILE_QUERY = "(max-width: 767px)"
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+
+export const AnimatedSidebarContext =
+  createContext<AnimatedSidebarContextValue | null>(null)
+
+export const AnimatedSidebarPanelContext =
+  createContext<AnimatedSidebarPanelContextValue | null>(null)
+
+export function useAnimatedSidebar() {
+  const context = useContext(AnimatedSidebarContext)
+  if (!context) {
+    throw new Error(
+      "useAnimatedSidebar must be used inside AnimatedPanelProvider."
+    )
+  }
+  return context
+}
+
+function subscribeToMobileQuery(callback: () => void) {
+  const query = window.matchMedia(MOBILE_QUERY)
+  query.addEventListener("change", callback)
+  return () => query.removeEventListener("change", callback)
+}
+
+export function getMobileSnapshot() {
+  return window.matchMedia(MOBILE_QUERY).matches
+}
+
+export function getServerMobileSnapshot() {
+  return false
+}
+
+export function useIsMobile() {
+  return useSyncExternalStore(
+    subscribeToMobileQuery,
+    getMobileSnapshot,
+    getServerMobileSnapshot
+  )
+}
+
+
+export function useAnimatedSidebarPanel() {
+  const context = useContext(AnimatedSidebarPanelContext)
+  if (!context) {
+    throw new Error(
+      "Animated Sidebar parts must be used inside AnimatedPanel."
+    )
+  }
+  return context
+}

package/src/components/docs/demo-controls.tsx

@@ -124,7 +124,7 @@ export function DemoStage({
       <div
         className={
           canvasClassName ??
-          "flex min-h-32 w-full items-center justify-center rounded-lg"
+          "flex min-h-24 max-h-32 w-full items-center justify-center rounded-lg"
         }
       >
         {children}

package/src/components/motion/overflow-actions.tsx

@@ -0,0 +1,376 @@
+"use client";
+// beui.dev/components/blocks/overflow-actions
+
+import { MoreHorizontal, X } from "lucide-react";
+import {
+  AnimatePresence,
+  motion,
+  useReducedMotion,
+  type Transition,
+  type Variants,
+} from "motion/react";
+import {
+  useCallback,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { EASE_OUT } from "@/lib/ease";
+import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
+import { cn } from "@/lib/utils";
+
+export type OverflowActionsSize = "sm" | "md";
+
+export type OverflowActionItem = {
+  id: string;
+  label: ReactNode;
+  icon?: ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  ariaLabel?: string;
+};
+
+export type OverflowActionsClassNames = {
+  root?: string;
+  track?: string;
+  action?: string;
+  primaryAction?: string;
+  overflowAction?: string;
+  toggle?: string;
+  icon?: string;
+  label?: string;
+};
+
+export interface OverflowActionsProps {
+  primaryActions: OverflowActionItem[];
+  overflowActions: OverflowActionItem[];
+  expanded?: boolean;
+  defaultExpanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  onAction?: (item: OverflowActionItem) => void;
+  collapseOnAction?: boolean;
+  size?: OverflowActionsSize;
+  openLabel?: string;
+  closeLabel?: string;
+  className?: string;
+  classNames?: OverflowActionsClassNames;
+}
+
+// This needs a softer layout spring than the app defaults, so the overflow group
+// stays visually attached to the toggle while entering and leaving.
+const SHELL_TRANSITION: Transition = {
+  type: "spring",
+  stiffness: 220,
+  damping: 17,
+  mass: 0.85,
+};
+
+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 },
+  },
+};
+
+const OVERFLOW_ACTION_VARIANTS: Variants = {
+  hidden: { opacity: 0, filter: "blur(4px)" },
+  visible: { opacity: 1, filter: "blur(0px)" },
+  exit: { opacity: 0, filter: "blur(4px)" },
+};
+
+const TRACK_SIZE_CLASS: Record<OverflowActionsSize, string> = {
+  sm: "gap-1 p-1 text-xs",
+  md: "gap-1.5 p-1.5 text-sm",
+};
+
+const GROUP_GAP_CLASS: Record<OverflowActionsSize, string> = {
+  sm: "gap-1",
+  md: "gap-1.5",
+};
+
+const ACTION_SIZE_CLASS: Record<OverflowActionsSize, string> = {
+  sm: "h-8 min-w-8 gap-1.5 px-3",
+  md: "h-9 min-w-9 gap-2 px-3.5",
+};
+
+const TOGGLE_SIZE_CLASS: Record<OverflowActionsSize, string> = {
+  sm: "h-8 w-8",
+  md: "h-9 w-9",
+};
+
+const ICON_SIZE_CLASS: Record<OverflowActionsSize, string> = {
+  sm: "h-3.5 w-3.5",
+  md: "h-4 w-4",
+};
+
+function useControllableExpanded({
+  expanded,
+  defaultExpanded,
+  onExpandedChange,
+}: {
+  expanded?: boolean;
+  defaultExpanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+}) {
+  const [internalExpanded, setInternalExpanded] = useState(
+    defaultExpanded ?? false,
+  );
+  const isControlled = expanded !== undefined;
+  const value = expanded ?? internalExpanded;
+
+  const setValue = useCallback(
+    (next: boolean) => {
+      if (!isControlled) setInternalExpanded(next);
+      onExpandedChange?.(next);
+    },
+    [isControlled, onExpandedChange],
+  );
+
+  return [value, setValue] as const;
+}
+
+export function OverflowActions({
+  primaryActions,
+  overflowActions,
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  onAction,
+  collapseOnAction = false,
+  size = "md",
+  openLabel = "Show extra actions",
+  closeLabel = "Hide extra actions",
+  className,
+  classNames,
+}: OverflowActionsProps) {
+  const reduce = useReducedMotion();
+  const canHover = useHoverCapable();
+  const overflowId = useId();
+  const overflowWrapperRef = useRef<HTMLDivElement>(null);
+  const overflowWrapperLeftRef = useRef(0);
+  const [isExpanded, setIsExpanded] = useControllableExpanded({
+    expanded,
+    defaultExpanded,
+    onExpandedChange,
+  });
+
+  const transition = reduce ? { duration: 0 } : SHELL_TRANSITION;
+
+  useLayoutEffect(() => {
+    const overflowNode = overflowWrapperRef.current;
+    if (!overflowNode) return;
+
+    if (!isExpanded) {
+      overflowNode.style.left = `${
+        overflowWrapperLeftRef.current -
+        overflowNode.getBoundingClientRect().left
+      }px`;
+      return;
+    }
+
+    overflowNode.style.left = "";
+    overflowWrapperLeftRef.current = overflowNode.getBoundingClientRect().left;
+  }, [isExpanded]);
+
+  const handleAction = (item: OverflowActionItem) => {
+    item.onClick?.();
+    onAction?.(item);
+    if (collapseOnAction) setIsExpanded(false);
+  };
+
+  return (
+    <motion.div
+      layout
+      transition={transition}
+      className={cn("inline-flex", classNames?.root, className)}
+    >
+      <motion.div
+        layout
+        transition={transition}
+        className={cn(
+          "relative inline-flex items-center overflow-hidden rounded-full border border-border bg-card",
+          TRACK_SIZE_CLASS[size],
+          classNames?.track,
+        )}
+      >
+        <motion.div
+          layout
+          transition={transition}
+          className={cn("inline-flex items-center", GROUP_GAP_CLASS[size])}
+        >
+          {primaryActions.map((item) => (
+            <ActionButton
+              key={item.id}
+              item={item}
+              size={size}
+              reduce={reduce}
+              canHover={canHover}
+              onAction={handleAction}
+              layoutTransition={transition}
+              className={cn(classNames?.action, classNames?.primaryAction)}
+              iconClassName={classNames?.icon}
+              labelClassName={classNames?.label}
+            />
+          ))}
+        </motion.div>
+
+        <AnimatePresence mode="popLayout" initial={false}>
+          {isExpanded ? (
+            <motion.div
+              key="overflow-actions"
+              ref={overflowWrapperRef}
+              id={overflowId}
+              layout
+              aria-hidden={!isExpanded}
+              transition={transition}
+              className={cn(
+                "relative inline-flex w-max items-center",
+                GROUP_GAP_CLASS[size],
+              )}
+            >
+              {overflowActions.map((item) => (
+                <ActionButton
+                  key={item.id}
+                  item={item}
+                  size={size}
+                  reduce={reduce}
+                  canHover={canHover}
+                  overflow
+                  visible={isExpanded}
+                  variants={OVERFLOW_ACTION_VARIANTS}
+                  onAction={handleAction}
+                  layoutTransition={transition}
+                  className={cn(classNames?.action, classNames?.overflowAction)}
+                  iconClassName={classNames?.icon}
+                  labelClassName={classNames?.label}
+                />
+              ))}
+            </motion.div>
+          ) : null}
+        </AnimatePresence>
+
+        <motion.button
+          type="button"
+          layout
+          aria-expanded={isExpanded}
+          aria-controls={isExpanded ? overflowId : undefined}
+          aria-label={isExpanded ? closeLabel : openLabel}
+          title={isExpanded ? closeLabel : openLabel}
+          onClick={() => setIsExpanded(!isExpanded)}
+          whileTap={reduce ? undefined : { scale: 0.96 }}
+          whileHover={reduce || !canHover ? undefined : { scale: 1.03 }}
+          transition={transition}
+          className={cn(
+            "relative inline-grid shrink-0 place-items-center rounded-full bg-primary text-primary-foreground outline-none disabled:pointer-events-none disabled:opacity-50",
+            "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+            TOGGLE_SIZE_CLASS[size],
+            classNames?.toggle,
+          )}
+        >
+          <AnimatePresence mode="popLayout" initial={false}>
+            <motion.span
+              key={isExpanded ? "close" : "open"}
+              variants={ICON_VARIANTS}
+              initial={reduce ? { opacity: 0 } : "hidden"}
+              animate={reduce ? { opacity: 1 } : "visible"}
+              exit={reduce ? { opacity: 0 } : "exit"}
+              className="inline-grid place-items-center"
+            >
+              {isExpanded ? (
+                <X className={ICON_SIZE_CLASS[size]} />
+              ) : (
+                <MoreHorizontal className={ICON_SIZE_CLASS[size]} />
+              )}
+            </motion.span>
+          </AnimatePresence>
+        </motion.button>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+function ActionButton({
+  item,
+  size,
+  reduce,
+  canHover,
+  overflow,
+  visible = true,
+  variants,
+  onAction,
+  layoutTransition,
+  className,
+  iconClassName,
+  labelClassName,
+}: {
+  item: OverflowActionItem;
+  size: OverflowActionsSize;
+  reduce: boolean | null;
+  canHover: boolean;
+  overflow?: boolean;
+  visible?: boolean;
+  variants?: Variants;
+  onAction: (item: OverflowActionItem) => void;
+  layoutTransition: Transition;
+  className?: string;
+  iconClassName?: string;
+  labelClassName?: string;
+}) {
+  const label = typeof item.label === "string" ? item.label : undefined;
+
+  return (
+    <motion.span
+      layout="position"
+      variants={variants}
+      initial={variants ? (reduce ? { opacity: 0 } : "hidden") : undefined}
+      animate={variants ? (reduce ? { opacity: 1 } : "visible") : undefined}
+      exit={variants ? (reduce ? { opacity: 0 } : "exit") : undefined}
+      whileTap={reduce || item.disabled ? undefined : { scale: 0.97 }}
+      whileHover={
+        reduce || !canHover || item.disabled ? undefined : { scale: 1.008 }
+      }
+      transition={layoutTransition}
+      className="inline-flex shrink-0"
+    >
+      <button
+        type="button"
+        disabled={item.disabled}
+        aria-label={item.ariaLabel}
+        tabIndex={overflow && !visible ? -1 : undefined}
+        title={label}
+        onClick={() => onAction(item)}
+        className={cn(
+          "inline-flex shrink-0 items-center justify-center rounded-full bg-background font-medium text-foreground outline-none",
+          "disabled:pointer-events-none disabled:opacity-45",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          ACTION_SIZE_CLASS[size],
+          className,
+        )}
+      >
+        {item.icon ? (
+          <span
+            className={cn(
+              "inline-flex shrink-0 items-center justify-center",
+              ICON_SIZE_CLASS[size],
+              iconClassName,
+            )}
+          >
+            {item.icon}
+          </span>
+        ) : null}
+        <span className={cn("whitespace-nowrap", labelClassName)}>
+          {item.label}
+        </span>
+      </button>
+    </motion.span>
+  );
+}

package/src/components/ui/button-group.tsx

@@ -0,0 +1,88 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+import { motion, type HTMLMotionProps } from "framer-motion"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+        vertical:
+          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: HTMLMotionProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <motion.div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(
+          "flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "button-group-text",
+    },
+  })
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}

package/src/components/ui/button.tsx

@@ -46,10 +46,10 @@ export const buttonVariants = cva(
       size: {
         default: "h-9 px-[calc(--spacing(3)-1px)] sm:h-8",
         icon: "size-9 sm:size-8",
-        "icon-lg": "size-10 sm:size-9",
-        "icon-sm": "size-8 sm:size-7",
+        "icon-lg": "size-8 sm:size-8",
+        "icon-sm": "size-7 sm:size-6",
         "icon-xl":
-          "size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
+          "size-10 sm:size-9 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
         "icon-xs":
           "size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5",
         lg: "h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9",

package/src/components/ui/glasscn/glass-button-group.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import {
+  type FrostGlassVariantProp,
+  glassVariantStyles,
+} from "@/lib/glass-variants"
+import { cn } from "@/lib/utils"
+
+import { ButtonGroup } from "../button-group"
+import { LiquidGlass } from "./liquid-glass"
+
+type GlassButtonGroupProps = React.ComponentProps<typeof ButtonGroup> &
+  FrostGlassVariantProp
+
+function GlassButtonGroup({
+  className,
+  glassVariant = "liquid-refract",
+  children,
+  ...props
+}: GlassButtonGroupProps) {
+  if (glassVariant === "liquid-refract") {
+    return (
+      <LiquidGlass className={cn("", className)}>
+        <ButtonGroup
+          data-slot="glass-button-group"
+          data-glass-variant={glassVariant}
+          className={cn("bg-transparent", className)}
+          {...props}
+        >
+          {children}
+        </ButtonGroup>
+      </LiquidGlass>
+    )
+  }
+
+  return (
+    <ButtonGroup
+      data-slot="glass-button-group"
+      data-glass-variant={glassVariant}
+      className={cn("rounded-lg", glassVariantStyles[glassVariant], className)}
+      {...props}
+    >
+      {children}
+    </ButtonGroup>
+  )
+}
+
+export { GlassButtonGroup }