retail-design-system 1.0.0

package/apps/storybook/tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "allowImportingTsExtensions": true,
+    "erasableSyntaxOnly": true,
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "target": "ES2023",
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "types": ["node"],
+    "verbatimModuleSyntax": true
+  },
+  "include": ["vite.config.ts"]
+}

package/apps/storybook/vite.config.ts

@@ -0,0 +1,15 @@
+// oxlint-disable unicorn/prefer-module
+// oxlint-disable import/no-nodejs-modules
+
+import path from "node:path"
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "."),
+    },
+  },
+})

package/apps/web/app/(sidebar)/components/[...slugs]/get-child-block.ts

@@ -0,0 +1,17 @@
+import { notion } from "@/components/notion/notion"
+
+export type NotionBlock = Awaited<ReturnType<typeof notion.blocks.children.list>>["results"][number]
+
+export async function getChildBlocks(blockId: string, cursor?: string): Promise<NotionBlock[]> {
+  const response = await notion.blocks.children.list({
+    block_id: blockId,
+    start_cursor: cursor,
+  })
+
+  if (!response.has_more || !response.next_cursor) {
+    return response.results
+  }
+
+  const nextBlocks = await getChildBlocks(blockId, response.next_cursor)
+  return [...response.results, ...nextBlocks]
+}

package/apps/web/app/(sidebar)/components/[...slugs]/get-component-page-match.ts

@@ -0,0 +1,56 @@
+import { cacheTag } from "next/cache"
+import { getDirectChildPages } from "@/app/(sidebar)/components/[...slugs]/get-direct-child-block"
+import { pascalToKebabCase } from "@/app/(sidebar)/components/[...slugs]/pascal-to-kebab-case"
+
+const NOTION_PAGE_ID = "325b76f65e6e80c49a65d7bbd2636d1e"
+
+interface ComponentPage {
+  childPageIds: string[]
+  id: string
+  slug: string
+}
+
+interface ComponentPageMatch {
+  childPageId?: string
+  pageId: string
+}
+
+export async function getComponentPageMatch(slug: string): Promise<ComponentPageMatch | undefined> {
+  const pages = await getComponentPages()
+  const matchedPage = pages.find((page) => page.slug === slug)
+
+  if (!matchedPage) {
+    return undefined
+  }
+
+  return {
+    childPageId: matchedPage.childPageIds[0],
+    pageId: matchedPage.id,
+  }
+}
+
+export async function getComponentPageSlugs(): Promise<string[]> {
+  const pages = await getComponentPages()
+  return pages.filter((page) => page.childPageIds.length > 0).map((page) => page.slug)
+}
+
+async function getComponentPages(): Promise<ComponentPage[]> {
+  "use cache"
+
+  cacheTag("notion")
+  cacheTag("notion-component-pages")
+
+  const directChildPages = await getDirectChildPages(NOTION_PAGE_ID)
+
+  return Promise.all(
+    directChildPages.map(async (page) => {
+      const childPages = await getDirectChildPages(page.id)
+
+      return {
+        childPageIds: childPages.map((childPage) => childPage.id),
+        id: page.id,
+        slug: pascalToKebabCase(page.title),
+      }
+    }),
+  )
+}

package/apps/web/app/(sidebar)/components/[...slugs]/get-direct-child-block.ts

@@ -0,0 +1,22 @@
+import {
+  getChildBlocks,
+  type NotionBlock,
+} from "@/app/(sidebar)/components/[...slugs]/get-child-block"
+
+interface NotionPageSummary {
+  id: string
+  title: string
+}
+
+export async function getDirectChildPages(pageId: string): Promise<NotionPageSummary[]> {
+  const blocks = await getChildBlocks(pageId)
+  return blocks
+    .filter(
+      (block): block is Extract<NotionBlock, { type: "child_page" }> =>
+        "type" in block && block.type === "child_page",
+    )
+    .map((block) => ({
+      id: block.id.replaceAll("-", ""),
+      title: block.child_page.title,
+    }))
+}

package/apps/web/app/(sidebar)/components/[...slugs]/layout.tsx

