@dub/ui 0.0.0

package/dist/max-width-wrapper.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+declare function MaxWidthWrapper({ className, children, }: {
+    className?: string;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+export { MaxWidthWrapper };

package/dist/max-width-wrapper.mjs

@@ -0,0 +1,2 @@
+"use client"
+import{a}from"./chunk-PPNWHWNQ.mjs";export{a as MaxWidthWrapper};

package/dist/modal.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Dispatch, SetStateAction } from 'react';
+
+declare 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;
+}): react_jsx_runtime.JSX.Element;
+
+export { Modal };

package/dist/modal.mjs

@@ -0,0 +1,2 @@
+"use client"
+import{a}from"./chunk-B4HABAR3.mjs";import"./chunk-NHHVF35L.mjs";export{a as Modal};

package/dist/nav-mobile.css

@@ -0,0 +1 @@
+.loading-dots{display:inline-flex;align-items:center}.loading-dots .spacer{margin-right:2px}.loading-dots span{animation-name:blink;animation-duration:1.4s;animation-iteration-count:infinite;animation-fill-mode:both;width:5px;height:5px;border-radius:50%;display:inline-block;margin:0 1px}.loading-dots span:nth-of-type(2){animation-delay:.2s}.loading-dots span:nth-of-type(3){animation-delay:.4s}@keyframes blink{0%{opacity:.2}20%{opacity:1}to{opacity:.2}}

package/dist/nav-mobile.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function NavMobile(): react_jsx_runtime.JSX.Element;
+
+export { NavMobile };

package/dist/nav-mobile.mjs

@@ -0,0 +1,2 @@
+"use client"
+import{a}from"./chunk-B3VKF2VA.mjs";import"./chunk-5WZZBGKJ.mjs";import"./chunk-J63GHRZH.mjs";import"./chunk-PPNWHWNQ.mjs";import"./chunk-NHHVF35L.mjs";import"./chunk-U7OUT2WV.mjs";import"./chunk-EHYVEIOL.mjs";import"./chunk-JLET4OCX.mjs";import"./chunk-GSQUGPJ2.mjs";import"./chunk-5EWSH7PD.mjs";import"./chunk-6DKNMNDW.mjs";import"./chunk-XZSQWDME.mjs";import"./chunk-PPR7AQWS.mjs";import"./chunk-QP2EHAF7.mjs";import"./chunk-WURMVTJP.mjs";import"./chunk-2TGXECZQ.mjs";import"./chunk-Z5P2KHPP.mjs";import"./chunk-EY55E5DB.mjs";import"./chunk-MURAUI3W.mjs";import"./chunk-T4YFARK5.mjs";import"./chunk-OYEGFR5W.mjs";export{a as NavMobile};

package/dist/nav.css

@@ -0,0 +1 @@
+.loading-dots{display:inline-flex;align-items:center}.loading-dots .spacer{margin-right:2px}.loading-dots span{animation-name:blink;animation-duration:1.4s;animation-iteration-count:infinite;animation-fill-mode:both;width:5px;height:5px;border-radius:50%;display:inline-block;margin:0 1px}.loading-dots span:nth-of-type(2){animation-delay:.2s}.loading-dots span:nth-of-type(3){animation-delay:.4s}@keyframes blink{0%{opacity:.2}20%{opacity:1}to{opacity:.2}}

package/dist/nav.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const navItems: {
+    name: string;
+    slug: string;
+}[];
+declare function Nav(): react_jsx_runtime.JSX.Element;
+
+export { Nav, navItems };

package/dist/nav.mjs

@@ -0,0 +1,2 @@
+"use client"
+import{a,b}from"./chunk-5WZZBGKJ.mjs";import"./chunk-J63GHRZH.mjs";import"./chunk-PPNWHWNQ.mjs";import"./chunk-NHHVF35L.mjs";import"./chunk-U7OUT2WV.mjs";import"./chunk-EHYVEIOL.mjs";import"./chunk-JLET4OCX.mjs";import"./chunk-GSQUGPJ2.mjs";import"./chunk-5EWSH7PD.mjs";import"./chunk-6DKNMNDW.mjs";import"./chunk-XZSQWDME.mjs";import"./chunk-PPR7AQWS.mjs";import"./chunk-QP2EHAF7.mjs";import"./chunk-WURMVTJP.mjs";import"./chunk-2TGXECZQ.mjs";import"./chunk-Z5P2KHPP.mjs";import"./chunk-EY55E5DB.mjs";import"./chunk-MURAUI3W.mjs";import"./chunk-T4YFARK5.mjs";import"./chunk-OYEGFR5W.mjs";export{b as Nav,a as navItems};

