@dub/ui 0.0.8 → 0.0.9

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