@@ -0,0 +1,25 @@
+import { redirect } from "next/navigation"
+import type { PropsWithChildren } from "react"
+import { getComponentPageMatch } from "@/app/(sidebar)/components/[...slugs]/get-component-page-match"
+import { NotionDocsLayout } from "@/components/notion/notion-docs-layout"
+
+interface LayoutProps extends PropsWithChildren {
+  params: Promise<{
+    slugs: string[]
+  }>
+}
+
+export default async function Layout(props: LayoutProps) {
+  const { children, params } = props
+  const { slugs } = await params
+
+  const [slug] = slugs
+
+  const matchedPage = await getComponentPageMatch(slug)
+
+  if (!matchedPage) {
+    redirect("/")
+  }
+
+  return <NotionDocsLayout pageId={matchedPage.pageId}>{children}</NotionDocsLayout>
+}

package/apps/web/app/(sidebar)/components/[...slugs]/page.tsx

@@ -0,0 +1,32 @@
+import { redirect } from "next/navigation"
+import {
+  getComponentPageMatch,
+  getComponentPageSlugs,
+} from "@/app/(sidebar)/components/[...slugs]/get-component-page-match"
+import { NotionDocsCodePage } from "@/components/notion/notion-docs-code-page"
+
+interface PageProps {
+  params: Promise<{
+    slugs: string[]
+  }>
+}
+
+export async function generateStaticParams() {
+  const slugs = await getComponentPageSlugs()
+  return slugs.map((slug) => ({ slugs: [slug] }))
+}
+
+export default async function Page(props: PageProps) {
+  const { params } = props
+  const { slugs } = await params
+
+  const [slug] = slugs
+
+  const matchedPage = await getComponentPageMatch(slug)
+
+  if (!matchedPage) {
+    redirect("/")
+  }
+
+  return <NotionDocsCodePage pageId={matchedPage.childPageId ?? ""} />
+}

package/apps/web/app/(sidebar)/components/[...slugs]/pascal-to-kebab-case.ts

@@ -0,0 +1,9 @@
+export function pascalToKebabCase(value: string) {
+  return value
+    .trim()
+    .replaceAll(/([A-Z]+)([A-Z][a-z])/g, "$1-$2")
+    .replaceAll(/([a-z0-9])([A-Z])/g, "$1-$2")
+    .replaceAll(/[\s_]+/g, "-")
+    .replaceAll(/-+/g, "-")
+    .toLowerCase()
+}

package/apps/web/app/(sidebar)/components/button2/page.tsx

