@momentumworld/ui-react 0.17.0

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

@@ -0,0 +1,101 @@
+"use client";
+
+import type { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
+import type { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Separator } from "./separator";
+import {
+  Toggle as ToggleComponent,
+  type toggleVariants,
+} from "./toggle";
+import { cn } from "../../lib/utils/css";
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+});
+
+function ToggleGroup({
+  className,
+  variant = "default",
+  size = "default",
+  orientation = "horizontal",
+  children,
+  ...props
+}: ToggleGroupPrimitive.Props & VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive
+      className={cn(
+        "flex w-fit *:focus-visible:z-10 dark:*:[[data-slot=separator]:has(+[data-slot=toggle]:hover)]:before:bg-input/64 dark:*:[[data-slot=separator]:has(+[data-slot=toggle][data-pressed])]:before:bg-input dark:*:[[data-slot=toggle]:hover+[data-slot=separator]]:before:bg-input/64 dark:*:[[data-slot=toggle][data-pressed]+[data-slot=separator]]:before:bg-input",
+        orientation === "horizontal"
+          ? "*:pointer-coarse:after:min-w-auto"
+          : "*:pointer-coarse:after:min-h-auto",
+        variant === "default"
+          ? "gap-0.5"
+          : orientation === "horizontal"
+            ? "*:not-first:not-data-[slot=separator]:before:-start-[0.5px] *:not-last:not-data-[slot=separator]:before:-end-[0.5px] *:not-first:rounded-s-none *:not-last:rounded-e-none *:not-first:border-s-0 *:not-last:border-e-0 *:not-first:before:rounded-s-none *:not-last:before:rounded-e-none"
+            : "*:not-first:not-data-[slot=separator]:before:-top-[0.5px] *:not-last:not-data-[slot=separator]:before:-bottom-[0.5px] flex-col *:not-first:rounded-t-none *:not-last:rounded-b-none *:not-first:border-t-0 *:not-last:border-b-0 *:not-first:before:rounded-t-none *:not-last:before:rounded-b-none *:data-[slot=toggle]:not-last:before:hidden dark:*:last:before:hidden dark:*:first:before:block",
+        className,
+      )}
+      data-size={size}
+      data-slot="toggle-group"
+      data-variant={variant}
+      orientation={orientation}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ size, variant }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  );
+}
+
+function Toggle({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext);
+
+  const resolvedVariant = context.variant || variant;
+  const resolvedSize = context.size || size;
+
+  return (
+    <ToggleComponent
+      className={className}
+      data-size={resolvedSize}
+      data-variant={resolvedVariant}
+      size={resolvedSize}
+      variant={resolvedVariant}
+      {...props}
+    >
+      {children}
+    </ToggleComponent>
+  );
+}
+
+function ToggleGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: {
+  className?: string;
+} & React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      className={cn(
+        "pointer-events-none relative bg-input before:absolute before:inset-0 dark:before:bg-input/32",
+        className,
+      )}
+      orientation={orientation}
+      {...props}
+    />
+  );
+}
+
+export { ToggleGroup, Toggle, Toggle as ToggleGroupItem, ToggleGroupSeparator };

package/src/components/ui/toggle.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils/css";
+
+const toggleVariants = cva(
+  "[&_svg]:-mx-0.5 relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base text-foreground outline-none transition-[box-shadow,background-color] duration-100 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-pressed:bg-input/64 data-pressed:text-accent-foreground sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:transition-transform [&_svg]:duration-150 [&_svg]:ease-[cubic-bezier(0.34,1.56,0.64,1)] data-pressed:[&_svg]:scale-115",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+    variants: {
+      size: {
+        default: "h-9 min-w-9 px-[calc(--spacing(2)-1px)] sm:h-8 sm:min-w-8",
+        lg: "h-10 min-w-10 px-[calc(--spacing(2.5)-1px)] sm:h-9 sm:min-w-9",
+        sm: "h-8 min-w-8 px-[calc(--spacing(1.5)-1px)] sm:h-7 sm:min-w-7",
+      },
+      variant: {
+        default: "border-transparent",
+        outline:
+          "border-input bg-background not-dark:bg-clip-padding shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/6%)] dark:bg-input/32 dark:data-pressed:bg-input dark:hover:bg-input/64 dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] dark:not-disabled:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/2%)] [:disabled,:active,[data-pressed]]:shadow-none",
+      },
+    },
+  },
+);
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      className={cn(toggleVariants({ className, size, variant }))}
+      data-slot="toggle"
+      {...props}
+    />
+  );
+}
+
+export { Toggle, toggleVariants };

