retail-design-system 1.0.0

package/bunfig.toml

@@ -0,0 +1,2 @@
+[install]
+linker = "isolated"

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "retail-design-system",
+  "workspaces": [
+    "apps/*",
+    "packages/*"
+  ],
+  "scripts": {
+    "build": "turbo build",
+    "check": "bun run check:format && bun run check:lint",
+    "check:fix": "bun run check:format:fix && bun run check:lint:fix",
+    "check:format": "oxfmt --check",
+    "check:format:fix": "oxfmt",
+    "check:lint": "oxlint",
+    "check:lint:fix": "oxlint --fix --fix-suggestions --fix-dangerously",
+    "check:type": "turbo check:type",
+    "clean": "sh scripts/clean.sh",
+    "dev": "turbo dev",
+    "update": "bun update --interactive --recursive"
+  },
+  "devDependencies": {
+    "eslint-plugin-perfectionist": "5.6.0",
+    "eslint-plugin-unused-imports": "4.4.1",
+    "oxfmt": "0.40.0",
+    "oxlint": "1.55.0",
+    "turbo": "2.8.17"
+  },
+  "packageManager": "bun@1.3.0",
+  "catalog": {
+    "@base-ui/react": "1.3.0",
+    "@nattui/tailwind-colors": "0.0.8",
+    "@pump-fun/icons-filled": "npm:@central-icons-react/round-filled-radius-1-stroke-2@1.1.158",
+    "@pump-fun/icons-line": "npm:@central-icons-react/round-outlined-radius-1-stroke-2@1.1.158",
+    "@types/node": "25.5.0",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "typescript": "5.9.3"
+  },
+  "version": "1.0.0"
+}

package/packages/ui/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.module.css" {
+  const classes: Record<string, string>
+  export default classes
+}

package/packages/ui/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@pump-fun/retail-design-system",
+  "version": "0.0.16",
+  "description": "A collection of reusable React components built with TypeScript and CSS Modules",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./tailwind-v3/colors": {
+      "types": "./dist/foundations/colors/tailwind-v3.d.ts",
+      "import": "./dist/foundations/colors/tailwind-v3.js",
+      "require": "./dist/foundations/colors/tailwind-v3.cjs"
+    },
+    "./tailwind-v4/colors.css": "./dist/foundations/colors/tailwind-v4.css",
+    "./retail-design-system.css": "./dist/foundations/colors/retail-design-system.css"
+  },
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "scripts": {
+    "build": "bun run src/foundations/colors/generate-css.ts && tsup",
+    "check:types": "tsc",
+    "dev": "bun run src/foundations/colors/generate-css.ts && tsup --watch",
+    "prepublishOnly": "pnpm run build",
+    "update": "pnpx npm-check-updates --upgrade"
+  },
+  "dependencies": {
+    "@base-ui/react": "catalog:"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "tsup": "8.5.1",
+    "typescript": "catalog:"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  }
+}

package/packages/ui/src/components/button/button-spinner.module.css

@@ -0,0 +1,95 @@
+.button_spinner {
+  position: relative;
+  width: var(--size);
+  height: var(--size);
+  scale: -1 1;
+  animation: spinner 1000ms steps(12, end) infinite;
+}
+
+@keyframes spinner {
+  to {
+    rotate: 1turn;
+  }
+}
+
+.button_spinner > div {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  width: calc(var(--size) / 2);
+  height: calc(var(--size) / 12);
+  pointer-events: none;
+  transform-origin: center left;
+  translate: 0 -50%;
+  transition: all 150ms;
+}
+
+.button_spinner > div::after {
+  position: absolute;
+  right: 0;
+  width: 50%;
+  height: 100%;
+  content: "";
+  background-color: currentColor;
+  border-radius: 9999px;
+}
+
+.button_spinner > div:nth-child(1) {
+  opacity: 1;
+  rotate: 0deg;
+}
+
+.button_spinner > div:nth-child(2) {
+  opacity: 0.925;
+  rotate: 30deg;
+}
+
+.button_spinner > div:nth-child(3) {
+  opacity: 0.85;
+  rotate: 60deg;
+}
+
+.button_spinner > div:nth-child(4) {
+  opacity: 0.775;
+  rotate: 90deg;
+}
+
+.button_spinner > div:nth-child(5) {
+  opacity: 0.7;
+  rotate: 120deg;
+}
+
+.button_spinner > div:nth-child(6) {
+  opacity: 0.625;
+  rotate: 150deg;
+}
+
+.button_spinner > div:nth-child(7) {
+  opacity: 0.55;
+  rotate: 180deg;
+}
+
+.button_spinner > div:nth-child(8) {
+  opacity: 0.475;
+  rotate: 210deg;
+}
+
+.button_spinner > div:nth-child(9) {
+  opacity: 0.4;
+  rotate: 240deg;
+}
+
+.button_spinner > div:nth-child(10) {
+  opacity: 0.325;
+  rotate: 270deg;
+}
+
+.button_spinner > div:nth-child(11) {
+  opacity: 0.25;
+  rotate: 300deg;
+}
+
+.button_spinner > div:nth-child(12) {
+  opacity: 0.15;
+  rotate: 330deg;
+}