package/dist/number-tooltip.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function NumberTooltip({ value, unit, children, lastClicked, }: {
+    value?: number | null;
+    unit?: string;
+    children: ReactNode;
+    lastClicked?: Date | null;
+}): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode> | React.PromiseLikeOfReactNode | null | undefined;
+
+export { NumberTooltip };

package/dist/number-tooltip.mjs

@@ -0,0 +1,2 @@
+"use client"
+import{a}from"./chunk-AACJEMFS.mjs";import"./chunk-2ZQKPJ36.mjs";import"./chunk-NHHVF35L.mjs";import"./chunk-AUBFB4SI.mjs";export{a as NumberTooltip};

package/dist/number.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+declare function Number({ value, unit, children, lastClicked, }: {
+    value?: number | null;
+    unit?: string;
+    children: ReactNode;
+    lastClicked?: Date | null;
+}): string | number | boolean | Iterable<ReactNode> | React.PromiseLikeOfReactNode | react_jsx_runtime.JSX.Element | null | undefined;
+
+export { Number };

package/dist/number.mjs

@@ -0,0 +1,2 @@
+"use client"
+import{a}from"./chunk-KQFL4H7A.mjs";import"./chunk-2ZQKPJ36.mjs";import"./chunk-NHHVF35L.mjs";import"./chunk-AUBFB4SI.mjs";export{a as Number};

package/dist/popover.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, Dispatch, SetStateAction } from 'react';
+
+declare function Popover({ children, content, align, openPopover, setOpenPopover, mobileOnly, }: {
+    children: ReactNode;
+    content: ReactNode | string;
+    align?: "center" | "start" | "end";
+    openPopover: boolean;
+    setOpenPopover: Dispatch<SetStateAction<boolean>>;
+    mobileOnly?: boolean;
+}): react_jsx_runtime.JSX.Element;
+
+export { Popover };

package/dist/popover.mjs

@@ -0,0 +1,2 @@
+"use client"
+import{a}from"./chunk-FMUX4F5B.mjs";import"./chunk-NHHVF35L.mjs";export{a as Popover};

