@lfrprazeres/ui 0.1.0

package/dist/tokens/palettes/cyberpunk.css

@@ -0,0 +1,83 @@
+/* Cyberpunk palette. class="palette-cyberpunk", plus dark.
+   Also overrides radius and the sans stack, exercising the full preset contract. */
+
+.palette-cyberpunk {
+  --radius: 0.125rem;
+  --font-sans-stack:
+    var(--font-mono-app, "JetBrains Mono"), ui-monospace, SFMono-Regular,
+    "Cascadia Code", monospace;
+
+  --background: var(--slate-50);
+  --foreground: var(--slate-950);
+  --card: var(--neutral-0);
+  --card-foreground: var(--slate-950);
+  --popover: var(--neutral-0);
+  --popover-foreground: var(--slate-950);
+  --primary: var(--cyan-700);
+  --primary-foreground: var(--slate-50);
+  --secondary: var(--fuchsia-600);
+  --secondary-foreground: var(--slate-50);
+  --tertiary: var(--violet-600);
+  --tertiary-foreground: var(--slate-50);
+  --muted: var(--slate-100);
+  --muted-foreground: var(--slate-500);
+  --accent: var(--cyan-100);
+  --accent-foreground: var(--cyan-900);
+  --destructive: var(--rose-600);
+  --border: var(--slate-200);
+  --input: var(--slate-200);
+  --ring: var(--cyan-500);
+  --chart-1: var(--cyan-500);
+  --chart-2: var(--fuchsia-500);
+  --chart-3: var(--violet-500);
+  --chart-4: var(--emerald-500);
+  --chart-5: var(--gold-500);
+  --sidebar: var(--slate-100);
+  --sidebar-foreground: var(--slate-950);
+  --sidebar-primary: var(--cyan-700);
+  --sidebar-primary-foreground: var(--slate-50);
+  --sidebar-accent: var(--cyan-100);
+  --sidebar-accent-foreground: var(--cyan-900);
+  --sidebar-border: var(--slate-200);
+  --sidebar-ring: var(--cyan-500);
+  --positive: var(--emerald-600);
+  --negative: var(--rose-600);
+}
+
+.palette-cyberpunk.dark {
+  --background: var(--slate-950);
+  --foreground: var(--cyan-100);
+  --card: var(--slate-900);
+  --card-foreground: var(--cyan-100);
+  --popover: var(--slate-900);
+  --popover-foreground: var(--cyan-100);
+  --primary: var(--cyan-400);
+  --primary-foreground: var(--slate-950);
+  --secondary: var(--fuchsia-400);
+  --secondary-foreground: var(--slate-950);
+  --tertiary: var(--violet-400);
+  --tertiary-foreground: var(--slate-950);
+  --muted: var(--slate-800);
+  --muted-foreground: var(--slate-400);
+  --accent: var(--cyan-950);
+  --accent-foreground: var(--cyan-300);
+  --destructive: var(--rose-400);
+  --border: var(--overlay-white-10);
+  --input: var(--overlay-white-15);
+  --ring: var(--cyan-400);
+  --chart-1: var(--cyan-400);
+  --chart-2: var(--fuchsia-400);
+  --chart-3: var(--violet-400);
+  --chart-4: var(--emerald-400);
+  --chart-5: var(--gold-300);
+  --sidebar: var(--slate-900);
+  --sidebar-foreground: var(--cyan-100);
+  --sidebar-primary: var(--cyan-400);
+  --sidebar-primary-foreground: var(--slate-950);
+  --sidebar-accent: var(--cyan-950);
+  --sidebar-accent-foreground: var(--cyan-300);
+  --sidebar-border: var(--overlay-white-10);
+  --sidebar-ring: var(--cyan-400);
+  --positive: var(--emerald-400);
+  --negative: var(--rose-400);
+}

package/dist/tokens/palettes/gold.css

