@ngx-smz/ui-kit 0.0.0-stage → 21.9.0-next.10

package/package.json

@@ -1,6 +1,36 @@
 {
   "name": "@ngx-smz/ui-kit",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "21.9.0-next.10",
+  "peerDependencies": {
+    "@angular/cdk": ">=21.0.0 <22.0.0",
+    "@angular/common": ">=21.0.0 <22.0.0",
+    "@angular/core": ">=21.0.0 <22.0.0",
+    "@angular/forms": ">=21.0.0 <22.0.0",
+    "@angular/router": ">=21.0.0 <22.0.0",
+    "rxjs": ">=7.4.0",
+    "tailwindcss": ">=3.4.17 <4.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    "./tailwind.preset": "./tailwind.preset.js",
+    "./tailwind.preset.js": "./tailwind.preset.js",
+    "./tailwind.content": "./tailwind.content.js",
+    "./tailwind.content.js": "./tailwind.content.js",
+    "./themes/*": "./themes/*",
+    ".": {
+      "types": "./types/ngx-smz-ui-kit.d.ts",
+      "default": "./fesm2022/ngx-smz-ui-kit.mjs"
+    }
+  },
+  "module": "fesm2022/ngx-smz-ui-kit.mjs",
+  "typings": "types/ngx-smz-ui-kit.d.ts"
 }

package/tailwind.content.js

@@ -0,0 +1,12 @@
+const path = require('path');
+
+/**
+ * Globs que o Tailwind do app consumidor deve escanear para gerar as classes usadas
+ * pelos componentes do ui-kit. O Tailwind v3 ignora `content` vindo de presets,
+ * entao o app precisa incluir isso no proprio tailwind.config:
+ *
+ *   content: [ 'src/**\/*.{html,ts}', ...require('@ngx-smz/ui-kit/tailwind.content') ]
+ */
+module.exports = [
+  path.join(__dirname, 'fesm2022', '**', '*.mjs').replace(/\\/g, '/'),
+];

package/tailwind.preset.js

@@ -0,0 +1,85 @@
+const channel = (name) => `rgb(var(--smz-color-${name}) / <alpha-value>)`;
+
+const colorNames = [
+  'primary', 'primary-hover', 'primary-active', 'on-primary',
+  'danger', 'danger-hover', 'danger-active', 'on-danger',
+  'success', 'success-hover', 'success-active', 'on-success',
+  'warning', 'warning-hover', 'warning-active', 'on-warning',
+  'surface-0', 'surface-1', 'surface-2', 'surface-3',
+  'fg', 'fg-muted', 'fg-subtle',
+  'line', 'line-strong',
+  'focus',
+];
+
+const colors = Object.fromEntries(colorNames.map((name) => [`ui-${name}`, channel(name)]));
+
+/**
+ * Vocabulario herdado do `tailwindcss-primeui` (bg-primary, text-color, text-muted-color, bg-surface-100, border-surface,
+ * rounded-border), mantido para os apps e layouts existentes. Mapeia para os mesmos tokens do tema; a escala `surface-N` e fixa.
+ */
+const surfaceScale = {
+  0: '#ffffff', 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8',
+  500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617',
+};
+const legacyColors = {
+  primary: { DEFAULT: channel('primary'), contrast: channel('on-primary'), hover: channel('primary-hover'), active: channel('primary-active') },
+  surface: { DEFAULT: channel('line'), ...surfaceScale },
+  color: channel('fg'),
+  'muted-color': channel('fg-muted'),
+  'surface-border': channel('line'),
+};
+
+/**
+ * Preset do @ngx-smz/ui-kit. Mapeia os tokens do tema (variaveis CSS --smz-*)
+ * para utilitarios semanticos do Tailwind (bg-ui-primary, rounded-control, h-control...).
+ * Cores levam o prefixo `ui-` (bg-ui-primary, text-ui-fg) para nao colidir com plugins ou temas do app
+ * Os valores vivem no arquivo de tema (themes/*.css), nunca aqui.
+ */
+module.exports = {
+  theme: {
+    extend: {
+      colors: { ...colors, ...legacyColors },
+      fontFamily: {
+        ui: 'var(--smz-font-sans)',
+        'ui-mono': 'var(--smz-font-mono)',
+      },
+      fontSize: {
+        'ui-xs': ['var(--smz-text-xs)', 'var(--smz-leading)'],
+        'ui-sm': ['var(--smz-text-sm)', 'var(--smz-leading)'],
+        'ui-md': ['var(--smz-text-md)', 'var(--smz-leading)'],
+        'ui-lg': ['var(--smz-text-lg)', 'var(--smz-leading)'],
+        'ui-xl': ['var(--smz-text-xl)', 'var(--smz-leading)'],
+      },
+      height: {
+        'control-sm': 'var(--smz-control-h-sm)',
+        control: 'var(--smz-control-h)',
+        'control-lg': 'var(--smz-control-h-lg)',
+      },
+      minHeight: {
+        'control-sm': 'var(--smz-control-h-sm)',
+        control: 'var(--smz-control-h)',
+        'control-lg': 'var(--smz-control-h-lg)',
+      },
+      padding: {
+        'control-x-sm': 'var(--smz-control-px-sm)',
+        'control-x': 'var(--smz-control-px)',
+        'control-x-lg': 'var(--smz-control-px-lg)',
+        'input-x-sm': 'var(--smz-input-px-sm)',
+        'input-x': 'var(--smz-input-px)',
+      },
+      borderRadius: {
+        control: 'var(--smz-radius-control)',
+        card: 'var(--smz-radius-card)',
+        overlay: 'var(--smz-radius-overlay)',
+        border: 'var(--smz-radius-control)',
+      },
+      boxShadow: {
+        card: 'var(--smz-shadow-card)',
+        overlay: 'var(--smz-shadow-overlay)',
+      },
+      transitionDuration: {
+        ui: 'var(--smz-duration)',
+      },
+    },
+  },
+};