package/packages/ui/src/components/button/button-spinner.tsx

@@ -0,0 +1,18 @@
+import type { CSSProperties, JSX } from "react"
+import styles from "@/components/button/button-spinner.module.css"
+
+export interface ButtonSpinnerProps {
+  size?: number
+}
+
+export function ButtonSpinner(props: ButtonSpinnerProps): JSX.Element {
+  const { size = 16 } = props
+
+  return (
+    <div className={styles.button_spinner} style={{ "--size": `${size}px` } as CSSProperties}>
+      {Array.from({ length: 12 }).map((_, index) => (
+        <div key={index} />
+      ))}
+    </div>
+  )
+}

package/packages/ui/src/components/button/button.module.css

@@ -0,0 +1,144 @@
+/* ===================================================== */
+/* Base */
+/* ===================================================== */
+.button {
+  align-items: safe center;
+  border-style: none;
+  column-gap: 8px;
+  cursor: pointer;
+  display: flex;
+  flex-shrink: 0;
+  font-family: var(--font-sans, sans-serif);
+  font-size: 14px;
+  font-weight: 500;
+  height: var(--size);
+  justify-content: safe center;
+  line-height: 1.5;
+  outline-color: var(--color-bg-accent);
+  outline-offset: 2px;
+  outline-style: none;
+  outline-width: 2px;
+  overflow: hidden;
+  transition-duration: 150ms;
+  transition-property: background-color, box-shadow, opacity, translate;
+  user-select: none;
+}
+
+/* When pressed, move the button down */
+.button:active:not(:disabled),
+.button[aria-pressed="true"]:not(:disabled) {
+  translate: 0 1px;
+}
+
+/* When disabled, disable cursor and reduce opacity */
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* When keyboard focused, show outline */
+.button:focus-visible {
+  outline-style: solid;
+}
+
+/* ===================================================== */
+/* Icon only */
+/* ===================================================== */
+.button__icon_only {
+  width: var(--size) !important;
+  padding: 0 !important;
+}
+
+/* ===================================================== */
+/* Rounded */
+/* ===================================================== */
+.button__rounded_base {
+  border-radius: 12px;
+}
+
+.button__rounded_full {
+  border-radius: 9999px !important;
+}
+
+/* ===================================================== */
+/* Size */
+/* ===================================================== */
+.button__size_32 {
+  --size: 32px;
+  padding: 0 10px;
+  border-radius: 8px;
+}
+
+.button__size_36 {
+  --size: 36px;
+  padding: 0 12px;
+  border-radius: 10px;
+}
+
+.button__size_40 {
+  --size: 40px;
+  padding: 0 14px;
+  border-radius: 12px;
+}
+
+.button__size_44 {
+  --size: 44px;
+  padding: 0 16px;
+  border-radius: 14px;
+}
+
+.button__size_48 {
+  --size: 48px;
+  padding: 0 18px;
+  border-radius: 16px;
+}
+
+/* ===================================================== */
+/* Variant */
+/* ===================================================== */
+/* Ghost */
+.button__variant_ghost {
+  color: var(--color-text-primary);
+  background-color: transparent;
+}
+
+.button__variant_ghost:active:not(:disabled),
+.button__variant_ghost:hover:not(:disabled),
+.button__variant_ghost[aria-pressed="true"]:not(:disabled) {
+  background-color: color-mix(in oklab, var(--color-bg-tertiary) 75%, transparent 0%);
+}
+
+/* Primary */
+.button__variant_primary {
+  color: var(--color-text-on-accent);
+  background-color: var(--color-bg-accent);
+}
+
+.button__variant_primary:active:not(:disabled),
+.button__variant_primary:hover:not(:disabled),
+.button__variant_primary[aria-pressed="true"]:not(:disabled) {
+  background-color: color-mix(in oklab, var(--color-bg-accent) 75%, transparent 0%);
+}
+
+/* Secondary */
+.button__variant_secondary {
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-tertiary);
+}
+
+.button__variant_secondary:active:not(:disabled),
+.button__variant_secondary:hover:not(:disabled),
+.button__variant_secondary[aria-pressed="true"]:not(:disabled) {
+  background-color: color-mix(in oklab, var(--color-bg-tertiary) 75%, transparent 0%);
+}
+
+/* ===================================================== */
+/* Width */
+/* ===================================================== */
+.button__width_base {
+  width: max-content; /* Fit the button content */
+}
+
+.button__width_full {
+  width: 100%;
+}

