@dub/ui 0.0.8 → 0.0.9

package/src/modal.tsx

@@ -1,102 +0,0 @@
-"use client";
-
-import { cn } from "@dub/utils";
-import * as Dialog from "@radix-ui/react-dialog";
-import { useRouter } from "next/navigation";
-import { Dispatch, SetStateAction } from "react";
-import { Drawer } from "vaul";
-import { useMediaQuery } from "./hooks";
-
-export function Modal({
-  children,
-  className,
-  dialogOnly,
-  showModal,
-  setShowModal,
-  onClose,
-  preventDefaultClose,
-}: {
-  children: React.ReactNode;
-  className?: string;
-  dialogOnly?: boolean;
-  showModal?: boolean;
-  setShowModal?: Dispatch<SetStateAction<boolean>>;
-  onClose?: () => void;
-  preventDefaultClose?: boolean;
-}) {
-  const router = useRouter();
-
-  const closeModal = ({ dragged }: { dragged?: boolean } = {}) => {
-    if (preventDefaultClose && !dragged) {
-      return;
-    }
-    // fire onClose event if provided
-    onClose && onClose();
-
-    // if setShowModal is defined, use it to close modal
-    if (setShowModal) {
-      setShowModal(false);
-      // else, this is intercepting route @modal
-    } else {
-      router.back();
-    }
-  };
-  const { isMobile } = useMediaQuery();
-
-  if (isMobile && !dialogOnly) {
-    return (
-      <Drawer.Root
-        open={setShowModal ? showModal : true}
-        onOpenChange={(open) => {
-          if (!open) {
-            closeModal({ dragged: true });
-          }
-        }}
-      >
-        <Drawer.Overlay className="fixed inset-0 z-40 bg-gray-100 bg-opacity-10 backdrop-blur" />
-        <Drawer.Portal>
-          <Drawer.Content
-            className={cn(
-              "fixed bottom-0 left-0 right-0 z-50 mt-24 rounded-t-[10px] border-t border-gray-200 bg-white",
-              className,
-            )}
-          >
-            <div className="sticky top-0 z-20 flex w-full items-center justify-center rounded-t-[10px] bg-inherit">
-              <div className="my-3 h-1 w-12 rounded-full bg-gray-300" />
-            </div>
-            {children}
-          </Drawer.Content>
-          <Drawer.Overlay />
-        </Drawer.Portal>
-      </Drawer.Root>
-    );
-  }
-  return (
-    <Dialog.Root
-      open={setShowModal ? showModal : true}
-      onOpenChange={(open) => {
-        if (!open) {
-          closeModal();
-        }
-      }}
-    >
-      <Dialog.Portal>
-        <Dialog.Overlay
-          // for detecting when there's an active opened modal
-          id="modal-backdrop"
-          className="animate-fade-in fixed inset-0 z-40 bg-gray-100 bg-opacity-50 backdrop-blur-md"
-        />
-        <Dialog.Content
-          onOpenAutoFocus={(e) => e.preventDefault()}
-          onCloseAutoFocus={(e) => e.preventDefault()}
-          className={cn(
-            "animate-scale-in fixed inset-0 z-40 m-auto max-h-fit w-full max-w-md overflow-hidden border border-gray-200 bg-white p-0 shadow-xl md:rounded-2xl",
-            className,
-          )}
-        >
-          {children}
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-}

package/src/nav-mobile.tsx

@@ -1,108 +0,0 @@
-"use client";
-
-import { APP_DOMAIN, cn } from "@dub/utils";
-import { ChevronDown, Menu, X } from "lucide-react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
-import { useState } from "react";
-import { FEATURES_LIST } from "./content";
-import { navItems } from "./nav";
-
-export function NavMobile() {
-  const { domain = "dub.co" } = useParams() as { domain: string };
-  const [open, setOpen] = useState(false);
-  const [openFeatures, setOpenFeatures] = useState(false);
-
-  return (
-    <>
-      <button
-        onClick={() => setOpen(!open)}
-        className={cn(
-          "absolute right-3 top-3 z-40 rounded-full p-2 transition-colors duration-200 hover:bg-gray-200 focus:outline-none active:bg-gray-300 lg:hidden",
-          open && "hover:bg-gray-100 active:bg-gray-200",
-        )}
-      >
-        {open ? (
-          <X className="h-5 w-5 text-gray-600" />
-        ) : (
-          <Menu className="h-5 w-5 text-gray-600" />
-        )}
-      </button>
-      <nav
-        className={cn(
-          "fixed inset-0 z-20 hidden w-full bg-white px-5 py-16",
-          open && "block",
-        )}
-      >
-        <ul className="grid divide-y divide-gray-200">
-          <li className="py-3">
-            <button
-              className="flex w-full justify-between"
-              onClick={() => setOpenFeatures(!openFeatures)}
-            >
-              <p className="font-semibold">Features</p>
-              <ChevronDown
-                className={cn(
-                  "h-5 w-5 text-gray-500 transition-all",
-                  openFeatures && "rotate-180",
-                )}
-              />
-            </button>
-            {openFeatures && (
-              <div className="grid gap-4 overflow-hidden py-4">
-                {FEATURES_LIST.map(({ slug, icon: Icon, shortTitle }) => (
-                  <Link
-                    key={slug}
-                    href={
-                      domain === "dub.co"
-                        ? `/features/${slug}`
-                        : `https://dub.co/features/${slug}?utm_source=${domain}&utm_medium=referral&utm_campaign=custom-domain`
-                    }
-                    onClick={() => setOpen(false)}
-                    className="flex w-full space-x-2"
-                  >
-                    <Icon className="h-5 w-5 text-gray-500" />
-                    <span className="text-sm">{shortTitle}</span>
-                  </Link>
-                ))}
-              </div>
-            )}
-          </li>
-          {navItems.map(({ name, slug }) => (
-            <li key={slug} className="py-3">
-              <Link
-                href={
-                  domain === "dub.co"
-                    ? `/${slug}`
-                    : `https://dub.co/${slug}?utm_source=${domain}&utm_medium=referral&utm_campaign=custom-domain`
-                }
-                onClick={() => setOpen(false)}
-                className="flex w-full font-semibold capitalize"
-              >
-                {name}
-              </Link>
-            </li>
-          ))}
-
-          <li className="py-3">
-            <Link
-              href={`${APP_DOMAIN}/login`}
-              className="flex w-full font-semibold capitalize"
-            >
-              Log in
-            </Link>
-          </li>
-
-          <li className="py-3">
-            <Link
-              href={`${APP_DOMAIN}/register`}
-              className="flex w-full font-semibold capitalize"
-            >
-              Sign Up
-            </Link>
-          </li>
-        </ul>
-      </nav>
-    </>
-  );
-}

package/src/nav.tsx

@@ -1,205 +0,0 @@
-"use client";
-
-import { APP_DOMAIN, SHOW_BACKGROUND_SEGMENTS, cn } from "@dub/utils";
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import va from "@vercel/analytics";
-import { ChevronDown } from "lucide-react";
-import Link from "next/link";
-import { useParams, useSelectedLayoutSegment } from "next/navigation";
-import { FEATURES_LIST } from "./content";
-import { useScroll } from "./hooks";
-import { LogoType } from "./icons";
-import { MaxWidthWrapper } from "./max-width-wrapper";
-
-export const navItems = [
-  {
-    name: "Customers",
-    slug: "customers",
-  },
-  {
-    name: "Changelog",
-    slug: "changelog",
-  },
-  {
-    name: "Help",
-    slug: "help",
-  },
-  {
-    name: "Pricing",
-    slug: "pricing",
-  },
-];
-
-export function Nav() {
-  const { domain = "dub.co" } = useParams() as { domain: string };
-  const scrolled = useScroll(80);
-  const selectedLayout = useSelectedLayoutSegment();
-  const helpCenter = selectedLayout === "help";
-
-  return (
-    <div
-      className={cn(`sticky inset-x-0 top-0 z-30 w-full transition-all`, {
-        "border-b border-gray-200 bg-white/75 backdrop-blur-lg": scrolled,
-        "border-b border-gray-200 bg-white":
-          selectedLayout && !SHOW_BACKGROUND_SEGMENTS.includes(selectedLayout),
-      })}
-    >
-      <MaxWidthWrapper
-        {...(helpCenter && {
-          className: "max-w-screen-lg",
-        })}
-      >
-        <div className="flex h-14 items-center justify-between">
-          <div className="flex items-center space-x-4">
-            <Link
-              href={domain === "dub.co" ? "/" : `https://dub.co`}
-              {...(domain !== "dub.co" && {
-                onClick: () => {
-                  va.track("Referred from custom domain", {
-                    domain,
-                    medium: "logo",
-                  });
-                },
-              })}
-            >
-              <LogoType />
-            </Link>
-            {helpCenter ? (
-              <div className="flex items-center">
-                <div className="mr-3 h-5 border-l-2 border-gray-400" />
-                <Link
-                  href="/help"
-                  className="font-display text-lg font-bold text-gray-700"
-                >
-                  Help Center
-                </Link>
-              </div>
-            ) : (
-              <NavigationMenuPrimitive.Root
-                delayDuration={0}
-                className="relative hidden lg:block"
-              >
-                <NavigationMenuPrimitive.List className="flex flex-row space-x-2 p-4">
-                  <NavigationMenuPrimitive.Item>
-                    <NavigationMenuPrimitive.Trigger className="group flex items-center space-x-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-gray-100 focus:outline-none">
-                      <p
-                        className={cn(
-                          "text-sm font-medium text-gray-500 transition-colors ease-out group-hover:text-black",
-                          {
-                            "text-black": selectedLayout === "features",
-                          },
-                        )}
-                      >
-                        Features
-                      </p>
-                      <ChevronDown className="h-4 w-4 transition-all group-data-[state=open]:rotate-180" />
-                    </NavigationMenuPrimitive.Trigger>
-
-                    <NavigationMenuPrimitive.Content>
-                      <div className="grid w-[32rem] grid-cols-2 gap-1 p-3">
-                        {FEATURES_LIST.map(
-                          ({ slug, icon: Icon, title, shortTitle }) => (
-                            <Link
-                              key={slug}
-                              href={
-                                domain === "dub.co"
-                                  ? `/features/${slug}`
-                                  : `https://dub.co/features/${slug}`
-                              }
-                              {...(domain !== "dub.co" && {
-                                onClick: () => {
-                                  va.track("Referred from custom domain", {
-                                    domain,
-                                    medium: `navbar item (features/${slug})`,
-                                  });
-                                },
-                              })}
-                              className="rounded-lg p-3 transition-colors hover:bg-gray-100 active:bg-gray-200"
-                            >
-                              <div className="flex items-center space-x-2">
-                                <Icon className="h-4 w-4 text-gray-700" />
-                                <p className="text-sm font-medium text-gray-700">
-                                  {shortTitle}
-                                </p>
-                              </div>
-                              <p className="mt-1 line-clamp-1 text-sm text-gray-500">
-                                {title}
-                              </p>
-                            </Link>
-                          ),
-                        )}
-                      </div>
-                    </NavigationMenuPrimitive.Content>
-                  </NavigationMenuPrimitive.Item>
-
-                  {navItems.map(({ name, slug }) => (
-                    <NavigationMenuPrimitive.Item key={slug} asChild>
-                      <Link
-                        id={`nav-${slug}`}
-                        key={slug}
-                        href={
-                          domain === "dub.co"
-                            ? `/${slug}`
-                            : `https://dub.co/${slug}`
-                        }
-                        {...(domain !== "dub.co" && {
-                          onClick: () => {
-                            va.track("Referred from custom domain", {
-                              domain,
-                              medium: `navbar item (${slug})`,
-                            });
-                          },
-                        })}
-                        className={cn(
-                          "rounded-md px-3 py-2 text-sm font-medium text-gray-500 transition-colors ease-out hover:text-black",
-                          {
-                            "text-black": selectedLayout === slug,
-                          },
-                        )}
-                      >
-                        {name}
-                      </Link>
-                    </NavigationMenuPrimitive.Item>
-                  ))}
-                </NavigationMenuPrimitive.List>
-
-                <NavigationMenuPrimitive.Viewport className="data-[state=closed]:animate-scale-out-content data-[state=open]:animate-scale-in-content absolute left-0 top-full flex w-[var(--radix-navigation-menu-viewport-width)] origin-[top_center] justify-start rounded-lg border border-gray-200 bg-white shadow-lg" />
-              </NavigationMenuPrimitive.Root>
-            )}
-          </div>
-
-          <div className="hidden lg:block">
-            <Link
-              href={`${APP_DOMAIN}/login`}
-              {...(domain !== "dub.co" && {
-                onClick: () => {
-                  va.track("Referred from custom domain", {
-                    domain,
-                    medium: `navbar item (login)`,
-                  });
-                },
-              })}
-              className="animate-fade-in rounded-full px-4 py-1.5 text-sm font-medium text-gray-500 transition-colors ease-out hover:text-black"
-            >
-              Log in
-            </Link>
-            <Link
-              href={`${APP_DOMAIN}/register`}
-              {...(domain !== "dub.co" && {
-                onClick: () => {
-                  va.track("Referred from custom domain", {
-                    domain,
-                    medium: `navbar item (signup)`,
-                  });
-                },
-              })}
-              className="animate-fade-in rounded-full border border-black bg-black px-4 py-1.5 text-sm text-white transition-all hover:bg-white hover:text-black"
-            >
-              Sign Up
-            </Link>
-          </div>
-        </div>
-      </MaxWidthWrapper>
-    </div>
-  );
-}

package/src/popover.tsx

@@ -1,61 +0,0 @@
-"use client";
-
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { Dispatch, ReactNode, SetStateAction } from "react";
-import { Drawer } from "vaul";
-import { useMediaQuery } from "./hooks";
-
-export function Popover({
-  children,
-  content,
-  align = "center",
-  openPopover,
-  setOpenPopover,
-  mobileOnly,
-}: {
-  children: ReactNode;
-  content: ReactNode | string;
-  align?: "center" | "start" | "end";
-  openPopover: boolean;
-  setOpenPopover: Dispatch<SetStateAction<boolean>>;
-  mobileOnly?: boolean;
-}) {
-  const { isMobile } = useMediaQuery();
-
-  if (mobileOnly || isMobile) {
-    return (
-      <Drawer.Root open={openPopover} onOpenChange={setOpenPopover}>
-        <div className="sm:hidden">{children}</div>
-        <Drawer.Overlay className="fixed inset-0 z-40 bg-gray-100 bg-opacity-10 backdrop-blur" />
-        <Drawer.Portal>
-          <Drawer.Content className="fixed bottom-0 left-0 right-0 z-50 mt-24 rounded-t-[10px] border-t border-gray-200 bg-white">
-            <div className="sticky top-0 z-20 flex w-full items-center justify-center rounded-t-[10px] bg-inherit">
-              <div className="my-3 h-1 w-12 rounded-full bg-gray-300" />
-            </div>
-            <div className="flex min-h-[150px] w-full items-center justify-center overflow-hidden bg-white pb-8 align-middle shadow-xl">
-              {content}
-            </div>
-          </Drawer.Content>
-          <Drawer.Overlay />
-        </Drawer.Portal>
-      </Drawer.Root>
-    );
-  }
-
-  return (
-    <PopoverPrimitive.Root open={openPopover} onOpenChange={setOpenPopover}>
-      <PopoverPrimitive.Trigger className="sm:inline-flex" asChild>
-        {children}
-      </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Content
-          sideOffset={8}
-          align={align}
-          className="animate-slide-up-fade z-50 items-center rounded-md border border-gray-200 bg-white drop-shadow-lg sm:block"
-        >
-          {content}
-        </PopoverPrimitive.Content>
-      </PopoverPrimitive.Portal>
-    </PopoverPrimitive.Root>
-  );
-}

package/src/styles.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/src/switch.tsx

@@ -1,60 +0,0 @@
-"use client";
-
-import { cn } from "@dub/utils";
-import * as SwitchPrimitive from "@radix-ui/react-switch";
-import { Dispatch, ReactNode, SetStateAction } from "react";
-import { Tooltip } from "./tooltip";
-
-export function Switch({
-  fn,
-  trackDimensions,
-  thumbDimensions,
-  thumbTranslate,
-  checked = true,
-  disabled = false,
-  disabledTooltip,
-}: {
-  fn: Dispatch<SetStateAction<boolean>> | (() => void);
-  trackDimensions?: string;
-  thumbDimensions?: string;
-  thumbTranslate?: string;
-  checked?: boolean;
-  disabled?: boolean;
-  disabledTooltip?: string | ReactNode;
-}) {
-  if (disabledTooltip) {
-    return (
-      <Tooltip content={disabledTooltip}>
-        <div className="radix-state-checked:bg-gray-300 relative inline-flex h-4 w-8 flex-shrink-0 cursor-not-allowed rounded-full border-2 border-transparent bg-gray-200">
-          <div className="h-3 w-3 transform rounded-full bg-white shadow-lg" />
-        </div>
-      </Tooltip>
-    );
-  }
-
-  return (
-    <SwitchPrimitive.Root
-      checked={checked}
-      name="switch"
-      onCheckedChange={(checked) => fn(checked)}
-      disabled={disabled}
-      className={cn(
-        disabled
-          ? "cursor-not-allowed bg-gray-300"
-          : "radix-state-checked:bg-blue-500 radix-state-unchecked:bg-gray-200 cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75",
-        "relative inline-flex h-4 w-8 flex-shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out",
-        trackDimensions,
-      )}
-    >
-      <SwitchPrimitive.Thumb
-        className={cn(
-          `radix-state-checked:${thumbTranslate}`,
-          "radix-state-unchecked:translate-x-0",
-          `pointer-events-none h-3 w-3 translate-x-4 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`,
-          thumbDimensions,
-          thumbTranslate,
-        )}
-      />
-    </SwitchPrimitive.Root>
-  );
-}

package/src/tab-select.tsx

@@ -1,27 +0,0 @@
-export function TabSelect({
-  options,
-  selected,
-  selectAction,
-}: {
-  options: string[];
-  selected: string;
-  selectAction: (option: string) => void;
-}) {
-  return (
-    <div className="relative inline-flex items-center space-x-3">
-      {options.map((option) => (
-        <button
-          key={option}
-          className={`${
-            option === selected
-              ? "bg-gray-200 text-gray-800"
-              : "bg-gray-50 text-gray-600 hover:bg-gray-100"
-          } rounded-md px-2 py-1 text-sm font-medium capitalize transition-all duration-75 active:scale-90 sm:px-3`}
-          onClick={() => selectAction(option)}
-        >
-          {option}
-        </button>
-      ))}
-    </div>
-  );
-}