@rojaostudio/ds 1.0.1 → 2.0.0-next.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rojaostudio/ds",
-  "version": "1.0.1",
+  "version": "2.0.0-next.0",
   "type": "module",
   "description": "Rojão Design System — componentes React, estilos e alvo React Native. O motor vive em @rojaostudio/ds-core.",
   "license": "MIT",
@@ -32,6 +32,7 @@
   ],
   "exports": {
     "./styles/base.css": "./styles/base.css",
+    "./styles/rds.css": "./styles/rds.css",
     "./styles/themes/rojao.css": "./styles/themes/rojao.css",
     "./tokens": {
       "types": "./dist/compat/tokens.d.ts",
@@ -101,15 +102,13 @@
     "LICENSE",
     "README.md",
     "dist",
-    "styles",
-    "brand"
+    "styles"
   ],
   "peerDependencies": {
     "expo-image": ">=1.10",
     "expo-image-picker": ">=15",
     "lucide-react": ">=0.300.0",
     "lucide-react-native": ">=0.300.0",
-    "next": ">=15",
     "react": ">=19",
     "react-dom": ">=19",
     "react-image-crop": ">=11",
@@ -120,9 +119,6 @@
     "tailwindcss": ">=4"
   },
   "peerDependenciesMeta": {
-    "next": {
-      "optional": true
-    },
     "lucide-react": {
       "optional": true
     },
@@ -149,45 +145,68 @@
     },
     "react-native-safe-area-context": {
       "optional": true
+    },
+    "tailwindcss": {
+      "optional": true
     }
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public",
-    "provenance": true
+    "provenance": false
   },
   "devDependencies": {
-    "@supabase/supabase-js": "^2.108.1",
     "@types/node": "^20.19.43",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/browser": "^4.1.11",
+    "@vitest/browser-playwright": "^4.1.11",
+    "axe-core": "^4.13.0",
     "eslint": "^9.18.0",
-    "next": "^16.2.7",
+    "playwright": "^1.63.0",
     "react-image-crop": "^11.0.10",
     "react-international-phone": "^4.8.0",
+    "ts-morph": "^28.0.0",
+    "tsup": "^8.5.1",
     "tsx": "^4.21.0",
     "typescript": "^5",
-    "vitest": "^4.1.7",
-    "tsup": "^8.5.1",
+    "vitest": "^4.1.11",
     "@rojao/config": "0.0.0"
   },
   "dependencies": {
-    "@rojaostudio/ds-core": "1.0.0"
+    "@radix-ui/react-accordion": "^1.2.20",
+    "@radix-ui/react-alert-dialog": "^1.1.23",
+    "@radix-ui/react-context-menu": "^2.3.7",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-hover-card": "^1.1.23",
+    "@radix-ui/react-navigation-menu": "^1.2.22",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "@radix-ui/react-toast": "^1.2.23",
+    "@radix-ui/react-toggle": "^1.1.18",
+    "@radix-ui/react-toggle-group": "^1.1.19",
+    "@radix-ui/react-tooltip": "^1.2.16",
+    "@rojaostudio/ds-core": "1.1.0-next.0"
   },
   "scripts": {
-    "build": "pnpm run build:tokens && pnpm run build:themes && pnpm run build:native && tsup",
+    "build": "pnpm run build:tokens && pnpm run build:themes && pnpm run build:rds && pnpm run build:native && tsup",
     "build:tokens": "tsx scripts/build-tokens.ts",
     "build:native": "tsx scripts/build-native.ts",
     "pack:release": "pnpm run build:tokens && pnpm run build:native && pnpm pack",
     "test": "vitest run",
     "test:watch": "vitest",
+    "test:browser": "vitest run --project browser",
     "typecheck": "tsc --noEmit",
     "detect": "tsx scripts/detect.ts",
     "validate:themes": "tsx scripts/validate-themes.ts",
     "build:themes": "tsx scripts/build-themes.ts",
-    "seed:ds": "tsx scripts/seed-ds.ts",
     "lint": "eslint .",
-    "build:brands": "tsx scripts/build-brands.ts && tsx scripts/build-native.ts --brand=taiq"
+    "build:brands": "tsx scripts/build-brands.ts",
+    "build:rds": "tsx scripts/build-rds-tokens.ts",
+    "migrate:consumer": "tsx scripts/migrate-consumer.ts"
   }
 }

package/styles/_primitives.generated.css

@@ -197,6 +197,46 @@
   --color-clay-700: #8a2900;
   --color-clay-800: #651a00;
   --color-clay-900: #440c00;
