@momentumworld/ui-react 0.17.0

package/src/components/ui/pagination-controls.tsx

@@ -0,0 +1,74 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  type PaginationLinkProps,
+  PaginationNext,
+  PaginationPrevious,
+} from "./pagination";
+
+export function PaginationControls(props: {
+  page: number;
+  pageCount: number;
+  renderPageLink: (page: number) => PaginationLinkProps["render"];
+}) {
+  const { page, pageCount, renderPageLink } = props;
+
+  if (pageCount <= 1) return null;
+
+  return (
+    <Pagination>
+      <PaginationContent>
+        {/* Prev/Next are always rendered (disabled at the bounds) so they fade
+            between states instead of popping in and out. */}
+        <PaginationItem>
+          <PaginationPrevious
+            disabled={page <= 1}
+            render={page > 1 ? renderPageLink(page - 1) : <span />}
+          />
+        </PaginationItem>
+
+        {page > 1 && (
+          <PaginationItem>
+            <PaginationLink render={renderPageLink(1)}>1</PaginationLink>
+          </PaginationItem>
+        )}
+
+        {page > 2 && (
+          <PaginationItem>
+            <PaginationEllipsis />
+          </PaginationItem>
+        )}
+
+        <PaginationItem>
+          <PaginationLink render={renderPageLink(page)} isActive>
+            {page}
+          </PaginationLink>
+        </PaginationItem>
+
+        {pageCount > page + 1 && (
+          <PaginationItem>
+            <PaginationEllipsis />
+          </PaginationItem>
+        )}
+
+        {pageCount > page && (
+          <PaginationItem>
+            <PaginationLink render={renderPageLink(pageCount)}>
+              {pageCount}
+            </PaginationLink>
+          </PaginationItem>
+        )}
+
+        <PaginationItem>
+          <PaginationNext
+            disabled={page >= pageCount}
+            render={page < pageCount ? renderPageLink(page + 1) : <span />}
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  );
+}

package/src/components/ui/pagination.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react";
+import type * as React from "react";
+import { type Button, buttonVariants } from "./button";
+import { cn } from "../../lib/utils/css";
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      aria-label="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      data-slot="pagination"
+      {...props}
+    />
+  );
+}
+
+function PaginationContent({
+  className,
+  ...props
+}: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      className={cn("flex flex-row items-center gap-1", className)}
+      data-slot="pagination-content"
+      {...props}
+    />
+  );
+}
+
+function PaginationItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      className={cn(
+        "animate-in fade-in-0 zoom-in-95 duration-200 ease-out",
+        className,
+      )}
+      data-slot="pagination-item"
+      {...props}
+    />
+  );
+}
+
+export type PaginationLinkProps = {
+  isActive?: boolean;
+  disabled?: boolean;
+  size?: React.ComponentProps<typeof Button>["size"];
+} & useRender.ComponentProps<"a">;
+
+function PaginationLink({
+  className,
+  isActive,
+  disabled,
+  size = "icon",
+  render,
+  ...props
+}: PaginationLinkProps) {
+  const defaultProps = {
+    "aria-current": isActive ? ("page" as const) : undefined,
+    "aria-disabled": disabled || undefined,
+    className: cn(
+      buttonVariants({
+        size,
+        variant: isActive ? "outline" : "ghost",
+      }),
+      "transition-[opacity,box-shadow,filter] duration-200 ease-out",
+      disabled && "pointer-events-none opacity-50",
+      className,
+    ),
+    "data-active": isActive,
+    "data-disabled": disabled || undefined,
+    "data-slot": "pagination-link",
+    tabIndex: disabled ? -1 : undefined,
+  };
+
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(defaultProps, props),
+    render,
+  });
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      className={cn("max-sm:aspect-square max-sm:p-0", className)}
+      size="default"
+      {...props}
+    >
+      <ChevronLeftIcon className="sm:-ms-1" />
+      <span className="max-sm:hidden">Previous</span>
+    </PaginationLink>
+  );
+}
+
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      className={cn("max-sm:aspect-square max-sm:p-0", className)}
+      size="default"
+      {...props}
+    >
+      <span className="max-sm:hidden">Next</span>
+      <ChevronRightIcon className="sm:-me-1" />
+    </PaginationLink>
+  );
+}
+
+function PaginationEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      className={cn("flex min-w-7 justify-center", className)}
+      data-slot="pagination-ellipsis"
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-5 sm:size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  );
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+};