package/packages/ui/src/components/button/button.tsx

@@ -0,0 +1,102 @@
+import type { ComponentProps, JSX, ReactNode } from "react"
+import { ButtonSpinner } from "@/components/button/button-spinner"
+import styles from "@/components/button/button.module.css"
+
+export interface ButtonIconProps extends ButtonInternalProps {
+  children?: ReactNode
+  iconEnd?: never
+  iconStart?: never
+  isIconOnly: true
+}
+
+export interface ButtonProps extends ButtonInternalProps {
+  children?: string | string[]
+  isIconOnly?: false
+}
+
+interface ButtonInternalProps extends Omit<ComponentProps<"button">, "aria-pressed" | "disabled"> {
+  iconEnd?: ReactNode
+  iconStart?: ReactNode
+  isActive?: boolean
+  isDisabled?: boolean
+  isFullWidth?: boolean
+  isIconOnly?: boolean
+  isLoading?: boolean
+  isRounded?: boolean
+  size?: 32 | 36 | 40 | 44 | 48
+  variant?: "ghost" | "primary" | "secondary"
+}
+
+type ButtonUnionProps = ButtonIconProps | ButtonProps
+
+export function Button(props: ButtonUnionProps): JSX.Element {
+  const {
+    children = "",
+    className: customClassName = "",
+    iconEnd = "",
+    iconStart = "",
+    isActive = false,
+    isDisabled = false,
+    isFullWidth = false,
+    isIconOnly = false,
+    isLoading = false,
+    isRounded = false,
+    size = 40,
+    type = "button",
+    variant = "primary",
+    ...rest
+  } = props
+
+  const combinedClassName = `
+    ${BUTTON_CLASS_NAME.BASE}
+    ${BUTTON_CLASS_NAME.SIZE[size]}
+    ${BUTTON_CLASS_NAME.VARIANT[variant.toUpperCase() as keyof typeof BUTTON_CLASS_NAME.VARIANT]}
+    ${isFullWidth ? BUTTON_CLASS_NAME.WIDTH.FULL : BUTTON_CLASS_NAME.WIDTH.BASE}
+    ${isIconOnly ? BUTTON_CLASS_NAME.ICON_ONLY : ""}
+    ${isRounded ? BUTTON_CLASS_NAME.ROUNDED.FULL : BUTTON_CLASS_NAME.ROUNDED.BASE}
+    ${customClassName}
+  `
+    .replaceAll(/\s+/g, " ")
+    .trim()
+
+  return (
+    <button
+      aria-pressed={isActive}
+      className={combinedClassName}
+      disabled={isDisabled || isLoading}
+      type={type}
+      {...rest}
+    >
+      {isLoading && <ButtonSpinner />}
+      {!isLoading && iconStart}
+      {isIconOnly ? isLoading ? undefined : children : <span>{children}</span>}
+      {!isLoading && iconEnd}
+    </button>
+  )
+}
+
+export const BUTTON_CLASS_NAME = {
+  BASE: styles.button,
+  ICON_ONLY: styles.button__icon_only,
+  ROUNDED: {
+    BASE: styles.button__rounded_base,
+    FULL: styles.button__rounded_full,
+  },
+  SIZE: {
+    32: styles.button__size_32,
+    36: styles.button__size_36,
+    40: styles.button__size_40,
+    44: styles.button__size_44,
+    48: styles.button__size_48,
+  },
+  VARIANT: {
+    ACCENT: styles.button__variant_accent,
+    GHOST: styles.button__variant_ghost,
+    PRIMARY: styles.button__variant_primary,
+    SECONDARY: styles.button__variant_secondary,
+  },
+  WIDTH: {
+    BASE: styles.button__width_base,
+    FULL: styles.button__width_full,
+  },
+} as const