@@ -0,0 +1,77 @@
+/* Gold palette. class="palette-gold", plus dark. Colour only. */
+
+.palette-gold {
+  --background: var(--sand-50);
+  --foreground: var(--sand-950);
+  --card: var(--neutral-0);
+  --card-foreground: var(--sand-950);
+  --popover: var(--neutral-0);
+  --popover-foreground: var(--sand-950);
+  --primary: var(--gold-600);
+  --primary-foreground: var(--sand-50);
+  --secondary: var(--sand-100);
+  --secondary-foreground: var(--gold-900);
+  --tertiary: var(--gold-200);
+  --tertiary-foreground: var(--gold-950);
+  --muted: var(--sand-100);
+  --muted-foreground: var(--sand-600);
+  --accent: var(--gold-100);
+  --accent-foreground: var(--gold-900);
+  --destructive: var(--rose-600);
+  --border: var(--sand-200);
+  --input: var(--sand-200);
+  --ring: var(--gold-500);
+  --chart-1: var(--gold-300);
+  --chart-2: var(--gold-500);
+  --chart-3: var(--gold-600);
+  --chart-4: var(--gold-700);
+  --chart-5: var(--gold-800);
+  --sidebar: var(--sand-100);
+  --sidebar-foreground: var(--sand-950);
+  --sidebar-primary: var(--gold-600);
+  --sidebar-primary-foreground: var(--sand-50);
+  --sidebar-accent: var(--gold-100);
+  --sidebar-accent-foreground: var(--gold-900);
+  --sidebar-border: var(--sand-200);
+  --sidebar-ring: var(--gold-500);
+  --positive: var(--emerald-600);
+  --negative: var(--rose-600);
+}
+
+.palette-gold.dark {
+  --background: var(--sand-950);
+  --foreground: var(--sand-100);
+  --card: var(--sand-900);
+  --card-foreground: var(--sand-100);
+  --popover: var(--sand-900);
+  --popover-foreground: var(--sand-100);
+  --primary: var(--gold-300);
+  --primary-foreground: var(--sand-950);
+  --secondary: var(--sand-800);
+  --secondary-foreground: var(--sand-100);
+  --tertiary: var(--gold-800);
+  --tertiary-foreground: var(--gold-100);
+  --muted: var(--sand-800);
+  --muted-foreground: var(--sand-400);
+  --accent: var(--gold-950);
+  --accent-foreground: var(--gold-100);
+  --destructive: var(--rose-400);
+  --border: var(--overlay-white-10);
+  --input: var(--overlay-white-15);
+  --ring: var(--gold-400);
+  --chart-1: var(--gold-200);
+  --chart-2: var(--gold-300);
+  --chart-3: var(--gold-400);
+  --chart-4: var(--gold-500);
+  --chart-5: var(--gold-600);
+  --sidebar: var(--sand-900);
+  --sidebar-foreground: var(--sand-100);
+  --sidebar-primary: var(--gold-300);
+  --sidebar-primary-foreground: var(--sand-950);
+  --sidebar-accent: var(--gold-950);
+  --sidebar-accent-foreground: var(--gold-100);
+  --sidebar-border: var(--overlay-white-10);
+  --sidebar-ring: var(--gold-400);
+  --positive: var(--emerald-400);
+  --negative: var(--rose-400);
+}

package/dist/tokens/palettes/minimal.css

