banhatten-ui 0.1.0

package/dist/tokens/tokens.json

@@ -0,0 +1,340 @@
+{
+  "brand": {
+    "neutral-950": "#000000",
+    "neutral-900": "#131826",
+    "neutral-800": "#1f242e",
+    "neutral-700": "#3a424d",
+    "neutral-600": "#4e5663",
+    "neutral-500": "#686e7d",
+    "neutral-400": "#9fa5b2",
+    "neutral-300": "#d1d5de",
+    "neutral-200": "#e9ebf0",
+    "neutral-100": "#f1f3f7",
+    "neutral-50": "#f9fafc",
+    "neutral-25": "#ffffff",
+    "primary-950": "#172554",
+    "primary-900": "#1e3a8a",
+    "primary-800": "#1e40af",
+    "primary-700": "#1d4ed8",
+    "primary-600": "#2563eb",
+    "primary-500": "#3b82f6",
+    "primary-400": "#73affa",
+    "primary-300": "#93c5fd",
+    "primary-200": "#bfdbfe",
+    "primary-100": "#dbeafe",
+    "primary-50": "#eff6ff",
+    "success-950": "#022c22",
+    "success-900": "#064e3b",
+    "success-800": "#065f46",
+    "success-700": "#047857",
+    "success-600": "#059669",
+    "success-500": "#10b981",
+    "success-400": "#34d399",
+    "success-300": "#6ee7b7",
+    "success-200": "#a7f3d0",
+    "success-100": "#d1fae5",
+    "success-50": "#ecfdf5",
+    "warning-950": "#413406",
+    "warning-900": "#735912",
+    "warning-800": "#86660e",
+    "warning-700": "#a27607",
+    "warning-600": "#c89704",
+    "warning-500": "#eab308",
+    "warning-400": "#facc15",
+    "warning-300": "#fde047",
+    "warning-200": "#fef08a",
+    "warning-100": "#fef3c7",
+    "warning-50": "#fefce8",
+    "danger-950": "#450a0a",
+    "danger-900": "#7f1d1d",
+    "danger-800": "#991b1b",
+    "danger-700": "#b91c1c",
+    "danger-600": "#dc2626",
+    "danger-500": "#ef4444",
+    "danger-400": "#f87171",
+    "danger-300": "#fca5a5",
+    "danger-200": "#fecaca",
+    "danger-100": "#fee2e2",
+    "danger-50": "#fef2f2",
+    "info-950": "#172554",
+    "info-900": "#1e3a8a",
+    "info-800": "#1e40af",
+    "info-700": "#1d4ed8",
+    "info-600": "#2563eb",
+    "info-500": "#3b82f6",
+    "info-400": "#60a5fa",
+    "info-300": "#93c5fd",
+    "info-200": "#bfdbfe",
+    "info-100": "#dbeafe",
+    "info-50": "#eff6ff",
+    "sky-950": "#082f49",
+    "sky-900": "#0c4a6e",
+    "sky-800": "#075985",
+    "sky-700": "#0369a1",
+    "sky-600": "#0284c7",
+    "sky-500": "#0ea5e9",
+    "sky-400": "#38bdf8",
+    "sky-300": "#7dd3fc",
+    "sky-200": "#bae6fd",
+    "sky-100": "#e0f2fe",
+    "sky-50": "#f0f9ff",
+    "teal-950": "#042f2e",
+    "teal-900": "#134e4a",
+    "teal-800": "#115e59",
+    "teal-700": "#0f766e",
+    "teal-600": "#0d9488",
+    "teal-500": "#14b8a6",
+    "teal-400": "#2dd4bf",
+    "teal-300": "#5eead4",
+    "teal-200": "#99f6e4",
+    "teal-100": "#ccfbf1",
+    "teal-50": "#f0fdfa",
+    "lime-950": "#1a2e05",
+    "lime-900": "#365314",
+    "lime-800": "#3f6212",
+    "lime-700": "#4d7c0f",
+    "lime-600": "#65a30d",
+    "lime-500": "#84cc16",
+    "lime-400": "#a3e635",
+    "lime-300": "#bef264",
+    "lime-200": "#d9f99d",
+    "lime-100": "#ecfccb",
+    "lime-50": "#f7fee7",
+    "indigo-950": "#1e1b4b",
+    "indigo-900": "#312e81",
+    "indigo-800": "#3730a3",
+    "indigo-700": "#4338ca",
+    "indigo-600": "#4f46e5",
+    "indigo-500": "#6366f1",
+    "indigo-400": "#818cf8",
+    "indigo-300": "#a5b4fc",
+    "indigo-200": "#c7d2fe",
+    "indigo-100": "#e0e7ff",
+    "indigo-50": "#eef2ff",
+    "purple-950": "#3b0764",
+    "purple-900": "#581c87",
+    "purple-800": "#6b21a8",
+    "purple-700": "#7e22ce",
+    "purple-600": "#9333ea",
+    "purple-500": "#a855f7",
+    "purple-400": "#c084fc",
+    "purple-300": "#d8b4fe",
+    "purple-200": "#e9d5ff",
+    "purple-100": "#f3e8ff",
+    "purple-50": "#faf5ff",
+    "fuchsia-950": "#4a044e",
+    "fuchsia-900": "#701a75",
+    "fuchsia-800": "#86198f",
+    "fuchsia-700": "#a21caf",
+    "fuchsia-600": "#c026d3",
+    "fuchsia-500": "#d946ef",
+    "fuchsia-400": "#e879f9",
+    "fuchsia-300": "#f0abfc",
+    "fuchsia-200": "#f5d0fe",
+    "fuchsia-100": "#fae8ff",
+    "fuchsia-50": "#fdf4ff",
+    "pink-950": "#500724",
+    "pink-900": "#831843",
+    "pink-800": "#9d174d",
+    "pink-700": "#be185d",
+    "pink-600": "#db2777",
+    "pink-500": "#ec4899",
+    "pink-400": "#f472b6",
+    "pink-300": "#f9a8d4",
+    "pink-200": "#fbcfe8",
+    "pink-100": "#fce7f3",
+    "pink-50": "#fdf2f8",
+    "rose-950": "#4c0519",
+    "rose-900": "#881337",
+    "rose-800": "#9f1239",
+    "rose-700": "#be123c",
+    "rose-600": "#e11d48",
+    "rose-500": "#f43f5e",
+    "rose-400": "#fb7185",
+    "rose-300": "#fda4af",
+    "rose-200": "#fecdd3",
+    "rose-100": "#ffe4e6",
+    "rose-50": "#fff1f2",
+    "yellow-950": "#413406",
+    "yellow-900": "#735912",
+    "yellow-800": "#86660e",
+    "yellow-700": "#a27607",
+    "yellow-600": "#c89704",
+    "yellow-500": "#eab308",
+    "yellow-400": "#facc15",
+    "yellow-300": "#fde047",
+    "yellow-200": "#fef08a",
+    "yellow-100": "#fef3c7",
+    "yellow-50": "#fefce8"
+  },
+  "alias": {
+    "bg-primary": "{brand.neutral-25}",
+    "bg-primary-alt": "{brand.neutral-25}",
+    "bg-primary-inverse": "{brand.neutral-900}",
+    "bg-secondary": "{brand.neutral-50}",
+    "bg-secondary-alt": "{brand.neutral-50}",
+    "bg-secondary-subtle": "{brand.neutral-50}",
+    "bg-secondary-inverse": "{brand.neutral-800}",
+    "bg-tertiary": "{brand.neutral-100}",
+    "bg-quarterary": "{brand.neutral-200}",
+    "bg-inactive": "{brand.neutral-100}",
+    "bg-inactive-subtle": "{brand.neutral-50}",
+    "bg-always-light": "{brand.neutral-25}",
+    "bg-always-dark": "#191b21",
+    "bg-on-overlay": "{brand.neutral-25}",
+    "bg-overlay": "#8c8d90",
+    "highlight": "{brand.neutral-25}",
+    "highlight-hover": "rgba(0, 0, 0, 0.04)",
+    "highlight-pressed": "#ededed",
+    "highlight-inactive": "#f5f5f5",
+    "highlight-active": "#e8e8e8",
+    "bg-brand": "{brand.primary-600}",
+    "bg-brand-hover": "{brand.primary-700}",
+    "bg-brand-secondary": "{brand.primary-100}",
+    "bg-brand-tertiary": "{brand.primary-50}",
+    "bg-brand-tertiary-hover": "{brand.primary-100}",
+    "bg-brand-strong": "{brand.primary-800}",
+    "bg-success": "{brand.success-600}",
+    "bg-success-secondary": "{brand.success-100}",
+    "bg-success-tertiary": "{brand.success-50}",
+    "bg-danger": "{brand.danger-600}",
+    "bg-danger-hover": "{brand.danger-700}",
+    "bg-danger-secondary": "{brand.danger-100}",
+    "bg-danger-tertiary": "{brand.danger-50}",
+    "bg-danger-strong": "{brand.danger-800}",
+    "bg-warning": "{brand.warning-600}",
+    "bg-warning-secondary": "{brand.warning-100}",
+    "bg-warning-tertiary": "{brand.warning-50}",
+    "bg-info": "{brand.sky-600}",
+    "bg-info-secondary": "{brand.sky-100}",
+    "bg-info-tertiary": "{brand.sky-50}",
+    "border-default": "{brand.neutral-200}",
+    "border-secondary": "{brand.neutral-100}",
+    "border-strong": "{brand.neutral-300}",
+    "border-subtract": "{brand.neutral-25}",
+    "border-inactive": "{brand.neutral-300}",
+    "border-inactive-subtle": "{brand.neutral-200}",
+    "border-focused": "#d3e0fb",
+    "border-focused-danger": "#fac7c7",
+    "border-brand": "{brand.primary-600}",
+    "border-brand-secondary": "{brand.primary-300}",
+    "border-brand-tertiary": "{brand.primary-50}",
+    "border-success": "{brand.success-600}",
+    "border-success-secondary": "{brand.success-300}",
+    "border-success-tertiary": "{brand.success-50}",
+    "border-danger": "{brand.danger-600}",
+    "border-danger-secondary": "{brand.danger-300}",
+    "border-danger-tertiary": "{brand.danger-50}",
+    "border-warning": "{brand.warning-600}",
+    "border-warning-secondary": "{brand.warning-300}",
+    "border-warning-tertiary": "{brand.warning-50}",
+    "border-info": "{brand.sky-600}",
+    "border-info-subtle": "{brand.sky-300}",
+    "icon-primary": "{brand.neutral-800}",
+    "icon-primary-inverse": "{brand.neutral-25}",
+    "icon-secondary": "{brand.neutral-600}",
+    "icon-secondary-hover": "{brand.neutral-700}",
+    "icon-secondary-inverse": "{brand.neutral-400}",
+    "icon-tertiary": "{brand.neutral-500}",
+    "icon-tertiary-hover": "{brand.neutral-600}",
+    "icon-inactive": "{brand.neutral-400}",
+    "icon-inactive-subtle": "{brand.neutral-300}",
+    "icon-on-color": "{brand.neutral-25}",
+    "icon-on-color-inverse": "{brand.neutral-700}",
+    "icon-brand": "{brand.primary-600}",
+    "icon-brand-secondary": "{brand.primary-500}",
+    "icon-success": "{brand.success-600}",
+    "icon-success-secondary": "{brand.success-500}",
+    "icon-success-strong": "{brand.success-800}",
+    "icon-danger": "{brand.danger-600}",
+    "icon-danger-secondary": "{brand.danger-500}",
+    "icon-danger-strong": "{brand.danger-800}",
+    "icon-warning": "{brand.warning-600}",
+    "icon-warning-secondary": "{brand.warning-500}",
+    "icon-warning-strong": "{brand.warning-800}",
+    "icon-info": "{brand.sky-600}",
+    "icon-info-secondary": "{brand.sky-500}",
+    "icon-info-strong": "{brand.sky-800}",
+    "text-primary": "{brand.neutral-800}",
+    "text-primary-inverse": "{brand.neutral-25}",
+    "text-secondary": "{brand.neutral-600}",
+    "text-secondary-hover": "{brand.neutral-700}",
+    "text-secondary-inverse": "{brand.neutral-400}",
+    "text-tertiary": "{brand.neutral-500}",
+    "text-tertiary-hover": "{brand.neutral-600}",
+    "text-inactive": "{brand.neutral-500}",
+    "text-inactive-subtle": "{brand.neutral-400}",
+    "text-placeholder": "{brand.neutral-500}",
+    "text-on-color": "{brand.neutral-25}",
+    "text-on-color-inverse": "{brand.neutral-700}",
+    "text-brand": "{brand.primary-600}",
+    "text-brand-strong": "{brand.primary-800}",
+    "text-success": "{brand.success-600}",
+    "text-success-strong": "{brand.success-800}",
+    "text-danger": "{brand.danger-600}",
+    "text-danger-strong": "{brand.danger-800}",
+    "text-error": "{brand.danger-600}",
+    "text-warning": "{brand.warning-600}",
+    "text-warning-strong": "{brand.warning-800}",
+    "text-info": "{brand.sky-800}",
+    "text-info-strong": "{brand.sky-800}",
+    "component-input-bg": "{brand.neutral-25}",
+    "component-input-bg-hover": "{brand.neutral-50}",
+    "component-button-brand-bg": "{brand.primary-600}",
+    "component-button-brand-bg-hover": "{brand.primary-700}",
+    "component-button-secondary-bg": "{brand.neutral-25}",
+    "component-button-secondary-bg-hover": "{brand.neutral-100}",
+    "component-button-secondary-fg": "{brand.neutral-800}",
+    "component-button-secondary-fg-hover": "{brand.neutral-800}",
+    "component-button-danger-bg": "{brand.danger-600}",
+    "component-button-danger-bg-hover": "{brand.danger-700}",
+    "component-button-tertiary-bg-hover": "{brand.neutral-100}",
+    "component-button-tertiary-color-fg": "{brand.neutral-800}",
+    "component-button-tertiary-color-fg-hover": "{brand.neutral-800}",
+    "component-button-link-color-fg": "{brand.primary-700}",
+    "component-button-link-color-fg-hover": "{brand.primary-800}",
+    "component-toggle-brand-bg": "{brand.primary-600}",
+    "component-toggle-brand-bg-hover": "{brand.primary-700}"
+  },
+  "shadow": {
+    "xs": "0px 1px 2px 0px rgba(15, 17, 20, 0.06)",
+    "sm": "0px 1px 3px 0px rgba(15, 17, 20, 0.10)",
+    "md": "0px 1.75px 4px -1px rgba(15, 17, 20, 0.10)",
+    "lg": "0px 10px 16px -3px rgba(15, 17, 20, 0.06), 0px 4px 6px -2px rgba(15, 17, 20, 0.04)",
+    "xl": "0px 20px 25px -5px rgba(15, 17, 20, 0.08), 0px 10px 10px -5px rgba(15, 17, 20, 0.06)",
+    "2xl": "0px 25px 50px -12px rgba(15, 17, 20, 0.20)",
+    "flat": "0px 1px 0px 0px rgba(228, 228, 231, 1.0)",
+    "inner": "inset 0px 2px 4px 0px rgba(15, 17, 20, 0.08)"
+  },
+  "radius": {
+    "none": "0px",
+    "xxs": "2px",
+    "xs": "4px",
+    "sm": "8px",
+    "md": "12px",
+    "lg": "16px",
+    "xl": "20px",
+    "2xl": "28px",
+    "full": "9999px"
+  },
+  "spacing": {
+    "none": "0px",
+    "xxs": "0.125rem",
+    "xs": "0.25rem",
+    "sm": "0.5rem",
+    "md": "0.75rem",
+    "lg": "1rem",
+    "xl": "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.75rem",
+    "4xl": "2rem",
+    "5xl": "2.5rem",
+    "6xl": "3rem",
+    "7xl": "4rem",
+    "8xl": "5rem",
+    "9xl": "6rem",
+    "10xl": "8rem",
+    "11xl": "10rem",
+    "12xl": "12rem"
+  }
+}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "banhatten-ui",
+  "version": "0.1.0",
+  "description": "Banhatten Design System - React component library with token-based theming",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./lib/utils": {
+      "types": "./dist/lib/utils.d.ts",
+      "import": "./dist/lib/utils.mjs",
+      "require": "./dist/lib/utils.js"
+    },
+    "./tokens": "./dist/tokens/tokens.json",
+    "./tokens/tailwind.config": {
+      "types": "./dist/tokens/tailwind.config.d.ts",
+      "import": "./dist/tokens/tailwind.config.mjs",
+      "require": "./dist/tokens/tailwind.config.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "design-system",
+    "tailwind",
+    "typescript"
+  ],
+  "author": "",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/khaaledashraaf/banhatten-ds.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/khaaledashraaf/banhatten-ds/issues"
+  },
+  "homepage": "https://github.com/khaaledashraaf/banhatten-ds#readme",
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.563.0",
+    "material-symbols": "^0.40.2",
+    "tailwind-merge": "^3.4.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.2.3",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.0.0"
+  }
+}