package/packages/ui/src/components/button-link/button-link.tsx

@@ -0,0 +1,46 @@
+import { createElement, type ComponentProps, type ElementType, type JSX } from "react"
+import { BUTTON_CLASS_NAME, type ButtonProps } from "@/components/button/button"
+
+export type ButtonLinkProps<ComponentType extends ElementType = "a"> = ButtonLinkInternalProps &
+  ComponentProps<ComponentType>
+
+interface ButtonLinkInternalProps extends Pick<
+  ButtonProps,
+  "isFullWidth" | "isIconOnly" | "isRounded" | "size" | "variant"
+> {
+  as?: ElementType
+}
+
+export function ButtonLink<ComponentType extends ElementType = "a">(
+  props: ButtonLinkProps<ComponentType>,
+): JSX.Element {
+  const {
+    as = "a",
+    className: customClassName = "",
+    isFullWidth = false,
+    isIconOnly = false,
+    isRounded = false,
+    size = 40,
+    variant = "primary",
+    ...rest
+  } = props
+
+  const Component = as as ElementType
+
+  const combinedClassName = `
+    ${BUTTON_CLASS_NAME.BASE}
+    ${BUTTON_CLASS_NAME.SIZE[size]}
+    ${BUTTON_CLASS_NAME.VARIANT[variant.toUpperCase() as keyof typeof BUTTON_CLASS_NAME.VARIANT]}
+    ${isFullWidth ? BUTTON_CLASS_NAME.WIDTH.FULL : BUTTON_CLASS_NAME.WIDTH.BASE}
+    ${isIconOnly ? BUTTON_CLASS_NAME.ICON_ONLY : ""}
+    ${isRounded ? BUTTON_CLASS_NAME.ROUNDED.FULL : BUTTON_CLASS_NAME.ROUNDED.BASE}
+    ${customClassName}
+  `
+    .replaceAll(/\s+/g, " ")
+    .trim()
+
+  return createElement(Component, {
+    className: combinedClassName,
+    ...rest,
+  })
+}

package/packages/ui/src/components/column/column.module.css

@@ -0,0 +1,4 @@
+.column {
+  display: flex;
+  flex-direction: column;
+}

package/packages/ui/src/components/column/column.tsx

@@ -0,0 +1,65 @@
+import {
+  createElement,
+  type ComponentProps,
+  type CSSProperties,
+  type ElementType,
+  type JSX,
+} from "react"
+import styles from "@/components/column/column.module.css"
+
+export type ColumnProps<ComponentType extends ElementType = "div"> = ColumnInternalProps &
+  ComponentProps<ComponentType>
+
+interface ColumnInternalProps {
+  alignItems?: CSSProperties["alignItems"]
+  as?: keyof JSX.IntrinsicElements
+  flexWrap?: CSSProperties["flexWrap"]
+  gap?: CSSProperties["gap"]
+  gapX?: CSSProperties["columnGap"]
+  gapY?: CSSProperties["rowGap"]
+  justifyContent?: CSSProperties["justifyContent"]
+}
+
+export function Column(props: ColumnProps): JSX.Element {
+  const {
+    alignItems = undefined,
+    as = "div",
+    className: customClassName = "",
+    flexWrap = undefined,
+    gap = undefined,
+    gapX = undefined,
+    gapY = undefined,
+    justifyContent = undefined,
+    style: customStyle,
+    ...rest
+  } = props
+
+  const Component = as
+
+  const combinedClassName = `
+    ${COLUMN_CLASS_NAME.BASE}
+    ${customClassName}
+  `
+    .replaceAll(/\s+/g, " ")
+    .trim()
+
+  const combinedStyle = {
+    ...customStyle,
+    ...(gap === undefined ? {} : { gap }),
+    ...(gapX === undefined ? {} : { columnGap: gapX }),
+    ...(gapY === undefined ? {} : { rowGap: gapY }),
+    ...(flexWrap === undefined ? {} : { flexWrap }),
+    ...(alignItems === undefined ? {} : { alignItems }),
+    ...(justifyContent === undefined ? {} : { justifyContent }),
+  }
+
+  return createElement(Component, {
+    className: combinedClassName,
+    style: combinedStyle,
+    ...rest,
+  })
+}
+
+export const COLUMN_CLASS_NAME = {
+  BASE: styles.column,
+} as const