package/src/components/ui/toolbar.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { Toolbar as ToolbarPrimitive } from "@base-ui/react/toolbar";
+
+import { cn } from "../../lib/utils/css";
+
+function Toolbar({ className, ...props }: ToolbarPrimitive.Root.Props) {
+  return (
+    <ToolbarPrimitive.Root
+      className={cn(
+        "relative flex gap-2 rounded-xl border bg-card not-dark:bg-clip-padding p-1 text-card-foreground",
+        className,
+      )}
+      data-slot="toolbar"
+      {...props}
+    />
+  );
+}
+
+function ToolbarButton({ className, ...props }: ToolbarPrimitive.Button.Props) {
+  return (
+    <ToolbarPrimitive.Button
+      className={cn(
+        "transition-[box-shadow,background-color,color,filter] duration-150 ease-out [:active:not(:disabled)]:brightness-95",
+        className,
+      )}
+      data-slot="toolbar-button"
+      {...props}
+    />
+  );
+}
+
+function ToolbarLink({ className, ...props }: ToolbarPrimitive.Link.Props) {
+  return (
+    <ToolbarPrimitive.Link
+      className={cn(
+        "transition-[color,opacity] duration-150 ease-out",
+        className,
+      )}
+      data-slot="toolbar-link"
+      {...props}
+    />
+  );
+}
+
+function ToolbarInput({ className, ...props }: ToolbarPrimitive.Input.Props) {
+  return (
+    <ToolbarPrimitive.Input
+      className={cn(className)}
+      data-slot="toolbar-input"
+      {...props}
+    />
+  );
+}
+
+function ToolbarGroup({ className, ...props }: ToolbarPrimitive.Group.Props) {
+  return (
+    <ToolbarPrimitive.Group
+      className={cn("flex items-center gap-1", className)}
+      data-slot="toolbar-group"
+      {...props}
+    />
+  );
+}
+
+function ToolbarSeparator({
+  className,
+  ...props
+}: ToolbarPrimitive.Separator.Props) {
+  return (
+    <ToolbarPrimitive.Separator
+      className={cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:my-0.5 data-[orientation=vertical]:my-1.5 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch",
+        className,
+      )}
+      data-slot="toolbar-separator"
+      {...props}
+    />
+  );
+}
+
+export {
+  Toolbar,
+  ToolbarGroup,
+  ToolbarSeparator,
+  ToolbarButton,
+  ToolbarLink,
+  ToolbarInput,
+};

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+const TooltipCreateHandle = TooltipPrimitive.createHandle;
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+function TooltipTrigger(props: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p
+      data-slot="tooltip-title"
+      className={cn("font-medium leading-snug", className)}
+      {...props}
+    />
+  );
+}
+
+function TooltipDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p
+      data-slot="tooltip-description"
+      className={cn("text-muted-foreground leading-snug", className)}
+      {...props}
+    />
+  );
+}
+
+function TooltipPopup({
+  className,
+  align = "center",
+  sideOffset = 4,
+  side = "top",
+  arrow = false,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props & {
+  align?: TooltipPrimitive.Positioner.Props["align"];
+  side?: TooltipPrimitive.Positioner.Props["side"];
+  sideOffset?: TooltipPrimitive.Positioner.Props["sideOffset"];
+  arrow?: boolean;
+}) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        className="z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform] data-instant:transition-none"
+        data-slot="tooltip-positioner"
+        side={side}
+        sideOffset={arrow ? (sideOffset as number) + 5 : sideOffset}
+      >
+        <TooltipPrimitive.Popup
+          className={cn(
+            "relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) text-balance rounded-md border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs shadow-md/5 transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 data-instant:duration-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            className,
+          )}
+          data-slot="tooltip-popup"
+          {...props}
+        >
+          <TooltipPrimitive.Viewport
+            className="relative size-full overflow-clip px-(--viewport-inline-padding) py-1 [--viewport-inline-padding:--spacing(2)] data-instant:transition-none **:data-current:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-ending-style:opacity-0 **:data-previous:data-starting-style:opacity-0 **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:truncate **:data-current:opacity-100 **:data-previous:opacity-100 **:data-current:transition-opacity **:data-previous:transition-opacity"
+            data-slot="tooltip-viewport"
+          >
+            {children}
+          </TooltipPrimitive.Viewport>
+          {arrow && (
+            <TooltipPrimitive.Arrow
+              data-slot="tooltip-arrow"
+              className="absolute block size-2.5 bg-popover data-[side=top]:[clip-path:polygon(0%_0%,100%_0%,50%_100%)] data-[side=bottom]:[clip-path:polygon(50%_0%,0%_100%,100%_100%)] data-[side=left]:[clip-path:polygon(0%_0%,100%_50%,0%_100%)] data-[side=right]:[clip-path:polygon(100%_0%,0%_50%,100%_100%)]"
+            />
+          )}
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export {
+  TooltipCreateHandle,
+  TooltipProvider,
+  Tooltip,
+  TooltipTrigger,
+  TooltipPopup,
+  TooltipPopup as TooltipContent,
+  TooltipTitle,
+  TooltipDescription,
+};

package/src/components/ui/vertical-scroll-fader.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import { Transition } from "@headlessui/react";
+import { Slot } from "@radix-ui/react-slot";
+import type React from "react";
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import useResizeObserver from "use-resize-observer";
+import useCallbackRef from "../../lib/hooks/use-callback-ref";
+import { useHover } from "../../lib/hooks/use-hover";
+import { cn } from "../../lib/utils/css";
+import type { AsChildProps } from "../../types/helpers";
+
+interface VerticalScrollFaderContextValue {
+  isTopOverflowing: boolean;
+  isBottomOverflowing: boolean;
+  containerRef: React.RefObject<HTMLElement | null>;
+  onScroll: () => void;
+}
+
+const VerticalScrollFaderContext =
+  createContext<VerticalScrollFaderContextValue>({
+    isTopOverflowing: false,
+    isBottomOverflowing: false,
+    containerRef: { current: null },
+    onScroll: () => {},
+  });
+
+const getScrollDirection = (element: HTMLElement) =>
+  getComputedStyle(element).flexDirection === "column-reverse" ? -1 : 1;
+
+function VerticalScrollFaderInner(
+  { asChild, ...props }: AsChildProps<"div">,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const containerRef = useRef<HTMLElement>(null);
+
+  const [isTopOverflowing, setIsTopOverflowing] = useState(false);
+  const [isBottomOverflowing, setIsBottomOverflowing] = useState(false);
+
+  const onScroll = useCallbackRef(() => {
+    if (!containerRef.current) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+    const scrollDirection = getScrollDirection(containerRef.current!);
+    setIsTopOverflowing(
+      scrollDirection > 0
+        ? Math.floor(scrollTop - 1) > 0
+        : Math.round(-scrollTop + clientHeight + 1) < scrollHeight,
+    );
+    setIsBottomOverflowing(
+      scrollDirection > 0
+        ? Math.round(scrollTop + clientHeight + 1) < scrollHeight
+        : Math.floor(-scrollTop - 1) > 0,
+    );
+  });
+
+  const contextValue = useMemo(
+    () => ({ isTopOverflowing, isBottomOverflowing, containerRef, onScroll }),
+    [isTopOverflowing, isBottomOverflowing, onScroll],
+  );
+
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <VerticalScrollFaderContext.Provider value={contextValue}>
+      <Slot className="relative" onScroll={onScroll}>
+        <Comp ref={ref} {...props} />
+      </Slot>
+    </VerticalScrollFaderContext.Provider>
+  );
+}
+
+const VerticalScrollFader = forwardRef(VerticalScrollFaderInner);
+
+function VerticalScrollFaderContentInner(
+  {
+    asChild,
+    faderSize = "3rem",
+    showScrollbar,
+    ...props
+  }: AsChildProps<"div"> & {
+    faderSize?: string;
+    showScrollbar?: boolean;
+  },
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const Comp = asChild ? Slot : "div";
+  const { isTopOverflowing, isBottomOverflowing, containerRef, onScroll } =
+    useContext(VerticalScrollFaderContext);
+
+  useResizeObserver({
+    ref: containerRef as React.RefObject<Element>,
+    onResize: onScroll,
+  });
+
+  // A single vertical mask gradient fades the top and bottom edges over their
+  // fader sizes. An edge that isn't overflowing has a 0 fader size, so it shows
+  // no fade. Inline styles (with -webkit- for Safari) keep this independent of
+  // Tailwind mask-utility emission.
+  const maskImage = `linear-gradient(to bottom, transparent 0, #000 var(--top-fader-size), #000 calc(100% - var(--bottom-fader-size)), transparent 100%)`;
+
+  return (
+    <Slot
+      onScroll={onScroll}
+      className={cn(
+        "overflow-auto [transition:--top-fader-size_150ms,--bottom-fader-size_150ms]",
+        !showScrollbar &&
+          "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+      )}
+      style={{
+        "--fader-size": faderSize,
+        "--top-fader-size": isTopOverflowing ? "var(--fader-size)" : "0rem",
+        "--bottom-fader-size": isBottomOverflowing
+          ? "var(--fader-size)"
+          : "0rem",
+        maskImage,
+        WebkitMaskImage: maskImage,
+      }}
+      ref={containerRef}
+    >
+      <Comp ref={ref} {...props} />
+    </Slot>
+  );
+}
+
+const VerticalScrollFaderContent = forwardRef(VerticalScrollFaderContentInner);
+
+function VerticalScrollFaderTopScrollerInner(
+  { asChild, ...props }: AsChildProps<"button">,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const Comp = asChild ? Slot : "button";
+  const { containerRef, isTopOverflowing } = useContext(
+    VerticalScrollFaderContext,
+  );
+  const onClick = useCallbackRef(() => {
+    if (!containerRef.current) return;
+    containerRef.current.scrollBy({
+      top: -containerRef.current.clientHeight,
+      behavior: "smooth",
+    });
+  });
+
+  const [hoverRef, hovered] = useHover<HTMLElement>({
+    mounted: isTopOverflowing,
+  });
+  useEffect(() => {
+    if (!hovered || !isTopOverflowing) return;
+    let stopped = false;
+    let animationFrameId: number;
+    let startTime: DOMHighResTimeStamp;
+
+    const animate = (timestamp: DOMHighResTimeStamp) => {
+      if (stopped) return;
+      if (!startTime) startTime = timestamp;
+      const elapsed = Math.min(timestamp - startTime, 2000);
+      containerRef.current?.scrollBy({
+        top: -Math.log2(elapsed + 1),
+      });
+      animationFrameId = requestAnimationFrame(animate);
+    };
+    animationFrameId = requestAnimationFrame(animate);
+
+    return () => {
+      stopped = true;
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, [hovered, isTopOverflowing, containerRef.current?.scrollBy]);
+
+  return (
+    <Transition show={isTopOverflowing}>
+      <Slot onClick={onClick} ref={hoverRef}>
+        <Comp {...(asChild ? {} : { type: "button" })} ref={ref} {...props} />
+      </Slot>
+    </Transition>
+  );
+}
+
+const VerticalScrollFaderTopScroller = forwardRef(
+  VerticalScrollFaderTopScrollerInner,
+);
+
+function VerticalScrollFaderBottomScrollerInner(
+  { asChild, ...props }: AsChildProps<"button">,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const Comp = asChild ? Slot : "button";
+  const { containerRef, isBottomOverflowing } = useContext(
+    VerticalScrollFaderContext,
+  );
+  const onClick = useCallbackRef(() => {
+    if (!containerRef.current) return;
+    containerRef.current.scrollBy({
+      top: containerRef.current.clientHeight,
+      behavior: "smooth",
+    });
+  });
+  const [hoverRef, hovered] = useHover({
+    mounted: isBottomOverflowing,
+  });
+  useEffect(() => {
+    if (!hovered || !isBottomOverflowing) return;
+    let stopped = false;
+    let animationFrameId: number;
+    let startTime: DOMHighResTimeStamp;
+
+    const animate = (timestamp: DOMHighResTimeStamp) => {
+      if (stopped) return;
+      if (!startTime) startTime = timestamp;
+      const elapsed = Math.min(timestamp - startTime, 2000);
+      containerRef.current?.scrollBy({
+        top: Math.log2(elapsed + 1),
+      });
+      animationFrameId = requestAnimationFrame(animate);
+    };
+    animationFrameId = requestAnimationFrame(animate);
+
+    return () => {
+      stopped = true;
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, [hovered, isBottomOverflowing, containerRef.current?.scrollBy]);
+
+  return (
+    <Transition show={isBottomOverflowing}>
+      <Slot onClick={onClick} ref={hoverRef}>
+        <Comp {...(asChild ? {} : { type: "button" })} ref={ref} {...props} />
+      </Slot>
+    </Transition>
+  );
+}
+
+const VerticalScrollFaderBottomScroller = forwardRef(
+  VerticalScrollFaderBottomScrollerInner,
+);
+
+export {
+  VerticalScrollFader,
+  VerticalScrollFaderContent,
+  VerticalScrollFaderTopScroller,
+  VerticalScrollFaderBottomScroller,
+};