+  --color-zinc-50: #fafafa;
+  --color-zinc-100: #f4f4f5;
+  --color-zinc-200: #e4e4e7;
+  --color-zinc-300: #d4d4d8;
+  --color-zinc-400: #a1a1aa;
+  --color-zinc-500: #71717a;
+  --color-zinc-600: #52525b;
+  --color-zinc-700: #3f3f46;
+  --color-zinc-800: #27272a;
+  --color-zinc-900: #18181b;
+  --color-navy-50: #f4f6f9;
+  --color-navy-100: #e4e6ec;
+  --color-navy-200: #c9cdd8;
+  --color-navy-300: #aeb6c4;
+  --color-navy-400: #8a91a1;
+  --color-navy-500: #6b7488;
+  --color-navy-600: #5a6478;
+  --color-navy-700: #3a465f;
+  --color-navy-800: #26344f;
+  --color-navy-900: #1b2a4a;
+  --color-flare-50: #fff3e8;
+  --color-flare-100: #ffe2c6;
+  --color-flare-200: #ffca96;
+  --color-flare-300: #ffb066;
+  --color-flare-400: #ff9640;
+  --color-flare-500: #ff8c3a;
+  --color-flare-600: #ff7a1a;
+  --color-flare-700: #ff6a00;
+  --color-flare-800: #d95a00;
+  --color-flare-900: #b34b00;
+  --color-coal-50: #ecedf0;
+  --color-coal-100: #d0d3db;
+  --color-coal-200: #a3a8b5;
+  --color-coal-300: #6e7590;
+  --color-coal-400: #474c5a;
+  --color-coal-500: #353a47;
+  --color-coal-600: #2d3240;
+  --color-coal-700: #232833;
+  --color-coal-800: #181b21;
+  --color-coal-900: #0f1115;
 
   /* ── Space ── */
   --space-0: 0rem;

package/styles/base.css

@@ -1,3 +1,15 @@
+/* ─────────────────────────────────────────────────────────────
+   DEPRECATED (2.0, #19). Legacy, kept for the apps that still use
+   its Tailwind utilities (bg-surface-*, text-fg-*, h-control-*…)
+   and its CSS variables. No component of @rojaostudio/ds reads it
+   any more: the 2.0 entry point is
+
+     @import "@rojaostudio/ds/styles/rds.css";
+
+   which needs no Tailwind. Move app code off these utilities and
+   variables; this file leaves in a future major.
+   ───────────────────────────────────────────────────────────── */
+
 /* ─────────────────────────────────────────────────────────────
    ROJAO DS — base.css
    Import this AFTER @import "tailwindcss" in each project:
@@ -7,7 +19,7 @@
 
    Then either override semantic vars in :root, or import a brand
    theme that already references primitives:
-     @import "@rojaostudio/ds/styles/themes/taiq.css";
+     @import "@rojaostudio/ds/styles/themes/rojao.css";
 
    Primitives (--color-cream-900, --color-cobalt-700, etc) come from
    _primitives.generated.css, which is built from tokens/index.ts.
@@ -270,7 +282,7 @@
    *
    * Cada componente tem seus tokens definidos aqui com valores semânticos como defaults.
    * Os themes (styles/themes/*.css) sobrescrevem APENAS os tokens cujo comportamento
-   * de marca desvia do semântico (ex: taiq dark usa zinc-100, não --brand-primary).
+   * de marca desvia do semântico (ex.: um dark que usa zinc-100, não --brand-primary).
    * Nunca referenciar primitivos diretamente aqui — sempre via vars semânticas.
    */
 
@@ -324,24 +336,6 @@
   --saving-bar-save-bg-hover:         color-mix(in srgb, var(--brand-on-primary) 85%, transparent);
   --saving-bar-save-text:             var(--brand-primary);
 
-  /* PageTabs — component tokens */
-  --page-tabs-bg:               var(--surface-default);
-  --page-tabs-border:           var(--border-default);
-  --page-tabs-text:             var(--text-muted);
-  --page-tabs-text-hover:       var(--text-secondary);
-  --page-tabs-text-active:      var(--text-primary);
-  --page-tabs-indicator-active: var(--brand-primary);
-  --page-tabs-indicator-hover:  var(--border-strong);
-  --page-tabs-count-bg:         var(--surface-raised);
-  --page-tabs-count-text:       var(--text-secondary);
-  --page-tabs-count-bg-active:  var(--brand-primary);
-  --page-tabs-count-text-active: var(--brand-on-primary);
-  --page-tabs-soon-bg:          var(--surface-raised);
-  --page-tabs-soon-text:        var(--text-disabled);
-  --page-tabs-dot-bg:           color-mix(in srgb, var(--status-active) 15%, transparent);
-  --page-tabs-dot-text:         var(--status-active-text);
-  --page-tabs-dot-indicator:    var(--status-active);
-
   /* Form controls — active state color (toggle track, checkbox, radio).
      Separate from brand-primary so themes can use a functional indicator
      (e.g. green) instead of the brand accent color. */
@@ -375,7 +369,7 @@
      MESMA FAMÍLIA visual do ChoiceCard (os dois single-choice): casca idle suave
      (border-default, hover border-strong) e selecionado = fill SÓLIDO, derivado dos
      tokens SEMÂNTICOS de seleção (--selection-fill-active/--selection-on-fill-active) —
-     temas que sobrescrevem a camada de seleção (ex. taiq dark → zinc-100) propagam pra
+     temas que sobrescrevem a camada de seleção (ex.: um dark → zinc-100) propagam pra
      cá sem redeclarar cada token de componente. Baixa visão: a seleção é distinguível
      por MAIS que cor (fill sólido de alto contraste + check redundante — o check
      inverte: badge on-fill, glifo fill). Todo conteúdo sobre o fill ativo usa o par