package/packages/ui/src/components/row/row.module.css

@@ -0,0 +1,4 @@
+.row {
+  display: flex;
+  flex-direction: row;
+}

package/packages/ui/src/components/row/row.tsx

@@ -0,0 +1,65 @@
+import {
+  createElement,
+  type ComponentProps,
+  type CSSProperties,
+  type ElementType,
+  type JSX,
+} from "react"
+import styles from "@/components/row/row.module.css"
+
+export type RowProps<ComponentType extends ElementType = "div"> = ComponentProps<ComponentType> &
+  RowInternalProps
+
+interface RowInternalProps {
+  alignItems?: CSSProperties["alignItems"]
+  as?: keyof JSX.IntrinsicElements
+  flexWrap?: CSSProperties["flexWrap"]
+  gap?: CSSProperties["gap"]
+  gapX?: CSSProperties["columnGap"]
+  gapY?: CSSProperties["rowGap"]
+  justifyContent?: CSSProperties["justifyContent"]
+}
+
+export function Row(props: RowProps): JSX.Element {
+  const {
+    alignItems = undefined,
+    as = "div",
+    className: customClassName = "",
+    flexWrap = undefined,
+    gap = undefined,
+    gapX = undefined,
+    gapY = undefined,
+    justifyContent = undefined,
+    style: customStyle,
+    ...rest
+  } = props
+
+  const Component = as
+
+  const combinedClassName = `
+    ${ROW_CLASS_NAME.BASE}
+    ${customClassName}
+  `
+    .replaceAll(/\s+/g, " ")
+    .trim()
+
+  const combinedStyle = {
+    ...customStyle,
+    ...(gap === undefined ? {} : { gap }),
+    ...(gapX === undefined ? {} : { columnGap: gapX }),
+    ...(gapY === undefined ? {} : { rowGap: gapY }),
+    ...(flexWrap === undefined ? {} : { flexWrap }),
+    ...(alignItems === undefined ? {} : { alignItems }),
+    ...(justifyContent === undefined ? {} : { justifyContent }),
+  }
+
+  return createElement(Component, {
+    className: combinedClassName,
+    style: combinedStyle,
+    ...rest,
+  })
+}
+
+export const ROW_CLASS_NAME = {
+  BASE: styles.row,
+} as const

package/packages/ui/src/components/spacer/spacer.module.css

@@ -0,0 +1,3 @@
+.spacer {
+  flex-shrink: 0;
+}

package/packages/ui/src/components/spacer/spacer.tsx

@@ -0,0 +1,30 @@
+import type { ComponentProps, CSSProperties } from "react"
+import styles from "@/components/spacer/spacer.module.css"
+
+export interface SpacerProps extends Omit<ComponentProps<"div">, "children"> {
+  height?: CSSProperties["height"]
+  width?: CSSProperties["width"]
+}
+
+export function Spacer(props: SpacerProps) {
+  const { className: customClassName = "", height, style: customStyle, width, ...rest } = props
+
+  const combinedClassName = `
+    ${SPACER_CLASS_NAME.BASE}
+    ${customClassName}
+  `
+    .replaceAll(/\s+/g, " ")
+    .trim()
+
+  const combinedStyle = {
+    ...customStyle,
+    ...(width === undefined ? {} : { width }),
+    ...(height === undefined ? {} : { height }),
+  }
+
+  return <div className={combinedClassName} style={combinedStyle} {...rest} />
+}
+
+export const SPACER_CLASS_NAME = {
+  BASE: styles.spacer,
+} as const