package/dist/switch.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Dispatch, SetStateAction, ReactNode } from 'react';
+
+declare function Switch({ fn, trackDimensions, thumbDimensions, thumbTranslate, checked, disabled, disabledTooltip, }: {
+    fn: Dispatch<SetStateAction<boolean>> | (() => void);
+    trackDimensions?: string;
+    thumbDimensions?: string;
+    thumbTranslate?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    disabledTooltip?: string | ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+export { Switch };

package/dist/switch.mjs

@@ -0,0 +1,2 @@
+"use client"
+import{a}from"./chunk-Q64KZRX2.mjs";import"./chunk-MO5Z5S7B.mjs";import"./chunk-NHHVF35L.mjs";export{a as Switch};

package/dist/tab-select.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function TabSelect({ options, selected, selectAction, }: {
+    options: string[];
+    selected: string;
+    selectAction: (option: string) => void;
+}): react_jsx_runtime.JSX.Element;
+
+export { TabSelect };

package/dist/tab-select.mjs

@@ -0,0 +1,2 @@
+"use client"
+import{a}from"./chunk-SN3ZPBNA.mjs";export{a as TabSelect};

package/dist/tooltip.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function Tooltip({ children, content, fullWidth, }: {
+    children: ReactNode;
+    content: ReactNode | string;
+    fullWidth?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function TooltipContent({ title, cta, href, target, onClick, }: {
+    title: string;
+    cta?: string;
+    href?: string;
+    target?: string;
+    onClick?: () => void;
+}): react_jsx_runtime.JSX.Element;
+declare function SimpleTooltipContent({ title, cta, href, }: {
+    title: string;
+    cta: string;
+    href: string;
+}): react_jsx_runtime.JSX.Element;
+declare function InfoTooltip({ content }: {
+    content: ReactNode | string;
+}): react_jsx_runtime.JSX.Element;
+declare function NumberTooltip({ value, unit, children, lastClicked, }: {
+    value?: number | null;
+    unit?: string;
+    children: ReactNode;
+    lastClicked?: Date | null;
+}): string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<ReactNode> | React.PromiseLikeOfReactNode | null | undefined;
+
+export { InfoTooltip, NumberTooltip, SimpleTooltipContent, Tooltip, TooltipContent };

package/dist/tooltip.mjs

@@ -0,0 +1,2 @@
+"use client"
+import{a,b,c,d,e}from"./chunk-MO5Z5S7B.mjs";import"./chunk-NHHVF35L.mjs";export{d as InfoTooltip,e as NumberTooltip,c as SimpleTooltipContent,a as Tooltip,b as TooltipContent};

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@dub/ui",
+  "description": "UI components for Dub.co",
+  "version": "0.0.0",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./dist",
+    "./styles.css": "./dist/index.css"
+  },
+  "scripts": {
+    "build": "tsup",
+    "lint": "eslint src/",
+    "dev": "tsup --watch",
+    "check-types": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "next": "13.5.4",
+    "@vercel/analytics": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.5",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.31",
+    "react": "^18.2.0",
+    "next": "13.5.4",
+    "tailwind-config": "workspace:*",
+    "tailwindcss": "^3.3.3",
+    "tsconfig": "workspace:*",
+    "tsup": "^6.1.3",
+    "typescript": "^5.1.6"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.0.1",
+    "@radix-ui/react-dialog": "1.0.3",
+    "@radix-ui/react-navigation-menu": "^1.1.2",
+    "@radix-ui/react-popover": "1.0.5",
+    "@radix-ui/react-switch": "^1.0.1",
+    "@radix-ui/react-tooltip": "^1.0.2",
+    "class-variance-authority": "^0.7.0",
+    "@dub/utils": "workspace:*",
+    "lucide-react": "^0.284.0",
+    "sonner": "^0.5.0",
+    "swr": "^2.1.5",
+    "use-debounce": "^8.0.4",
+    "vaul": "^0.6.8"
+  },
+  "author": "Steven Tey <stevensteel97@gmail.com>",
+  "homepage": "https://dub.co",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/steven-tey/dub.git"
+  },
+  "bugs": {
+    "url": "https://github.com/steven-tey/dub/issues"
+  },
+  "keywords": [
+    "dub",
+    "dub.co",
+    "ui"
+  ]
+}

package/postcss.config.js

@@ -0,0 +1,9 @@
+// If you want to use other PostCSS plugins, see the following:
+// https://tailwindcss.com/docs/using-with-preprocessors
+
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/src/accordion.tsx

@@ -0,0 +1,60 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { cn } from "@dub/utils";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn(
+      "border-b border-b-slate-200 py-3 last:border-none",
+      className,
+    )}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between font-medium transition-all sm:text-lg [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-5 w-5 transition-transform duration-300" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm text-gray-500 transition-all sm:text-base",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/src/avatar.tsx

@@ -0,0 +1,47 @@
+import { cn } from "@dub/utils";
+
+export function Avatar({
+  user = {},
+  className,
+}: {
+  user?: {
+    name?: string | null | undefined;
+    email?: string | null | undefined;
+    image?: string | null | undefined;
+  };
+  className?: string;
+}) {
+  if (!user) {
+    return (
+      <div
+        className={cn(
+          "h-10 w-10 animate-pulse rounded-full border border-gray-300 bg-gray-100",
+          className,
+        )}
+      />
+    );
+  }
+
+  return (
+    <img
+      alt={`Avatar for ${user?.name || user?.email}`}
+      src={
+        user?.image ||
+        `https://avatars.dicebear.com/api/micah/${user?.email}.svg`
+      }
+      className={cn("h-10 w-10 rounded-full border border-gray-300", className)}
+      draggable={false}
+    />
+  );
+}
+
+export function TokenAvatar({ id }: { id: string }) {
+  return (
+    <img
+      src={`https://api.dicebear.com/7.x/shapes/svg?seed=${id}`}
+      alt="avatar"
+      className="h-10 w-10 rounded-full"
+      draggable={false}
+    />
+  );
+}

package/src/background.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { SHOW_BACKGROUND_SEGMENTS } from "@dub/utils";
+import { useSelectedLayoutSegment } from "next/navigation";
+
+export function Background() {
+  let segment;
+  try {
+    segment = useSelectedLayoutSegment();
+  } catch (e) {
+    // this is for /welcome which is still on /pages router
+  }
+
+  return !segment || SHOW_BACKGROUND_SEGMENTS.includes(segment) ? (
+    <div style={styles.backgroundMain}>
+      <div style={styles.backgroundMainBefore} />
+      <div style={styles.backgroundMainAfter} />
+      <div style={styles.backgroundContent} />
+    </div>
+  ) : null;
+}
+
+const styles: { [key: string]: React.CSSProperties } = {
+  backgroundMain: {
+    width: "100vw",
+    minHeight: "100vh",
+    position: "fixed",
+    zIndex: -1,
+    display: "flex",
+    justifyContent: "center",
+    padding: "120px 24px 160px 24px",
+    pointerEvents: "none",
+  },
+  backgroundMainBefore: {
+    background: "radial-gradient(circle, rgba(2, 0, 36, 0) 0, #fafafa 100%)",
+    position: "absolute",
+    content: '""',
+    zIndex: 2,
+    width: "100%",
+    height: "100%",
+    top: 0,
+  },
+  backgroundMainAfter: {
+    content: '""',
+    backgroundImage: "url(https://d2vwwcvoksz7ty.cloudfront.net/grid.svg)",
+    zIndex: 1,
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    top: 0,
+    opacity: 0.4,
+    filter: "invert(1)",
+  },
+  backgroundContent: {
+    zIndex: 3,
+    width: "100%",
+    maxWidth: "640px",
+    backgroundImage: `radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 1) 0px, transparent 0%), 
+                      radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 1) 0px, transparent 50%),
+                      radial-gradient(at 52% 99%, hsla(354, 98%, 61%, 1) 0px, transparent 50%),
+                      radial-gradient(at 10% 29%, hsla(256, 96%, 67%, 1) 0px, transparent 50%),
+                      radial-gradient(at 97% 96%, hsla(38, 60%, 74%, 1) 0px, transparent 50%),
+                      radial-gradient(at 33% 50%, hsla(222, 67%, 73%, 1) 0px, transparent 50%),
+                      radial-gradient(at 79% 53%, hsla(343, 68%, 79%, 1) 0px, transparent 50%)`,
+    position: "absolute",
+    height: "100%",
+    filter: "blur(100px) saturate(150%)",
+    top: "80px",
+    opacity: 0.15,
+  },
+};

package/src/badge.tsx

@@ -0,0 +1,33 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@dub/utils";
+
+const badgeVariants = cva(
+  "max-w-fit rounded-full border px-2 py-px text-xs font-medium capitalize",
+  {
+    variants: {
+      variant: {
+        default: "border-gray-400 text-gray-500",
+        violet: "border-violet-600 bg-violet-600 text-white",
+        blue: "border-blue-500 bg-blue-500 text-white",
+        black: "border-black bg-black text-white",
+        gray: "border-gray-400 bg-gray-400 text-white",
+        neutral: "border-gray-400 text-gray-500",
+      },
+    },
+    defaultVariants: {
+      variant: "neutral",
+    },
+  },
+);
+
+interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <span className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

package/src/button.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { cn } from "@dub/utils";
+import { ReactNode } from "react";
+import { LoadingSpinner } from "./icons";
+import { Tooltip } from "./tooltip";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  text: string;
+  variant?: "primary" | "secondary" | "success" | "danger";
+  loading?: boolean;
+  icon?: ReactNode;
+  disabledTooltip?: string | ReactNode;
+}
+
+export function Button({
+  text,
+  variant = "primary",
+  loading,
+  icon,
+  disabledTooltip,
+  ...props
+}: ButtonProps) {
+  if (disabledTooltip) {
+    return (
+      <Tooltip content={disabledTooltip} fullWidth>
+        <div className="flex h-10 w-full cursor-not-allowed items-center justify-center rounded-md border border-gray-200 bg-gray-100 px-4 text-sm text-gray-400 transition-all focus:outline-none">
+          <p>{text}</p>
+        </div>
+      </Tooltip>
+    );
+  }
+  return (
+    <button
+      // if onClick is passed, it's a "button" type, otherwise it's being used in a form, hence "submit"
+      type={props.onClick ? "button" : "submit"}
+      className={cn(
+        "flex h-10 w-full items-center justify-center space-x-2 rounded-md border px-4 text-sm transition-all focus:outline-none",
+        props.disabled || loading
+          ? "cursor-not-allowed border-gray-200 bg-gray-100 text-gray-400"
+          : {
+              "border-black bg-black text-white hover:bg-white hover:text-black":
+                variant === "primary",
+              "border-gray-200 bg-white text-gray-500 hover:border-black hover:text-black":
+                variant === "secondary",
+              "border-blue-500 bg-blue-500 text-white hover:bg-white hover:text-blue-500":
+                variant === "success",
+              "border-red-500 bg-red-500 text-white hover:bg-white hover:text-red-500":
+                variant === "danger",
+            },
+        props.className,
+      )}
+      disabled={props.disabled || loading}
+      {...props}
+    >
+      {loading ? <LoadingSpinner /> : icon ? icon : null}
+      <p>{text}</p>
+    </button>
+  );
+}