package/themes/default.css

@@ -0,0 +1,89 @@
+/*
+ * Tema padrao do @ngx-smz/ui-kit.
+ * Cores sao canais RGB separados por espaco ("37 99 235") para o Tailwind aplicar opacidade (bg-primary/10).
+ * Para criar um tema, copie este arquivo e altere os valores. Para desplugar, remova o import.
+ */
+:root {
+  --smz-color-primary: 37 99 235;
+  --smz-color-primary-hover: 29 78 216;
+  --smz-color-primary-active: 30 64 175;
+  --smz-color-on-primary: 255 255 255;
+
+  --smz-color-danger: 220 38 38;
+  --smz-color-danger-hover: 185 28 28;
+  --smz-color-danger-active: 153 27 27;
+  --smz-color-on-danger: 255 255 255;
+
+  --smz-color-success: 22 163 74;
+  --smz-color-success-hover: 21 128 61;
+  --smz-color-success-active: 22 101 52;
+  --smz-color-on-success: 255 255 255;
+
+  --smz-color-warning: 245 158 11;
+  --smz-color-warning-hover: 217 119 6;
+  --smz-color-warning-active: 180 83 9;
+  --smz-color-on-warning: 31 41 55;
+
+  --smz-color-surface-0: 248 250 252;
+  --smz-color-surface-1: 255 255 255;
+  --smz-color-surface-2: 255 255 255;
+  --smz-color-surface-3: 241 245 249;
+
+  --smz-color-fg: 15 23 42;
+  --smz-color-fg-muted: 71 85 105;
+  --smz-color-fg-subtle: 148 163 184;
+
+  --smz-color-line: 226 232 240;
+  --smz-color-line-strong: 203 213 225;
+  --smz-color-focus: 37 99 235;
+
+  --smz-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --smz-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --smz-text-xs: 0.75rem;
+  --smz-text-sm: 0.8125rem;
+  --smz-text-md: 0.875rem;
+  --smz-text-lg: 1rem;
+  --smz-text-xl: 1.125rem;
+  --smz-leading: 1.5;
+
+  --smz-control-h-sm: 2rem;
+  --smz-control-h: 2.5rem;
+  --smz-control-h-lg: 3rem;
+  --smz-control-px-sm: 0.75rem;
+  --smz-control-px: 1rem;
+  --smz-control-px-lg: 1.5rem;
+  /* Padding horizontal de campos de formulario (padrao: o mesmo dos controles); ajuste so os campos com este token. */
+  --smz-input-px-sm: var(--smz-control-px-sm);
+  --smz-input-px: var(--smz-control-px);
+
+  --smz-radius-control: 0.5rem;
+  --smz-radius-card: 0.75rem;
+  --smz-radius-overlay: 0.75rem;
+
+  --smz-shadow-card: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.1);
+  --smz-shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.08);
+
+  --smz-duration: 150ms;
+}
+
+:root[data-smz-mode='dark'],
+:root.app-dark,
+:root.dark {
+  --smz-color-primary: 96 165 250;
+  --smz-color-primary-hover: 147 197 253;
+  --smz-color-primary-active: 191 219 254;
+  --smz-color-on-primary: 15 23 42;
+
+  --smz-color-surface-0: 2 6 23;
+  --smz-color-surface-1: 15 23 42;
+  --smz-color-surface-2: 30 41 59;
+  --smz-color-surface-3: 51 65 85;
+
+  --smz-color-fg: 241 245 249;
+  --smz-color-fg-muted: 203 213 225;
+  --smz-color-fg-subtle: 148 163 184;
+
+  --smz-color-line: 51 65 85;
+  --smz-color-line-strong: 71 85 105;
+  --smz-color-focus: 96 165 250;
+}