@@ -0,0 +1,82 @@
+/* Minimal palette. class="palette-minimal", plus dark.
+   Also overrides --spacing, which rescales every gap, padding and size, because
+   Tailwind emits those utilities as calc(var(--spacing) * n). */
+
+.palette-minimal {
+  --radius: 0rem;
+  --spacing: 0.2rem;
+
+  --background: var(--neutral-0);
+  --foreground: var(--neutral-950);
+  --card: var(--neutral-0);
+  --card-foreground: var(--neutral-950);
+  --popover: var(--neutral-0);
+  --popover-foreground: var(--neutral-950);
+  --primary: var(--neutral-950);
+  --primary-foreground: var(--neutral-0);
+  --secondary: var(--neutral-0);
+  --secondary-foreground: var(--neutral-950);
+  --tertiary: var(--neutral-100);
+  --tertiary-foreground: var(--neutral-950);
+  --muted: var(--neutral-50);
+  --muted-foreground: var(--neutral-600);
+  --accent: var(--neutral-100);
+  --accent-foreground: var(--neutral-950);
+  --destructive: var(--neutral-950);
+  --border: var(--neutral-950);
+  --input: var(--neutral-950);
+  --ring: var(--neutral-950);
+  --chart-1: var(--neutral-950);
+  --chart-2: var(--neutral-700);
+  --chart-3: var(--neutral-500);
+  --chart-4: var(--neutral-300);
+  --chart-5: var(--neutral-200);
+  --sidebar: var(--neutral-0);
+  --sidebar-foreground: var(--neutral-950);
+  --sidebar-primary: var(--neutral-950);
+  --sidebar-primary-foreground: var(--neutral-0);
+  --sidebar-accent: var(--neutral-100);
+  --sidebar-accent-foreground: var(--neutral-950);
+  --sidebar-border: var(--neutral-950);
+  --sidebar-ring: var(--neutral-950);
+  --positive: var(--neutral-950);
+  --negative: var(--neutral-950);
+}
+
+.palette-minimal.dark {
+  --background: var(--neutral-950);
+  --foreground: var(--neutral-0);
+  --card: var(--neutral-950);
+  --card-foreground: var(--neutral-0);
+  --popover: var(--neutral-950);
+  --popover-foreground: var(--neutral-0);
+  --primary: var(--neutral-0);
+  --primary-foreground: var(--neutral-950);
+  --secondary: var(--neutral-950);
+  --secondary-foreground: var(--neutral-0);
+  --tertiary: var(--neutral-800);
+  --tertiary-foreground: var(--neutral-0);
+  --muted: var(--neutral-900);
+  --muted-foreground: var(--neutral-400);
+  --accent: var(--neutral-800);
+  --accent-foreground: var(--neutral-0);
+  --destructive: var(--neutral-0);
+  --border: var(--neutral-0);
+  --input: var(--neutral-0);
+  --ring: var(--neutral-0);
+  --chart-1: var(--neutral-0);
+  --chart-2: var(--neutral-300);
+  --chart-3: var(--neutral-500);
+  --chart-4: var(--neutral-700);
+  --chart-5: var(--neutral-800);
+  --sidebar: var(--neutral-950);
+  --sidebar-foreground: var(--neutral-0);
+  --sidebar-primary: var(--neutral-0);
+  --sidebar-primary-foreground: var(--neutral-950);
+  --sidebar-accent: var(--neutral-800);
+  --sidebar-accent-foreground: var(--neutral-0);
+  --sidebar-border: var(--neutral-0);
+  --sidebar-ring: var(--neutral-0);
+  --positive: var(--neutral-0);
+  --negative: var(--neutral-0);
+}

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@lfrprazeres/ui",
+  "version": "0.1.0",
+  "description": "A React design system: shadcn elements, composed components, and a three-tier token contract.",
+  "keywords": [
+    "react",
+    "design-system",
+    "component-library",
+    "shadcn",
+    "tailwindcss",
+    "radix-ui"
+  ],
+  "homepage": "https://ui.luizprazeres.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lfrprazeres/ui.git"
+  },
+  "license": "MIT",
+  "author": "Luiz Fernando Prazeres <lfrprazeres@gmail.com>",
+  "sideEffects": [
+    "*.css"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js",
+    "./elements": "./dist/elements/index.js",
+    "./components": "./dist/components/index.js",
+    "./styles.css": "./dist/styles.css",
+    "./tokens/*": "./dist/tokens/*"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.34.0",
+    "motion": "^13.1.1",
+    "radix-ui": "^1.6.7",
+    "sonner": "^2.0.8",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@biomejs/biome": "^2.5.10",
+    "@changesets/cli": "^3.0.1",
+    "@commitlint/cli": "^21.2.2",
+    "@commitlint/config-conventional": "^21.2.2",
+    "@size-limit/preset-small-lib": "^13.0.3",
+    "@storybook/addon-a11y": "^10.5.10",
+    "@storybook/addon-themes": "^10.5.10",
+    "@storybook/addon-vitest": "^10.5.10",
+    "@storybook/react-vite": "^10.5.10",
+    "@tailwindcss/cli": "^4.3.3",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.1.0",
+    "@vitest/browser": "^4.1.11",
+    "@vitest/browser-playwright": "^4.1.11",
+    "husky": "^9.1.7",
+    "playwright": "^1.62.1",
+    "publint": "^0.3.24",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "size-limit": "^13.0.3",
+    "storybook": "^10.5.10",
+    "tailwindcss": "^4.3.3",
+    "tsdown": "^0.22.14",
+    "typescript": "^6.0.3",
+    "ultracite": "^7.10.6",
+    "vite": "^8.2.2",
+    "vitest": "^4.1.11"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "engines": {
+    "node": "^24.x",
+    "pnpm": ">=11"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "tsdown",
+    "build-storybook": "storybook build",
+    "check": "ultracite check",
+    "check:package": "publint && attw --pack . --profile esm-only --exclude-entrypoints styles.css",
+    "check:rsc": "node scripts/check-rsc-directives.mjs",
+    "check:size": "size-limit",
+    "fix": "ultracite fix",
+    "storybook": "storybook dev -p 6006",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
+}