@momentumworld/ui-react 0.17.0

package/src/components/ui/dialog.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { XIcon } from "lucide-react";
+import { Button } from "./button";
+import { ScrollArea } from "./scroll-area";
+import { cn } from "../../lib/utils/css";
+
+const DialogCreateHandle = DialogPrimitive.createHandle;
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+function DialogTrigger(props: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogClose(props: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogBackdrop({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      className={cn(
+        "fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0",
+        className,
+      )}
+      data-slot="dialog-backdrop"
+      {...props}
+    />
+  );
+}
+
+function DialogViewport({
+  className,
+  ...props
+}: DialogPrimitive.Viewport.Props) {
+  return (
+    <DialogPrimitive.Viewport
+      className={cn(
+        "fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4",
+        className,
+      )}
+      data-slot="dialog-viewport"
+      {...props}
+    />
+  );
+}
+
+function DialogPopup({
+  className,
+  children,
+  showCloseButton = true,
+  bottomStickOnMobile = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean;
+  bottomStickOnMobile?: boolean;
+}) {
+  return (
+    <DialogPortal>
+      <DialogBackdrop />
+      <DialogViewport
+        className={cn(
+          bottomStickOnMobile &&
+            "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12",
+        )}
+      >
+        <DialogPrimitive.Popup
+          className={cn(
+            "-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top 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%)]",
+            bottomStickOnMobile &&
+              "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
+            className,
+          )}
+          data-slot="dialog-popup"
+          {...props}
+        >
+          {children}
+          {showCloseButton && (
+            <DialogPrimitive.Close
+              aria-label="Close"
+              className="absolute end-2 top-2"
+              render={<Button size="icon" variant="ghost" />}
+            >
+              <XIcon />
+            </DialogPrimitive.Close>
+          )}
+        </DialogPrimitive.Popup>
+      </DialogViewport>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-2 p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pb-3 max-sm:pb-4",
+        className,
+      )}
+      data-slot="dialog-header"
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & {
+  variant?: "default" | "bare";
+}) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]",
+        variant === "default" && "border-t bg-muted/72 py-4",
+        variant === "bare" &&
+          "in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pt-3 pt-4 pb-6",
+        className,
+      )}
+      data-slot="dialog-footer"
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      className={cn(
+        "font-heading font-semibold text-xl leading-none",
+        className,
+      )}
+      data-slot="dialog-title"
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      className={cn("text-muted-foreground text-sm", className)}
+      data-slot="dialog-description"
+      {...props}
+    />
+  );
+}
+
+function DialogPanel({
+  className,
+  scrollFade = true,
+  ...props
+}: React.ComponentProps<"div"> & { scrollFade?: boolean }) {
+  return (
+    <ScrollArea scrollFade={scrollFade}>
+      <div
+        className={cn(
+          "p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-header])]:pt-1 in-[[data-slot=dialog-popup]:has([data-slot=dialog-footer]:not(.border-t))]:pb-1",
+          className,
+        )}
+        data-slot="dialog-panel"
+        {...props}
+      />
+    </ScrollArea>
+  );
+}
+
+export {
+  DialogCreateHandle,
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogClose,
+  DialogBackdrop,
+  DialogBackdrop as DialogOverlay,
+  DialogPopup,
+  DialogPopup as DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogPanel,
+  DialogViewport,
+};

package/src/components/ui/drawer.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+import { cn } from "../../lib/utils/css";
+
+function Drawer(props: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerTrigger(
+  props: React.ComponentProps<typeof DrawerPrimitive.Trigger>,
+) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal(
+  props: React.ComponentProps<typeof DrawerPrimitive.Portal>,
+) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose(props: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      className={cn(
+        "fixed inset-0 z-50 bg-black/32 backdrop-blur-sm data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className,
+      )}
+      data-slot="drawer-overlay"
+      {...props}
+    />
+  );
+}
+
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal>
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        className={cn(
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[82vh] data-[vaul-drawer-direction=bottom]:rounded-t-2xl data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[82vh] data-[vaul-drawer-direction=top]:rounded-b-2xl data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-[calc(100%-(--spacing(12)))] data-[vaul-drawer-direction=right]:max-w-md data-[vaul-drawer-direction=right]:border-s",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-[calc(100%-(--spacing(12)))] data-[vaul-drawer-direction=left]:max-w-md data-[vaul-drawer-direction=left]:border-e",
+          className,
+        )}
+        data-slot="drawer-content"
+        {...props}
+      >
+        {/* Grab handle — shown for bottom/top drawers. */}
+        <div className="mx-auto mt-3 hidden h-1.5 w-12 shrink-0 rounded-full bg-border group-data-[vaul-drawer-direction=bottom]/drawer-content:block group-data-[vaul-drawer-direction=top]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-1.5 p-6 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center md:group-data-[vaul-drawer-direction=bottom]/drawer-content:text-left",
+        className,
+      )}
+      data-slot="drawer-header"
+      {...props}
+    />
+  );
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "mt-auto flex flex-col gap-2 border-t bg-muted/72 px-6 py-4",
+        className,
+      )}
+      data-slot="drawer-footer"
+      {...props}
+    />
+  );
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      className={cn("font-semibold text-xl leading-none", className)}
+      data-slot="drawer-title"
+      {...props}
+    />
+  );
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      className={cn("text-muted-foreground text-sm", className)}
+      data-slot="drawer-description"
+      {...props}
+    />
+  );
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};