@@ -0,0 +1,154 @@
+import { IconArrowInbox, IconArrowLeft, IconArrowRight } from "@pump-fun/icons-line"
+import { Button } from "@pump-fun/retail-design-system"
+
+export default function ButtonPage() {
+  return (
+    <div className="flex flex-col gap-y-16">
+      <Button className="absolute top-64 right-64">Absolute</Button>
+
+      <p>Variant</p>
+      <div className="flex flex-wrap items-center gap-16">
+        <Button variant="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="ghost">Ghost</Button>
+      </div>
+
+      <p>Size</p>
+      <div className="flex flex-wrap items-center gap-16">
+        <Button size={32}>Add goal</Button>
+        <Button size={36}>Add goal</Button>
+        <Button size={40}>Add goal</Button>
+        <Button size={44}>Add goal</Button>
+      </div>
+
+      <p>Rounded</p>
+      <div className="flex flex-wrap items-center gap-16">
+        <Button isRounded variant="primary">
+          Add goal
+        </Button>
+        <Button isRounded variant="secondary">
+          Add goal
+        </Button>
+        <Button isRounded variant="ghost">
+          Add goal
+        </Button>
+      </div>
+
+      <p>Disabled</p>
+      <div className="flex flex-wrap items-center gap-16">
+        <Button isDisabled variant="primary">
+          Add goal
+        </Button>
+        <Button isDisabled variant="secondary">
+          Add goal
+        </Button>
+        <Button isDisabled variant="ghost">
+          Add goal
+        </Button>
+      </div>
+
+      <p>Loading</p>
+      <div className="flex flex-wrap items-center gap-16">
+        <Button isLoading variant="primary">
+          Add goal
+        </Button>
+        <Button isLoading variant="secondary">
+          Add goal
+        </Button>
+        <Button isLoading variant="ghost">
+          Add goal
+        </Button>
+      </div>
+
+      <p>Active</p>
+      <div className="flex flex-wrap items-center gap-16">
+        <Button isActive variant="primary">
+          Add goal
+        </Button>
+        <Button isActive variant="secondary">
+          Add goal
+        </Button>
+        <Button isActive variant="ghost">
+          Add goal
+        </Button>
+      </div>
+
+      <p>Icon</p>
+      <div className="flex flex-wrap items-center gap-16">
+        <Button
+          iconEnd={<IconArrowRight size={16} />}
+          iconStart={<IconArrowLeft size={16} />}
+          variant="primary"
+        >
+          Add goal
+        </Button>
+        <Button
+          iconEnd={<IconArrowRight size={16} />}
+          iconStart={<IconArrowLeft size={16} />}
+          variant="secondary"
+        >
+          Add goal
+        </Button>
+        <Button
+          iconEnd={<IconArrowRight size={16} />}
+          iconStart={<IconArrowLeft size={16} />}
+          variant="ghost"
+        >
+          Add goal
+        </Button>
+      </div>
+
+      <p>Full width</p>
+      <div className="flex flex-wrap items-center gap-16">
+        <Button className="max-w-320" isFullWidth>
+          Add goal
+        </Button>
+      </div>
+
+      <p>Icon only</p>
+      <div className="flex flex-wrap items-center gap-16">
+        <Button isIconOnly variant="primary">
+          <IconArrowInbox size={16} />
+        </Button>
+        <Button isIconOnly variant="secondary">
+          <IconArrowInbox size={16} />
+        </Button>
+        <Button isIconOnly variant="ghost">
+          <IconArrowInbox size={16} />
+        </Button>
+      </div>
+
+      <p>Icon only size</p>
+      <div className="flex flex-wrap items-center gap-16">
+        <Button isIconOnly size={32}>
+          <IconArrowInbox size={16} />
+        </Button>
+        <Button isIconOnly size={36}>
+          <IconArrowInbox size={16} />
+        </Button>
+        <Button isIconOnly size={40}>
+          <IconArrowInbox size={16} />
+        </Button>
+        <Button isIconOnly size={44}>
+          <IconArrowInbox size={18} />
+        </Button>
+      </div>
+
+      <p>Icon only loading</p>
+      <div className="flex flex-wrap items-center gap-16">
+        <Button isIconOnly isLoading size={32}>
+          <IconArrowInbox size={16} />
+        </Button>
+        <Button isIconOnly isLoading size={36}>
+          <IconArrowInbox size={16} />
+        </Button>
+        <Button isIconOnly isLoading size={40}>
+          <IconArrowInbox size={16} />
+        </Button>
+        <Button isIconOnly isLoading size={44}>
+          <IconArrowInbox size={18} />
+        </Button>
+      </div>
+    </div>
+  )
+}

package/apps/web/app/(sidebar)/components/input/page.tsx

@@ -0,0 +1,98 @@
+import {
+  IconArrowBoxRight,
+  IconArrowInbox,
+  IconCircleBanSign,
+  IconEmail1,
+  IconEyeOpen,
+  IconKey2,
+  IconSquareBehindSquare1,
+} from "@pump-fun/icons-line"
+import { Button, Input, Label } from "@pump-fun/retail-design-system"
+
+export default function InputPage() {
+  return (
+    <div className="mx-auto flex max-w-320 flex-col">
+      <Label className="mb-4" htmlFor="email">
+        Email
+      </Label>
+      <div className="relative mb-16">
+        <IconEmail1 className="absolute top-12 left-12 text-zinc-200" size={16} />
+        <Input className="pl-36!" id="email" placeholder="name@example.com" type="email" />
+      </div>
+
+      <Label className="mb-4" htmlFor="password">
+        Password
+      </Label>
+      <div className="relative mb-16">
+        <IconKey2 className="absolute top-12 left-12 text-zinc-200" size={16} />
+        <Input className="px-36!" id="password" placeholder="••••••••" type="password" />
+        <Button className="group absolute! top-4 right-4" isIconOnly size={32} variant="ghost">
+          <IconEyeOpen
+            className="text-zinc-200 transition-colors group-hover:text-zinc-50 group-active:text-zinc-50"
+            size={16}
+          />
+        </Button>
+      </div>
+
+      <Button iconStart={<IconArrowBoxRight size={16} />} isFullWidth size={44}>
+        Sign in
+      </Button>
+
+      <div className="h-80" />
+
+      <Label className="mb-4" htmlFor="disabled">
+        Disabled
+      </Label>
+      <div className="relative">
+        <IconCircleBanSign className="absolute top-12 left-12 text-zinc-200" size={16} />
+        <Input className="pl-36!" id="disabled" isDisabled placeholder="Disabled" type="url" />
+      </div>
+
+      <div className="h-80" />
+
+      <Label className="mb-4" htmlFor="read-only">
+        Read Only
+      </Label>
+      <div className="relative">
+        <Input
+          className="pr-36!"
+          defaultValue="This is a read-only input"
+          id="read-only"
+          isReadOnly
+          type="text"
+        />
+        <Button className="group absolute! top-4 right-4" isIconOnly size={32} variant="ghost">
+          <IconSquareBehindSquare1
+            className="group-active:text-zinc-5000 text-zinc-200 transition-colors group-hover:text-gray-100"
+            size={16}
+          />
+        </Button>
+      </div>
+
+      <div className="h-80" />
+
+      <Label className="mb-4" htmlFor="input-with-end-icon-button">
+        Input with end icon button
+      </Label>
+      <div className="flex">
+        <Input
+          className="rounded-r-none! hover:z-10 focus-visible:z-80"
+          id="input-with-end-icon-button"
+          placeholder="Download"
+          type="url"
+        />
+        <Button
+          className="group -ml-px rounded-l-none! shadow-none! hover:z-10 focus-visible:z-80"
+          isIconOnly
+          size={40}
+          variant="secondary"
+        >
+          <IconArrowInbox
+            className="text-zinc-200 transition-colors group-hover:text-zinc-50 group-active:text-zinc-50"
+            size={16}
+          />
+        </Button>
+      </div>
+    </div>
+  )
+}

