@exegia/corpora-ui 0.17.0 → 0.19.0

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/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 }

package/src/components/ui/glasscn/glass-container.tsx

@@ -0,0 +1,125 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  type FrostGlassVariant,
+  type FrostGlassVariantProp,
+  glassVariantStyles,
+} from "@/lib/glass-variants"
+import { cn } from "@/lib/utils"
+import { LiquidGlass } from "./liquid-glass"
+
+const glassSidebarVariableStyles: Record<FrostGlassVariant, string> = {
+  clear: [
+    "[--sidebar:rgba(255,255,255,0.18)]",
+    "[--sidebar-foreground:oklch(0.145_0_0)]",
+    "[--sidebar-accent:rgba(255,255,255,0.48)]",
+    "[--sidebar-accent-foreground:oklch(0.145_0_0)]",
+    "[--sidebar-border:rgba(255,255,255,0.34)]",
+    "[--sidebar-ring:rgba(255,255,255,0.38)]",
+    "dark:[--sidebar:rgba(0,0,0,0.28)]",
+    "dark:[--sidebar-foreground:oklch(0.985_0_0)]",
+    "dark:[--sidebar-accent:rgba(255,255,255,0.1)]",
+    "dark:[--sidebar-accent-foreground:oklch(0.985_0_0)]",
+    "dark:[--sidebar-border:rgba(255,255,255,0.12)]",
+    "dark:[--sidebar-ring:rgba(255,255,255,0.16)]",
+  ].join(" "),
+  frosted: [
+    "[--sidebar:rgba(255,255,255,0.4)]",
+    "[--sidebar-foreground:oklch(0.145_0_0)]",
+    "[--sidebar-accent:rgba(255,255,255,0.62)]",
+    "[--sidebar-accent-foreground:oklch(0.145_0_0)]",
+    "[--sidebar-border:rgba(255,255,255,0.3)]",
+    "[--sidebar-ring:rgba(255,255,255,0.32)]",
+    "dark:[--sidebar:rgba(0,0,0,0.38)]",
+    "dark:[--sidebar-foreground:oklch(0.985_0_0)]",
+    "dark:[--sidebar-accent:rgba(255,255,255,0.14)]",
+    "dark:[--sidebar-accent-foreground:oklch(0.985_0_0)]",
+    "dark:[--sidebar-border:rgba(255,255,255,0.1)]",
+    "dark:[--sidebar-ring:rgba(255,255,255,0.14)]",
+  ].join(" "),
+  subtle: [
+    "[--sidebar:rgba(255,255,255,0.14)]",
+    "[--sidebar-foreground:oklch(0.145_0_0)]",
+    "[--sidebar-accent:rgba(255,255,255,0.28)]",
+    "[--sidebar-accent-foreground:oklch(0.145_0_0)]",
+    "[--sidebar-border:rgba(0,0,0,0.05)]",
+    "[--sidebar-ring:rgba(255,255,255,0.28)]",
+    "dark:[--sidebar:rgba(255,255,255,0.05)]",
+    "dark:[--sidebar-foreground:oklch(0.985_0_0)]",
+    "dark:[--sidebar-accent:rgba(255,255,255,0.08)]",
+    "dark:[--sidebar-accent-foreground:oklch(0.985_0_0)]",
+    "dark:[--sidebar-border:rgba(255,255,255,0.08)]",
+    "dark:[--sidebar-ring:rgba(255,255,255,0.12)]",
+  ].join(" "),
+  liquid: [
+    "[--sidebar:rgba(255,255,255,0.22)]",
+    "[--sidebar-foreground:oklch(0.145_0_0)]",
+    "[--sidebar-accent:rgba(255,255,255,0.55)]",
+    "[--sidebar-accent-foreground:oklch(0.145_0_0)]",
+    "[--sidebar-border:rgba(255,255,255,0.42)]",
+    "[--sidebar-ring:rgba(255,255,255,0.45)]",
+    "dark:[--sidebar:rgba(255,255,255,0.06)]",
+    "dark:[--sidebar-foreground:oklch(0.985_0_0)]",
+    "dark:[--sidebar-accent:rgba(255,255,255,0.12)]",
+    "dark:[--sidebar-accent-foreground:oklch(0.985_0_0)]",
+    "dark:[--sidebar-border:rgba(255,255,255,0.16)]",
+    "dark:[--sidebar-ring:rgba(255,255,255,0.20)]",
+  ].join(" "),
+  "liquid-refract": [
+    "[--sidebar:rgba(255,255,255,0.18)]",
+    "[--sidebar-foreground:oklch(0.145_0_0)]",
+    "[--sidebar-accent:rgba(255,255,255,0.48)]",
+    "[--sidebar-accent-foreground:oklch(0.145_0_0)]",
+    "[--sidebar-border:rgba(255,255,255,0.34)]",
+    "[--sidebar-ring:rgba(255,255,255,0.38)]",
+    "dark:[--sidebar-foreground:oklch(0.985_0_0)]",
+    "dark:[--sidebar-accent:rgba(255,255,255,0.12)]",
+    "dark:[--sidebar-accent-foreground:oklch(0.985_0_0)]",
+    "dark:[--sidebar-border:rgba(255,255,255,0.15)]",
+    "dark:[--sidebar-ring:rgba(255,255,255,0.18)]",
+  ].join(" "),
+}
+
+type GlassSidebarProps = React.HTMLAttributes<HTMLDivElement> &
+  FrostGlassVariantProp
+
+function getGlassSidebarStandaloneClasses(glassVariant: FrostGlassVariant) {
+  return cn(
+    glassVariantStyles[glassVariant],
+    glassSidebarVariableStyles[glassVariant],
+    "overflow-hidden",
+    "shadow-[0_24px_80px_rgba(15,23,42,0.08)] dark:shadow-[0_24px_80px_rgba(0,0,0,0.28)]"
+  )
+}
+
+function GlassContainer({
+  glassVariant = "liquid-refract",
+  className,
+  children,
+  ...props
+}: GlassSidebarProps) {
+  return (
+    <LiquidGlass
+      className={cn("rounded-[1.75rem]", className)}
+      blur={5}
+      refraction={50}
+    >
+      <div
+        className={cn(
+          getGlassSidebarStandaloneClasses(glassVariant),
+          glassVariant === "liquid-refract" &&
+            "border-0 bg-transparent shadow-none",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </LiquidGlass>
+  )
+}
+
+export { GlassContainer, glassSidebarVariableStyles }
+export type { FrostGlassVariant } from "@/lib/glass-variants"

package/src/components/ui/glasscn/glass-separator.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import {
+  type FrostGlassVariant,
+  type FrostGlassVariantProp,
+} from "@/lib/glass-variants"
+import { cn } from "@/lib/utils"
+
+import { Separator } from "../separator"
+
+const separatorVariantStyles: Record<FrostGlassVariant, string> = {
+  clear: "bg-white/[0.5] dark:bg-white/[0.12]",
+  frosted: "bg-white/[0.4] dark:bg-white/10",
+  subtle: "bg-black/[0.05] dark:bg-white/[0.08]",
+  liquid:
+    "bg-gradient-to-r from-white/0 via-white/60 to-white/0 dark:via-white/20",
+  "liquid-refract":
+    "bg-gradient-to-r from-white/0 via-white/70 to-white/0 dark:via-white/25",
+}
+
+type GlassSeparatorProps = React.ComponentProps<typeof Separator> &
+  FrostGlassVariantProp
+
+function GlassSeparator({
+  className,
+  glassVariant = "liquid-refract",
+  ...props
+}: GlassSeparatorProps) {
+  return (
+    <Separator
+      data-slot="glass-separator"
+      data-glass-variant={glassVariant}
+      className={cn(separatorVariantStyles[glassVariant], className)}
+      {...props}
+    />
+  )
+}
+
+export { GlassSeparator }