package/src/components/ui/empty.tsx

@@ -0,0 +1,127 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils/css";
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance p-6 text-center md:p-12",
+        className,
+      )}
+      data-slot="empty"
+      {...props}
+    />
+  );
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex max-w-sm flex-col items-center text-center",
+        className,
+      )}
+      data-slot="empty-header"
+      {...props}
+    />
+  );
+}
+
+const emptyMediaVariants = cva(
+  "flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    defaultVariants: {
+      variant: "default",
+    },
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "relative flex size-9 shrink-0 items-center justify-center rounded-md border bg-card text-foreground shadow-sm/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/6%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5",
+      },
+    },
+  },
+);
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      className={cn("relative mb-6", className)}
+      data-slot="empty-media"
+      data-variant={variant}
+      {...props}
+    >
+      {variant === "icon" && (
+        <>
+          <div
+            aria-hidden="true"
+            className={cn(
+              emptyMediaVariants({ className, variant }),
+              "-translate-x-0.5 -rotate-10 pointer-events-none absolute bottom-px origin-bottom-left scale-84 shadow-none",
+            )}
+          />
+          <div
+            aria-hidden="true"
+            className={cn(
+              emptyMediaVariants({ className, variant }),
+              "pointer-events-none absolute bottom-px origin-bottom-right translate-x-0.5 rotate-10 scale-84 shadow-none",
+            )}
+          />
+        </>
+      )}
+      <div
+        className={cn(emptyMediaVariants({ className, variant }))}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("font-heading font-semibold text-xl", className)}
+      data-slot="empty-title"
+      {...props}
+    />
+  );
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      className={cn(
+        "text-muted-foreground text-sm [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-slot=empty-title]+&]:mt-1",
+        className,
+      )}
+      data-slot="empty-description"
+      {...props}
+    />
+  );
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm",
+        className,
+      )}
+      data-slot="empty-content"
+      {...props}
+    />
+  );
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+};

package/src/components/ui/fab.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+import { Button, type ButtonProps } from "./button";
+
+const fabVariants = cva(
+  "fixed z-50 rounded-full shadow-lg transition-transform duration-150 hover:scale-105 active:scale-95 before:rounded-full",
+  {
+    defaultVariants: {
+      position: "bottom-right",
+    },
+    variants: {
+      position: {
+        "bottom-right": "right-4 bottom-4 sm:right-6 sm:bottom-6",
+        "bottom-left": "bottom-4 left-4 sm:bottom-6 sm:left-6",
+        "top-right": "top-4 right-4 sm:top-6 sm:right-6",
+        "top-left": "top-4 left-4 sm:top-6 sm:left-6",
+      },
+    },
+  },
+);
+
+export interface FabProps extends ButtonProps {
+  position?: VariantProps<typeof fabVariants>["position"];
+}
+
+/**
+ * Floating action button — a fixed, round icon button used to summon overlays
+ * such as chat widgets. Composes `Button`, so all button variants/sizes apply.
+ */
+function Fab({ className, position, size = "icon-xl", ...props }: FabProps) {
+  return (
+    <Button
+      className={cn(fabVariants({ className, position }))}
+      data-slot="fab"
+      size={size}
+      {...props}
+    />
+  );
+}
+
+export { Fab, fabVariants };