package/apps/web/app/(sidebar)/experiments/2025-10-22/mayhem-mode-card-badge.tsx

@@ -0,0 +1,9 @@
+export function MayhemModeCardBadge() {
+  return (
+    <div className="flex size-16 items-center justify-center rounded-full bg-linear-to-b from-green-300 to-red-500">
+      <div className="flex size-14 items-center justify-center rounded-full bg-zinc-600">
+        <img alt="Pump logomark" className="size-8" src="/pump-logomark.svg" />
+      </div>
+    </div>
+  )
+}

package/apps/web/app/(sidebar)/experiments/2025-10-22/mayhem-mode-coin-active-badge.tsx

@@ -0,0 +1,14 @@
+import { IconTrending1 } from "@pump-fun/icons-line"
+
+export function MayhemModeCoinActiveBadge() {
+  return (
+    <div className="flex h-18 w-fit items-center justify-center rounded-full bg-linear-to-b from-green-300 to-red-500 p-1">
+      <div className="bg-bg-secondary flex h-full items-center justify-center gap-x-2 rounded-full pr-4 pl-6">
+        <IconTrending1 className="text-text-accent" size={14} />
+        <p className="font-500 text-12 bg-linear-to-b from-green-300 from-50% to-red-500 bg-clip-text text-transparent tabular-nums">
+          63:42:32
+        </p>
+      </div>
+    </div>
+  )
+}

package/apps/web/app/(sidebar)/experiments/2025-10-22/mayhem-mode-coin-inactive-badge.tsx

@@ -0,0 +1,12 @@
+import { IconTrending1 } from "@pump-fun/icons-line"
+
+export function MayhemModeCoinInactiveBadge() {
+  return (
+    <div className="rounded-8 flex h-28 w-fit items-center justify-center bg-linear-to-b from-green-300 to-red-500 p-1">
+      <div className="rounded-8 bg-bg-secondary flex h-full items-center justify-center gap-x-8 px-12">
+        <IconTrending1 className="text-text-muted" size={14} />
+        <p className="font-500 text-12 text-text-on-muted tabular-nums">Mayhem</p>
+      </div>
+    </div>
+  )
+}

package/apps/web/app/(sidebar)/experiments/2025-10-22/mayhem-mode-create-coin.tsx

