@gv-tech/design-system 2.4.0 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gv-tech/design-system",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Garcia Ventures react design system",
   "repository": "git@github.com:Garcia-Ventures/gvtech-design.git",
   "license": "MIT",
@@ -18,274 +18,42 @@
       "default": "./dist/design-system.css"
     },
     "./package.json": "./package.json",
-    "./accordion": {
-      "types": "./dist/components/ui/accordion.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./alert-dialog": {
-      "types": "./dist/components/ui/alert-dialog.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./alert": {
-      "types": "./dist/components/ui/alert.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./aspect-ratio": {
-      "types": "./dist/components/ui/aspect-ratio.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./avatar": {
-      "types": "./dist/components/ui/avatar.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./badge": {
-      "types": "./dist/components/ui/badge.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./breadcrumb": {
-      "types": "./dist/components/ui/breadcrumb.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./button": {
-      "types": "./dist/components/ui/button.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./calendar": {
-      "types": "./dist/components/ui/calendar.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./card": {
-      "types": "./dist/components/ui/card.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./carousel": {
-      "types": "./dist/components/ui/carousel.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./chart": {
-      "types": "./dist/components/ui/chart.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./checkbox": {
-      "types": "./dist/components/ui/checkbox.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./collapsible": {
-      "types": "./dist/components/ui/collapsible.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./command": {
-      "types": "./dist/components/ui/command.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./context-menu": {
-      "types": "./dist/components/ui/context-menu.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./dialog": {
-      "types": "./dist/components/ui/dialog.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./drawer": {
-      "types": "./dist/components/ui/drawer.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./dropdown-menu": {
-      "types": "./dist/components/ui/dropdown-menu.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./form": {
-      "types": "./dist/components/ui/form.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./hover-card": {
-      "types": "./dist/components/ui/hover-card.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./input": {
-      "types": "./dist/components/ui/input.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./label": {
-      "types": "./dist/components/ui/label.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./menubar": {
-      "types": "./dist/components/ui/menubar.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./navigation-menu": {
-      "types": "./dist/components/ui/navigation-menu.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./pagination": {
-      "types": "./dist/components/ui/pagination.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./popover": {
-      "types": "./dist/components/ui/popover.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./progress": {
-      "types": "./dist/components/ui/progress.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./radio-group": {
-      "types": "./dist/components/ui/radio-group.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./resizable": {
-      "types": "./dist/components/ui/resizable.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./scroll-area": {
-      "types": "./dist/components/ui/scroll-area.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./search": {
-      "types": "./dist/components/ui/search.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./select": {
-      "types": "./dist/components/ui/select.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./separator": {
-      "types": "./dist/components/ui/separator.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./sheet": {
-      "types": "./dist/components/ui/sheet.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./skeleton": {
-      "types": "./dist/components/ui/skeleton.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./slider": {
-      "types": "./dist/components/ui/slider.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./sonner": {
-      "types": "./dist/components/ui/sonner.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./switch": {
-      "types": "./dist/components/ui/switch.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./table": {
-      "types": "./dist/components/ui/table.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./tabs": {
-      "types": "./dist/components/ui/tabs.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./textarea": {
-      "types": "./dist/components/ui/textarea.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./theme-provider": {
-      "types": "./dist/components/ui/theme-provider.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./theme-toggle": {
-      "types": "./dist/components/ui/theme-toggle.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./toast": {
-      "types": "./dist/components/ui/toast.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./toaster": {
-      "types": "./dist/components/ui/toaster.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./toggle-group": {
-      "types": "./dist/components/ui/toggle-group.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./toggle": {
-      "types": "./dist/components/ui/toggle.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
-    },
-    "./tooltip": {
-      "types": "./dist/components/ui/tooltip.d.ts",
-      "import": "./dist/index.es.js",
-      "default": "./dist/index.es.js"
+    "./*": {
+      "types": "./dist/components/ui/*/index.d.ts",
+      "react-native": "./dist/components/ui/*/index.native.js",
+      "import": "./dist/*.es.js",
+      "default": "./dist/*.es.js"
     }
   },
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "style": "dist/design-system.css",
+  "workspaces": [
+    "packages/*",
+    "apps/*"
+  ],
   "scripts": {
-    "build": "yarn build:registry && tsc -p tsconfig.build.json && VITE_LIB=true vite build",
+    "build": "rm -f tsconfig.tsbuildinfo && yarn build:registry && tsc -p tsconfig.build.json && VITE_LIB=true vite build",
     "build:registry": "tsx scripts/build-registry.ts",
-    "build:site": "yarn build:registry && vite build",
-    "dev": "vite",
+    "build:site": "yarn workspace playground-web build",
+    "dev": "yarn workspace playground-web dev",
     "format": "prettier --write .",
     "format:ci": "prettier --check .",
     "lint": "eslint . --cache",
     "lint:fix": "eslint . --cache --fix",
     "lint:report": "eslint . --cache -o ./eslintReport.html -f html",
+    "native": "npx nx run native-playground:start",
+    "native:android": "npx nx run native-playground:start --android",
+    "native:clear": "npx nx run native-playground:start --android --clear",
     "prepare": "husky",
-    "setup:ui": "tsx scripts/import-all-shadcn.ts",
     "start": "vite",
     "test": "vitest",
     "test:ci": "CI=true vitest --run --reporter=dot",
     "test:watch": "vitest --watch",
     "validate": "tsx ./scripts/validate.ts",
-    "validate:fix": "tsx ./scripts/validate.ts --fix"
+    "validate:fix": "tsx ./scripts/validate.ts --fix",
+    "validate:no-cache": "tsx ./scripts/validate.ts --no-cache"
   },
   "lint-staged": {
     "*.(js|ts|mjs|cjs)?(x)": [
@@ -308,55 +76,40 @@
     ]
   },
   "prettier": "@eng618/prettier-config",
+  "resolutions": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^10.0.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
   "dependencies": {
-    "@hookform/resolvers": "^5.2.2",
-    "@radix-ui/react-accordion": "^1.2.12",
-    "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-aspect-ratio": "^1.1.8",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-context-menu": "^2.2.16",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-hover-card": "^1.1.15",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-menubar": "^1.1.16",
-    "@radix-ui/react-navigation-menu": "^1.2.14",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-progress": "^1.1.8",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-toast": "^1.2.15",
-    "@radix-ui/react-toggle": "^1.1.10",
-    "@radix-ui/react-toggle-group": "^1.1.11",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@tailwindcss/postcss": "4.1.18",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
-    "date-fns": "^4.1.0",
-    "embla-carousel-react": "^8.6.0",
-    "lucide-react": "^0.563.0",
-    "react-day-picker": "^9.13.2",
-    "react-hook-form": "^7.71.1",
-    "react-icons": "^5.5.0",
-    "react-resizable-panels": "^4.6.2",
-    "recharts": "2.15.4",
-    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.0",
-    "vaul": "^1.1.2",
-    "zod": "^4.3.6"
+    "@expo/metro-config": "~54.0.9",
+    "@expo/metro-runtime": "~6.1.2",
+    "expo": "~54.0.0",
+    "expo-splash-screen": "~31.0.11",
+    "expo-status-bar": "~3.0.8",
+    "expo-system-ui": "~6.0.8",
+    "lucide-react-native": "^0.574.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-native": "0.81.5",
+    "react-native-svg": "^15.15.3",
+    "react-native-svg-transformer": "~1.5.1",
+    "tslib": "^2.3.0"
   },
   "devDependencies": {
     "@eng618/prettier-config": "^2.7.0",
+    "@expo/cli": "~54.0.16",
     "@gv-tech/eslint-config": "^0.1.8",
+    "@nx/expo": "22.5.1",
+    "@nx/jest": "22.5.1",
+    "@nx/js": "^22.5.1",
+    "@rn-primitives/slot": "^1.2.0",
+    "@swc-node/register": "~1.11.1",
+    "@swc/core": "~1.15.5",
+    "@swc/helpers": "~0.5.18",
+    "@tailwindcss/postcss": "4.1.18",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -364,8 +117,10 @@
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.55.0",
-    "@typescript-eslint/parser": "^8.55.0",
+    "@types/react-native": "^0.73.0",
+    "@types/react-native-web": "^0.19.2",
+    "@typescript-eslint/eslint-plugin": "^8.56.0",
+    "@typescript-eslint/parser": "^8.56.0",
     "@vitejs/plugin-react-swc": "^4.2.3",
     "axe-core": "^4.11.1",
     "eslint": "^10.0.0",
@@ -375,14 +130,18 @@
     "husky": "^9.1.7",
     "jsdom": "^27.4.0",
     "lint-staged": "^16.2.7",
+    "metro-config": "~0.83.0",
+    "metro-resolver": "~0.83.0",
     "next-themes": "^0.4.6",
+    "nx": "^22.5.1",
     "postcss": "^8.5.6",
     "prettier": "^3.8.1",
-    "prettier-plugin-organize-imports": "^4.3.0",
-    "prop-types": "^15.8.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-is": "^19.2.4",
+    "react-icons": "^5.5.0",
+    "react-native-reanimated": "~3.16.1",
+    "react-native-web": "^0.21.2",
+    "react-router-dom": "^7.13.0",
+    "recharts": "2.15.4",
+    "sonner": "^2.0.7",
     "tailwindcss": "4.1.18",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
@@ -390,11 +149,15 @@
     "vitest": "^4.0.18"
   },
   "peerDependencies": {
+    "lucide-react-native": "^0.475.0",
+    "nativewind": "^4.1.23",
     "next-themes": "^0.4.0",
     "prop-types": "^15.8.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "react-is": "^16 || ^17 || ^18 || ^19"
+    "react-is": "^16 || ^17 || ^18 || ^19",
+    "react-native": "^0.77.0",
+    "react-native-svg": "^15.11.1"
   },
   "packageManager": "yarn@4.12.0",
   "engines": {

package/packages/design-tokens/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+## [0.1.0](https://github.com/Garcia-Ventures/gvtech-design/compare/design-tokens-v0.0.1...design-tokens-v0.1.0) (2026-02-20)
+
+
+### Features
+
+* **universal:** pivot to monorepo architecture and stabilize react native support ([#63](https://github.com/Garcia-Ventures/gvtech-design/issues/63)) ([3458938](https://github.com/Garcia-Ventures/gvtech-design/commit/3458938c17bdfc7a7f5eea0053b7bf1786a571fa))

package/packages/design-tokens/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@gv-tech/design-tokens",
+  "version": "0.1.0",
+  "description": "Shared design tokens for the GV Tech design system — palette, theme, spacing, typography, shadows",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    }
+  },
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "scripts": {
+    "build": "echo 'No build step — consumed as TS source by sibling packages'",
+    "lint": "echo 'Linted from workspace root'",
+    "test": "echo 'No tests yet'",
+    "typecheck": "yarn tsc --noEmit"
+  }
+}

package/packages/design-tokens/src/index.ts

@@ -0,0 +1,35 @@
+// @gv-tech/design-tokens
+// Single source of truth for all design tokens in the GV Tech design system.
+// Consumed by both web (ui-web) and native (ui-native) implementations.
+
+// Color tokens
+export { palette } from './palette';
+export type { PaletteTokens } from './palette';
+
+export { theme } from './theme';
+export type { ThemeTokens } from './theme';
+
+// Layout tokens
+export { spacing } from './spacing';
+export type { SpacingTokens } from './spacing';
+
+export { radii, radiiNumeric } from './radii';
+export type { RadiiNumericTokens, RadiiTokens } from './radii';
+
+// Typography tokens
+export { typography } from './typography';
+export type { TypographyTokens } from './typography';
+
+// Elevation tokens
+export { shadows } from './shadows';
+export type { ShadowTokens } from './shadows';
+
+// Convenience re-export of all tokens as a single object.
+// Mirrors the legacy `tokens` export from `src/theme/tokens.ts`.
+import { palette } from './palette';
+import { theme } from './theme';
+
+export const tokens = {
+  palette,
+  theme,
+} as const;

package/packages/design-tokens/src/palette.ts

@@ -0,0 +1,36 @@
+// Primitive color palette for the GV Tech design system.
+// These are the raw color values. They should NOT be used directly in components —
+// use semantic tokens from `theme.ts` instead.
+
+export const palette = {
+  brand: {
+    blue: 'hsl(225 73% 57%)', // Royal Blue (Intellect)
+    green: 'hsl(151 66% 27%)', // #177245 (Stability)
+    floralWhite: 'hsl(40 100% 97%)', // Light Neutral / Floral White
+  },
+  neutral: {
+    white: 'hsl(0 0% 100%)',
+    black: 'hsl(0 0% 0%)', // Pure Black
+    gray50: 'hsl(0 0% 96%)', // White Smoke
+    gray100: 'hsl(0 0% 92%)', // Gainsboro
+    gray200: 'hsl(0 0% 89%)', // Light Gray
+    gray300: 'hsl(0 0% 88%)', // French Gray
+    gray400: 'hsl(0 0% 70%)', // Silver
+    gray500: 'hsl(215 16% 47%)', // Steel Blue
+    gray600: 'hsl(222 47% 11%)', // Oxford Blue
+    gray700: 'hsl(0 0% 18%)', // Raisin Black
+    gray800: 'hsl(0 0% 15%)', // Jet
+    gray900: 'hsl(0 0% 14%)', // Eerie Black
+    gray950: 'hsl(0 0% 11%)', // Night (alt)
+    gray975: 'hsl(0 0% 9%)', // Night
+    gray990: 'hsl(0 0% 6%)', // Black (almost)
+  },
+  semantic: {
+    success: 'hsl(93 28% 54%)', // Asparagus / Pistachio
+    successDark: 'hsl(96 44% 61%)',
+    destructive: 'hsl(0 84.2% 60.2%)', // Vivid Red
+    destructiveDark: 'hsl(0 62.8% 30.6%)', // Blood Red
+  },
+} as const;
+
+export type PaletteTokens = typeof palette;

package/packages/design-tokens/src/radii.ts

@@ -0,0 +1,26 @@
+// Border radius tokens for the GV Tech design system.
+
+export const radii = {
+  none: '0',
+  sm: 'calc(var(--radius) - 4px)',
+  md: 'calc(var(--radius) - 2px)',
+  lg: 'var(--radius)',
+  xl: 'calc(var(--radius) + 4px)',
+  '2xl': 'calc(var(--radius) + 8px)',
+  full: '9999px',
+} as const;
+
+// Numeric radius values (in px) for React Native, which doesn't support CSS calc().
+// Based on a default --radius of 0.5rem (8px).
+export const radiiNumeric = {
+  none: 0,
+  sm: 4, // 8 - 4
+  md: 6, // 8 - 2
+  lg: 8, // base
+  xl: 12, // 8 + 4
+  '2xl': 16, // 8 + 8
+  full: 9999,
+} as const;
+
+export type RadiiTokens = typeof radii;
+export type RadiiNumericTokens = typeof radiiNumeric;

package/packages/design-tokens/src/shadows.ts

@@ -0,0 +1,16 @@
+// Shadow / elevation tokens for the GV Tech design system.
+// Web values use CSS box-shadow syntax.
+// Native consumers should map these to platform-specific elevation or shadow props.
+
+export const shadows = {
+  none: 'none',
+  sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+  default: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+  md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+  lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+  xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+  '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+  inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+} as const;
+
+export type ShadowTokens = typeof shadows;

package/packages/design-tokens/src/spacing.ts

@@ -0,0 +1,33 @@
+// Spacing scale for the GV Tech design system.
+// Based on a 4px baseline grid. Values are in rem (assuming 16px root font size).
+
+export const spacing = {
+  px: '1px',
+  0: '0',
+  0.5: '0.125rem', // 2px
+  1: '0.25rem', // 4px
+  1.5: '0.375rem', // 6px
+  2: '0.5rem', // 8px
+  2.5: '0.625rem', // 10px
+  3: '0.75rem', // 12px
+  3.5: '0.875rem', // 14px
+  4: '1rem', // 16px
+  5: '1.25rem', // 20px
+  6: '1.5rem', // 24px
+  7: '1.75rem', // 28px
+  8: '2rem', // 32px
+  9: '2.25rem', // 36px
+  10: '2.5rem', // 40px
+  12: '3rem', // 48px
+  14: '3.5rem', // 56px
+  16: '4rem', // 64px
+  20: '5rem', // 80px
+  24: '6rem', // 96px
+  32: '8rem', // 128px
+  40: '10rem', // 160px
+  48: '12rem', // 192px
+  56: '14rem', // 224px
+  64: '16rem', // 256px
+} as const;
+
+export type SpacingTokens = typeof spacing;