package/src/components/ui/featured-icon.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+const featuredIconVariants = cva(
+  "relative inline-flex shrink-0 select-none items-center justify-center align-middle [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    compoundVariants: [
+      // The bordered themes are squared, with corners that scale with the size.
+      {
+        className: "rounded-md before:rounded-[calc(var(--radius-md)-3px)]",
+        size: "sm",
+        theme: ["modern", "modern-neue"],
+      },
+      {
+        className: "rounded-lg before:rounded-[calc(var(--radius-lg)-3px)]",
+        size: "md",
+        theme: ["modern", "modern-neue"],
+      },
+      {
+        className: "rounded-[10px] before:rounded-[7px]",
+        size: "lg",
+        theme: ["modern", "modern-neue"],
+      },
+      {
+        className: "rounded-xl before:rounded-[calc(var(--radius-xl)-3px)]",
+        size: "xl",
+        theme: ["modern", "modern-neue"],
+      },
+    ],
+    defaultVariants: { color: "brand", size: "md", theme: "light" },
+    variants: {
+      // Colors are applied through the theme/color maps below — the variant
+      // exists so cva carries the prop type.
+      color: { brand: "", error: "", gray: "", success: "", warning: "" },
+      size: {
+        sm: "size-8 [&_svg:not([class*='size-'])]:size-4",
+        md: "size-10 [&_svg:not([class*='size-'])]:size-5",
+        lg: "size-12 [&_svg:not([class*='size-'])]:size-6",
+        xl: "size-14 [&_svg:not([class*='size-'])]:size-7",
+      },
+      theme: {
+        dark: "rounded-full text-white shadow-xs not-dark:inset-shadow-[0_1px_--theme(--color-white/16%)]",
+        gradient:
+          "rounded-full bg-linear-to-b from-white/24 to-white/0 text-white shadow-xs inset-shadow-[0_1px_--theme(--color-white/24%)]",
+        light: "rounded-full",
+        modern:
+          "border border-input bg-background shadow-xs not-dark:bg-clip-padding dark:bg-input/32",
+        "modern-neue":
+          "border border-input bg-background shadow-xs not-dark:bg-clip-padding dark:bg-input/32 before:pointer-events-none before:absolute before:inset-[3px] before:border before:border-border/72 before:shadow-xs",
+        outline:
+          "rounded-full before:pointer-events-none before:absolute before:inset-0 before:rounded-full before:border-2 before:border-current before:opacity-12 after:pointer-events-none after:absolute after:inset-[15%] after:rounded-full after:border-2 after:border-current after:opacity-32",
+      },
+    },
+  },
+);
+
+type FeaturedIconTheme = NonNullable<
+  VariantProps<typeof featuredIconVariants>["theme"]
+>;
+type FeaturedIconColor = NonNullable<
+  VariantProps<typeof featuredIconVariants>["color"]
+>;
+
+/** Per-theme color treatments, using the design-system tonal/solid tokens. */
+const featuredIconColors: Record<
+  FeaturedIconTheme,
+  Record<FeaturedIconColor, string>
+> = {
+  dark: {
+    brand: "bg-brand",
+    error: "bg-destructive",
+    gray: "bg-secondary-foreground text-background",
+    success: "bg-success",
+    warning: "bg-warning",
+  },
+  gradient: {
+    brand: "bg-brand",
+    error: "bg-destructive",
+    gray: "bg-secondary-foreground text-background",
+    success: "bg-success",
+    warning: "bg-warning",
+  },
+  light: {
+    brand: "bg-brand/12 text-sidebar-primary dark:bg-brand/20",
+    error: "bg-destructive/8 text-destructive-foreground dark:bg-destructive/16",
+    gray: "bg-secondary text-secondary-foreground",
+    success: "bg-success/8 text-success-foreground dark:bg-success/16",
+    warning: "bg-warning/8 text-warning-foreground dark:bg-warning/16",
+  },
+  modern: {
+    brand: "text-sidebar-primary",
+    error: "text-destructive-foreground",
+    gray: "text-foreground",
+    success: "text-success-foreground",
+    warning: "text-warning-foreground",
+  },
+  "modern-neue": {
+    brand: "text-sidebar-primary",
+    error: "text-destructive-foreground",
+    gray: "text-foreground",
+    success: "text-success-foreground",
+    warning: "text-warning-foreground",
+  },
+  outline: {
+    brand: "text-sidebar-primary",
+    error: "text-destructive-foreground",
+    gray: "text-muted-foreground",
+    success: "text-success-foreground",
+    warning: "text-warning-foreground",
+  },
+};
+
+interface FeaturedIconProps extends Omit<React.ComponentProps<"span">, "color"> {
+  theme?: FeaturedIconTheme;
+  color?: FeaturedIconColor;
+  size?: VariantProps<typeof featuredIconVariants>["size"];
+  /** Icon component rendered inside (e.g. a lucide icon). Or pass children. */
+  icon?: React.ElementType;
+}
+
+function FeaturedIcon({
+  className,
+  theme = "light",
+  color = "brand",
+  size,
+  icon: Icon,
+  children,
+  ...props
+}: FeaturedIconProps) {
+  return (
+    <span
+      className={cn(
+        featuredIconVariants({ color, size, theme }),
+        featuredIconColors[theme][color],
+        className,
+      )}
+      data-slot="featured-icon"
+      {...props}
+    >
+      {children ?? (Icon ? <Icon /> : null)}
+    </span>
+  );
+}
+
+export { FeaturedIcon, featuredIconVariants };