@@ -0,0 +1,44 @@
+import { Switch, Tooltip } from "@base-ui/react"
+import { IconCircleInfo } from "@pump-fun/icons-filled"
+import { MayhemModeDialogIcon } from "@/app/(sidebar)/experiments/2025-10-22/mayhem-mode-dialog-icon"
+
+export function MayhemModeCreateCoin() {
+  return (
+    <div className="rounded-12 bg-bg-secondary flex items-center gap-x-8 p-12">
+      <div className="shrink-0">
+        <MayhemModeDialogIcon />
+      </div>
+      <div className="flex w-full flex-col gap-y-1">
+        <div className="flex items-center gap-x-4">
+          <p className="font-600 text-12 text-text-primary">Mayhem mode</p>
+
+          <Tooltip.Root>
+            <Tooltip.Trigger>
+              <IconCircleInfo className="shrink-0" size={16} />
+            </Tooltip.Trigger>
+            <Tooltip.Portal>
+              <Tooltip.Positioner sideOffset={4}>
+                <Tooltip.Popup className="rounded-8 bg-bg-secondary outline-border-secondary flex origin-[var(--transform-origin)] flex-col px-6 py-2 text-sm outline transition-[transform,scale,opacity] data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[instant]:duration-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0">
+                  <p className="text-14 text-text-secondary">Not sure what to put here.</p>
+                </Tooltip.Popup>
+              </Tooltip.Positioner>
+            </Tooltip.Portal>
+          </Tooltip.Root>
+
+          <div className="rounded-6 bg-bg-accent font-600 text-text-on-accent flex h-16 items-center px-6 text-[10px]">
+            New
+          </div>
+        </div>
+        <p className="text-12 text-text-tertiary">Temporary increased volatility.</p>
+      </div>
+      <div className="shrink-0">
+        <Switch.Root
+          className="from-bg-accent before:outline-bg-accent relative flex h-24 w-40 rounded-full bg-gradient-to-r from-35% to-zinc-500 to-65% bg-[length:120px_100%] bg-[100%_0%] bg-no-repeat p-2 transition-[background-position,box-shadow] duration-[125ms] ease-[cubic-bezier(0.26,0.75,0.38,0.45)] before:absolute before:rounded-full before:outline-offset-2 focus-visible:before:inset-0 focus-visible:before:outline-2 data-[checked]:bg-[0%_0%]"
+          defaultChecked
+        >
+          <Switch.Thumb className="aspect-square h-full rounded-full bg-zinc-50 transition-transform duration-150 data-[checked]:translate-x-16" />
+        </Switch.Root>
+      </div>
+    </div>
+  )
+}

package/apps/web/app/(sidebar)/experiments/2025-10-22/mayhem-mode-dialog-icon.tsx

@@ -0,0 +1,47 @@
+export function MayhemModeDialogIcon() {
+  return (
+    <svg fill="none" height="40" viewBox="0 0 41 40" width="41" xmlns="http://www.w3.org/2000/svg">
+      <title>Mayhem mode dialog icon</title>
+      <rect fill="#18181B" height="39" rx="7.5" width="39" x="1" y="0.5" />
+      <rect height="39" rx="7.5" stroke="url(#paint0_linear_12893_5347)" width="39" x="1" y="0.5" />
+      <path
+        d="M13 20.8426L13.8079 18.9134C14.1063 18.2009 15.1233 18.2401 15.3665 18.9735L16.3505 21.9418C16.6063 22.7133 17.6952 22.703 17.9365 21.9267L20.4246 13.9213C20.6775 13.1075 21.8369 13.1493 22.0312 13.9793L24.849 26.0206C25.0396 26.835 26.169 26.8965 26.446 26.1076L28 21.6805"
+        stroke="#FAFAFA"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+      <path
+        d="M13 20.8426L13.8079 18.9134C14.1063 18.2009 15.1233 18.2401 15.3665 18.9735L16.3505 21.9418C16.6063 22.7133 17.6952 22.703 17.9365 21.9267L20.4246 13.9213C20.6775 13.1075 21.8369 13.1493 22.0312 13.9793L24.849 26.0206C25.0396 26.835 26.169 26.8965 26.446 26.1076L28 21.6805"
+        stroke="url(#paint1_linear_12893_5347)"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+      <defs>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          id="paint0_linear_12893_5347"
+          x1="20.5"
+          x2="20.5"
+          y1="40"
+          y2="-2.83122e-06"
+        >
+          <stop stopColor="#F43F5E" />
+          <stop offset="1" stopColor="#86EFAC" />
+        </linearGradient>
+        <linearGradient
+          gradientUnits="userSpaceOnUse"
+          id="paint1_linear_12893_5347"
+          x1="20.5"
+          x2="20.5"
+          y1="26.6666"
+          y2="13.3333"
+        >
+          <stop stopColor="#F43F5E" />
+          <stop offset="1" stopColor="#86EFAC" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}