package/src/components/ui/pipeline.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { Fragment } from "react";
+import type * as React from "react";
+import { ChevronRight } from "lucide-react";
+
+import { cn } from "../../lib/utils/css";
+
+interface PipelineStage {
+  /** The headline number for the stage. */
+  value: React.ReactNode;
+  /** The stage caption, e.g. "Target accounts". */
+  label: React.ReactNode;
+  /** Render the value in the brand/primary color (e.g. a final stage). */
+  accent?: boolean;
+}
+
+interface PipelineProps extends React.ComponentProps<"div"> {
+  /** Ordered funnel stages, left to right. */
+  stages: PipelineStage[];
+  /**
+   * Step-to-step conversion markers. `conversions[i]` is the share of stage `i`
+   * that advances to stage `i + 1`, and is shown as a pill right beside stage
+   * `i`'s number (length = `stages.length - 1`). Typically a percentage string.
+   */
+  conversions?: React.ReactNode[];
+}
+
+/**
+ * A conversion funnel — equal-width stages laid left to right. Each stage
+ * carries its own step-to-step conversion in a pill next to the number, and a
+ * chevron points to the next stage, so the row reads as a flow rather than a
+ * set of loose stats.
+ *
+ * The component is its own container query context: when it gets narrow (e.g.
+ * beside a docked panel) the chevrons hide and the stages reflow into a
+ * two-column grid, staying readable without squashing the numbers.
+ */
+function Pipeline({ stages, conversions = [], className, ...props }: PipelineProps) {
+  return (
+    <div
+      className={cn(
+        "@container flex items-stretch @max-[560px]:grid @max-[560px]:grid-cols-2 @max-[560px]:gap-x-6 @max-[560px]:gap-y-5",
+        className,
+      )}
+      data-slot="pipeline"
+      {...props}
+    >
+      {stages.map((stage, i) => {
+        const conv = i < stages.length - 1 ? conversions[i] : undefined;
+        return (
+          <Fragment key={i}>
+            <div className="min-w-0 flex-1 px-0.5" data-slot="pipeline-stage">
+              <div className="flex items-center gap-2">
+                <span
+                  className={cn(
+                    "font-sans font-bold text-3xl text-foreground leading-none tabular-nums tracking-tight",
+                    stage.accent && "text-success",
+                  )}
+                >
+                  {stage.value}
+                </span>
+                {conv != null ? <PipelineConversion>{conv}</PipelineConversion> : null}
+              </div>
+              <div className="mt-2 text-muted-foreground text-xs leading-snug">
+                {stage.label}
+              </div>
+            </div>
+            {conv != null ? (
+              <div
+                className="flex flex-none items-center px-1 @max-[560px]:hidden"
+                data-slot="pipeline-arrow"
+                aria-hidden
+              >
+                <ChevronRight className="size-3.5 text-muted-foreground/40" />
+              </div>
+            ) : null}
+          </Fragment>
+        );
+      })}
+    </div>
+  );
+}
+
+/** The conversion pill sitting beside a stage number. */
+function PipelineConversion({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded-full border border-success/20 bg-success/10 px-2 py-0.5 font-medium text-[11px] text-success tabular-nums dark:bg-success/16",
+        className,
+      )}
+      data-slot="pipeline-conversion"
+      {...props}
+    />
+  );
+}
+
+export { Pipeline, PipelineConversion, type PipelineProps, type PipelineStage };

