@astratra/saas-kit-ui 1.2.0 → 1.3.0

package/README.md

@@ -68,7 +68,7 @@ Utilisez ce paquet si `AstratraDashboardApp` vous convient tel quel ; utilisez `
 
 MIT.
 
-## FeedbackBar : 👍 / 👎 sous une réponse d'IA
+## FeedbackBar : pouces sous une réponse d’IA
 
 Le même composant que dans `@astratra/native-ui`, pour le web. Contrôlé :
 l'application garde `value` et parle à son serveur (par exemple
@@ -88,7 +88,7 @@ import { FeedbackBar } from '@astratra/saas-kit-ui';
 Le pouce haut part aussitôt ; le pouce bas ouvre un panneau (raison,
 commentaire facultatif) ; appuyer sur le pouce choisi le retire. Libellés par
 défaut en anglais et en français (`locale`), remplaçables un par un (`labels`) ;
-raisons ajoutables (`reasons`) ; `icons` remplace les émojis ; `haptics` est une
+raisons ajoutables (`reasons`) ; `icons` remplace les pouces dessinés (contour SVG, plein une fois choisi, jamais d'émojis) ; `haptics` est une
 fonction facultative (rien par défaut). Accessibilité : groupe nommé, boutons à
 `aria-pressed`, puces `radio`, panneau `dialog`, Échap le ferme. Le style vient
 des classes `.astratra-feedback*` de `styles.css` et des variables CSS du kit.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astratra/saas-kit-ui",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Reusable React dashboard shell for Astratra SaaS applications, plus a thumbs up/down feedback bar for AI answers.",
   "engines": {
     "node": ">=20"

package/src/components/FeedbackBar.js

@@ -8,7 +8,24 @@ import {
   resolveFeedbackLabels
 } from '../lib/feedbackBar.js';
 
-const THUMBS = { up: '\u{1F44D}', down: '\u{1F44E}' };
+/**
+ * The thumbs are drawn, never emoji (an emoji changes with the system and looks out of place in a
+ * product). One outline on a 24 grid; down is the same hand turned upside down. Filled once chosen.
+ */
+export const THUMB_PATH = 'M7 21H4.5A1.5 1.5 0 0 1 3 19.5v-8A1.5 1.5 0 0 1 4.5 10H7M7 21V10l4.2-6.3A1.6 1.6 0 0 1 14 4.6V9h5a2 2 0 0 1 2 2.4l-1.5 7.9A2 2 0 0 1 17.5 21H7';
+
+function thumbIcon(rating, filled) {
+  return h('svg', {
+    'aria-hidden': 'true', focusable: 'false', viewBox: '0 0 24 24', width: 18, height: 18,
+    className: 'astratra-feedback__icon', fill: 'none', stroke: 'currentColor',
+    strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round'
+  }, h('path', {
+    d: THUMB_PATH,
+    fill: filled ? 'currentColor' : 'none',
+    fillOpacity: filled ? 0.9 : undefined,
+    transform: rating === 'down' ? 'matrix(1 0 0 -1 0 24)' : undefined
+  }));
+}
 
 /**
  * Thumbs up / thumbs down under an AI answer. Controlled: the app keeps
@@ -45,7 +62,7 @@ export default function FeedbackBar({
   const thumb = (rating) => h('button', {
     key: rating, type: 'button', disabled, 'aria-pressed': value === rating, 'aria-label': words[rating], title: words[rating],
     className: 'astratra-feedback__thumb', 'data-rating': rating, onClick: () => press(rating)
-  }, icons?.[rating] ?? h('span', { 'aria-hidden': 'true' }, THUMBS[rating]));
+  }, icons?.[rating] ?? thumbIcon(rating, value === rating));
 
   const options = feedbackReasonOptions({ reasons, labels: words, selected: reason });
   return h('div', { id, role: 'group', 'aria-label': words.group, className: ['astratra-feedback', className].filter(Boolean).join(' '), style },

package/src/styles/global.css

@@ -114,10 +114,19 @@ h3 {
   border-radius: 999px;
   background: transparent;
   cursor: pointer;
+  color: var(--text, currentColor);
   opacity: 0.7;
   transition: opacity 120ms, background 120ms;
 }
 
+.astratra-feedback__icon {
+  display: block;
+}
+
+.astratra-feedback__thumb[aria-pressed="true"] .astratra-feedback__icon {
+  color: var(--lime, #d9ff66);
+}
+
 .astratra-feedback__thumb:hover:not(:disabled),
 .astratra-feedback__thumb:focus-visible {
   opacity: 1;