@dub/ui 0.0.8 → 0.0.10

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>
-  );
-}

package/src/tooltip.tsx

@@ -1,184 +0,0 @@
-"use client";
-
-import { nFormatter, timeAgo } from "@dub/utils";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { HelpCircle } from "lucide-react";
-import Link from "next/link";
-import { ReactNode } from "react";
-import { Drawer } from "vaul";
-import { useMediaQuery } from "./hooks";
-
-export function Tooltip({
-  children,
-  content,
-  fullWidth,
-}: {
-  children: ReactNode;
-  content: ReactNode | string;
-  fullWidth?: boolean;
-}) {
-  const { isMobile } = useMediaQuery();
-
-  if (isMobile) {
-    return (
-      <Drawer.Root>
-        <Drawer.Trigger
-          className={`${fullWidth ? "w-full" : "inline-flex"} md:hidden`}
-          onClick={(e) => {
-            e.stopPropagation();
-          }}
-        >
-          {children}
-        </Drawer.Trigger>
-        <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 align-middle shadow-xl">
-              {typeof content === "string" ? (
-                <span className="block text-center text-sm text-gray-700">
-                  {content}
-                </span>
-              ) : (
-                content
-              )}
-            </div>
-          </Drawer.Content>
-          <Drawer.Overlay />
-        </Drawer.Portal>
-      </Drawer.Root>
-    );
-  }
-  return (
-    <TooltipPrimitive.Provider delayDuration={100}>
-      <TooltipPrimitive.Root>
-        <TooltipPrimitive.Trigger className="md:inline-flex" asChild>
-          {children}
-        </TooltipPrimitive.Trigger>
-        {/* 
-            We don't use TooltipPrimitive.Portal here because for some reason it 
-            prevents you from selecting the contents of a tooltip when used inside a modal 
-        */}
-        <TooltipPrimitive.Content
-          sideOffset={8}
-          side="top"
-          className="animate-slide-up-fade z-[99] items-center overflow-hidden rounded-md border border-gray-200 bg-white shadow-md md:block"
-        >
-          {typeof content === "string" ? (
-            <div className="block max-w-xs px-4 py-2 text-center text-sm text-gray-700">
-              {content}
-            </div>
-          ) : (
-            content
-          )}
-        </TooltipPrimitive.Content>
-      </TooltipPrimitive.Root>
-    </TooltipPrimitive.Provider>
-  );
-}
-
-export function TooltipContent({
-  title,
-  cta,
-  href,
-  target,
-  onClick,
-}: {
-  title: string;
-  cta?: string;
-  href?: string;
-  target?: string;
-  onClick?: () => void;
-}) {
-  return (
-    <div className="flex flex-col items-center space-y-3 p-4 text-center md:max-w-xs">
-      <p className="text-sm text-gray-700">{title}</p>
-      {cta &&
-        (href ? (
-          <Link
-            href={href}
-            {...(target ? { target } : {})}
-            className="mt-4 w-full rounded-md border border-black bg-black px-3 py-1.5 text-center text-sm text-white transition-all hover:bg-white hover:text-black"
-          >
-            {cta}
-          </Link>
-        ) : onClick ? (
-          <button
-            type="button"
-            className="mt-4 w-full rounded-md border border-black bg-black px-3 py-1.5 text-center text-sm text-white transition-all hover:bg-white hover:text-black"
-            onClick={onClick}
-          >
-            {cta}
-          </button>
-        ) : null)}
-    </div>
-  );
-}
-
-export function SimpleTooltipContent({
-  title,
-  cta,
-  href,
-}: {
-  title: string;
-  cta: string;
-  href: string;
-}) {
-  return (
-    <div className="max-w-xs px-4 py-2 text-center text-sm text-gray-700">
-      {title}{" "}
-      <a
-        href={href}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="inline-flex text-gray-500 underline underline-offset-4 hover:text-gray-800"
-      >
-        {cta}
-      </a>
-    </div>
-  );
-}
-
-export function InfoTooltip({ content }: { content: ReactNode | string }) {
-  return (
-    <Tooltip content={content}>
-      <HelpCircle className="h-4 w-4 text-gray-500" />
-    </Tooltip>
-  );
-}
-
-export function NumberTooltip({
-  value,
-  unit = "total clicks",
-  children,
-  lastClicked,
-}: {
-  value?: number | null;
-  unit?: string;
-  children: ReactNode;
-  lastClicked?: Date | null;
-}) {
-  if ((!value || value < 1000) && !lastClicked) {
-    return children;
-  }
-  return (
-    <Tooltip
-      content={
-        <div className="block max-w-xs px-4 py-2 text-center text-sm text-gray-700">
-          <p className="text-sm font-semibold text-gray-700">
-            {nFormatter(value || 0, { full: true })} {unit}
-          </p>
-          {lastClicked && (
-            <p className="mt-1 text-xs text-gray-500">
-              Last clicked {timeAgo(lastClicked, { withAgo: true })}
-            </p>
-          )}
-        </div>
-      }
-    >
-      {children}
-    </Tooltip>
-  );
-}

package/tailwind.config.ts

@@ -1,9 +0,0 @@
-// tailwind config is required for editor support
-import sharedConfig from "@dub/tailwind-config/tailwind.config.ts";
-import type { Config } from "tailwindcss";
-
-const config: Pick<Config, "presets"> = {
-  presets: [sharedConfig],
-};
-
-export default config;

package/tsconfig.json

@@ -1,5 +0,0 @@
-{
-  "extends": "tsconfig/react-library.json",
-  "include": ["."],
-  "exclude": ["dist", "build", "node_modules"]
-}

package/tsup.config.ts

@@ -1,15 +0,0 @@
-import { defineConfig, Options } from "tsup";
-
-export default defineConfig((options: Options) => ({
-  entry: ["src/**/*.tsx"],
-  format: ["esm"],
-  esbuildOptions(options) {
-    options.banner = {
-      js: '"use client"',
-    };
-  },
-  dts: true,
-  minify: true,
-  external: ["react"],
-  ...options,
-}));