package/src/components/ui/popover.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+
+import { cn } from "../../lib/utils/css";
+
+const PopoverCreateHandle = PopoverPrimitive.createHandle;
+
+const Popover = PopoverPrimitive.Root;
+
+function PopoverTrigger({
+  className,
+  children,
+  ...props
+}: PopoverPrimitive.Trigger.Props) {
+  return (
+    <PopoverPrimitive.Trigger
+      className={className}
+      data-slot="popover-trigger"
+      {...props}
+    >
+      {children}
+    </PopoverPrimitive.Trigger>
+  );
+}
+
+function PopoverPopup({
+  children,
+  className,
+  side = "bottom",
+  align = "center",
+  sideOffset = 4,
+  alignOffset = 0,
+  tooltipStyle = false,
+  anchor,
+  ...props
+}: PopoverPrimitive.Popup.Props & {
+  side?: PopoverPrimitive.Positioner.Props["side"];
+  align?: PopoverPrimitive.Positioner.Props["align"];
+  sideOffset?: PopoverPrimitive.Positioner.Props["sideOffset"];
+  alignOffset?: PopoverPrimitive.Positioner.Props["alignOffset"];
+  tooltipStyle?: boolean;
+  anchor?: PopoverPrimitive.Positioner.Props["anchor"];
+}) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        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="popover-positioner"
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <PopoverPrimitive.Popup
+          className={cn(
+            "relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[width,height,scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=calendar]:rounded-xl has-data-[slot=calendar]:before:rounded-[calc(var(--radius-xl)-1px)] data-ending-style:scale-98 data-ending-style:opacity-0 data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            tooltipStyle &&
+              "w-fit text-balance rounded-md text-xs shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]",
+            className,
+          )}
+          data-slot="popover-popup"
+          {...props}
+        >
+          <PopoverPrimitive.Viewport
+            className={cn(
+              "relative size-full max-h-(--available-height) overflow-clip px-(--viewport-inline-padding) py-4 [--viewport-inline-padding:--spacing(4)] has-data-[slot=calendar]:p-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-current:opacity-100 **:data-previous:opacity-100 **:data-current:transition-opacity **:data-previous:transition-opacity",
+              tooltipStyle
+                ? "py-1 [--viewport-inline-padding:--spacing(2)]"
+                : "not-data-transitioning:overflow-y-auto",
+            )}
+            data-slot="popover-viewport"
+          >
+            {children}
+          </PopoverPrimitive.Viewport>
+        </PopoverPrimitive.Popup>
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverClose({ ...props }: PopoverPrimitive.Close.Props) {
+  return <PopoverPrimitive.Close data-slot="popover-close" {...props} />;
+}
+
+function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
+  return (
+    <PopoverPrimitive.Title
+      className={cn("font-semibold text-lg leading-none", className)}
+      data-slot="popover-title"
+      {...props}
+    />
+  );
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: PopoverPrimitive.Description.Props) {
+  return (
+    <PopoverPrimitive.Description
+      className={cn("text-muted-foreground text-sm", className)}
+      data-slot="popover-description"
+      {...props}
+    />
+  );
+}
+
+export {
+  PopoverCreateHandle,
+  Popover,
+  PopoverTrigger,
+  PopoverPopup,
+  PopoverPopup as PopoverContent,
+  PopoverTitle,
+  PopoverDescription,
+  PopoverClose,
+};

package/src/components/ui/preview-card.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+
+import { cn } from "../../lib/utils/css";
+
+const PreviewCard = PreviewCardPrimitive.Root;
+
+function PreviewCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
+  return (
+    <PreviewCardPrimitive.Trigger data-slot="preview-card-trigger" {...props} />
+  );
+}
+
+function PreviewCardPopup({
+  className,
+  children,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: PreviewCardPrimitive.Popup.Props & {
+  align?: PreviewCardPrimitive.Positioner.Props["align"];
+  sideOffset?: PreviewCardPrimitive.Positioner.Props["sideOffset"];
+}) {
+  return (
+    <PreviewCardPrimitive.Portal>
+      <PreviewCardPrimitive.Positioner
+        align={align}
+        className="z-50"
+        data-slot="preview-card-positioner"
+        sideOffset={sideOffset}
+      >
+        <PreviewCardPrimitive.Popup
+          className={cn(
+            "relative flex w-64 origin-(--transform-origin) text-balance rounded-lg border bg-popover not-dark:bg-clip-padding p-4 text-popover-foreground text-sm shadow-lg/5 transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-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 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            className,
+          )}
+          data-slot="preview-card-content"
+          {...props}
+        >
+          {children}
+        </PreviewCardPrimitive.Popup>
+      </PreviewCardPrimitive.Positioner>
+    </PreviewCardPrimitive.Portal>
+  );
+}
+
+export {
+  PreviewCard,
+  PreviewCard as HoverCard,
+  PreviewCardTrigger,
+  PreviewCardTrigger as HoverCardTrigger,
+  PreviewCardPopup,
+  PreviewCardPopup as HoverCardContent,
+};