@tekkare/romulus 0.1.0 → 0.1.7

package/dist/runtime/components/DataTable.vue

@@ -0,0 +1,92 @@
+<!--
+  RmDataTable - table `table.tk` du design system. Style : components.css.
+
+  Accessibilite portee par le composant, pas par l'appelant : `caption`
+  obligatoire (masquee visuellement, elle donne son nom accessible a la
+  table), colonnes d'identite en `<th scope="row">`, tri annonce via
+  `aria-sort`.
+
+  Le tri est pilote par le parent (props `sortKey` / `sortDir` + evenement
+  `sort`). Pas d'etat cache dans le composant : c'est exactement le defaut
+  qui empeche de fermer un sous-menu Auriga depuis l'exterieur.
+-->
+<script setup lang="ts">
+export interface RmColumn {
+  /** Cle de la propriete dans la ligne, et nom du slot `#cell-<key>`. */
+  key: string
+  /** En-tete de colonne. */
+  label: string
+  /** Colonne d'identite : rendue en `<th scope="row">`. Une seule par table. */
+  rowHeader?: boolean
+  /** Valeur numerique : alignee a droite, chiffres tabulaires. */
+  numeric?: boolean
+  /** Colonne triable : rend l'en-tete cliquable et annonce `aria-sort`. */
+  sortable?: boolean
+}
+
+const props = withDefaults(defineProps<{
+  /** Nom accessible de la table. Masque visuellement par defaut. */
+  caption: string
+  /** Affiche la caption au-dessus de la table (hors chart-card, qui porte deja le titre). */
+  captionVisible?: boolean
+  columns: RmColumn[]
+  rows: Record<string, unknown>[]
+  sortKey?: string
+  sortDir?: 'asc' | 'desc'
+  /** Message affiche quand il n'y a aucune ligne. Le hors-perimetre se dit, il ne s'estime pas. */
+  emptyText?: string
+}>(), {
+  captionVisible: false,
+  sortKey: undefined,
+  sortDir: undefined,
+  emptyText: 'Aucune donnée disponible pour cette sélection.',
+})
+
+const emit = defineEmits<{ sort: [key: string] }>()
+
+function ariaSort(column: RmColumn) {
+  if (!column.sortable) return undefined
+  if (props.sortKey !== column.key) return 'none'
+  return props.sortDir === 'desc' ? 'descending' : 'ascending'
+}
+</script>
+
+<template>
+  <div class="tk-wrap">
+    <table class="tk">
+      <caption :class="captionVisible ? undefined : 'sr-only'">{{ caption }}</caption>
+      <thead>
+        <tr>
+          <th
+            v-for="column in columns"
+            :key="column.key"
+            scope="col"
+            :class="column.numeric ? 'tk-num' : undefined"
+            :aria-sort="ariaSort(column)"
+            :tabindex="column.sortable ? 0 : undefined"
+            @click="column.sortable && emit('sort', column.key)"
+            @keydown.enter.prevent="column.sortable && emit('sort', column.key)"
+            @keydown.space.prevent="column.sortable && emit('sort', column.key)"
+          >
+            {{ column.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="!rows.length">
+          <td :colspan="columns.length">{{ emptyText }}</td>
+        </tr>
+        <tr v-for="(row, index) in rows" :key="index">
+          <template v-for="column in columns" :key="column.key">
+            <th v-if="column.rowHeader" scope="row">
+              <slot :name="`cell-${column.key}`" :value="row[column.key]" :row="row">{{ row[column.key] }}</slot>
+            </th>
+            <td v-else :class="column.numeric ? 'tk-num' : undefined">
+              <slot :name="`cell-${column.key}`" :value="row[column.key]" :row="row">{{ row[column.key] }}</slot>
+            </td>
+          </template>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/dist/runtime/components/Drawer.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+export interface RmDrawerProps {
+  /** Whether the drawer is open */
+  modelValue: boolean
+  /** Drawer size */
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+  /** Position */
+  side?: 'right' | 'left'
+  /** Show overlay behind the drawer */
+  overlay?: boolean
+  /** Offset from the edge (e.g. '280px' to keep a panel visible) */
+  offset?: string
+}
+
+const props = withDefaults(defineProps<RmDrawerProps>(), {
+  size: 'lg',
+  side: 'right',
+  overlay: true,
+  offset: '0px',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+function close() {
+  emit('update:modelValue', false)
+}
+
+const sizeMap: Record<string, string> = {
+  sm: '360px',
+  md: '480px',
+  lg: '640px',
+  xl: '860px',
+  full: '100%',
+}
+
+const drawerWidth = computed(() => sizeMap[props.size] || props.size)
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="rm-drawer-overlay">
+      <div
+        v-if="modelValue && overlay"
+        class="rm-drawer-overlay"
+        @click="close"
+      />
+    </Transition>
+
+    <Transition :name="`rm-drawer-slide-${side}`">
+      <div
+        v-if="modelValue"
+        class="rm-drawer"
+        :class="[`rm-drawer--${side}`]"
+        :style="{ width: drawerWidth, [side]: offset }"
+      >
+        <div class="rm-drawer__header">
+          <slot name="header" />
+          <button class="rm-drawer__close" @click="close">
+            <RmIcon name="X" :size="20" />
+          </button>
+        </div>
+
+        <div class="rm-drawer__body">
+          <slot />
+        </div>
+
+        <div v-if="$slots.footer" class="rm-drawer__footer">
+          <slot name="footer" />
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.rm-drawer-overlay{backdrop-filter:blur(2px);background-color:rgba(0,0,0,.2);inset:0;position:fixed;z-index:90}.rm-drawer{background-color:var(--r-color-white);bottom:0;box-shadow:var(--r-shadow-xl);display:flex;flex-direction:column;max-width:100%;position:fixed;top:0;z-index:91}.rm-drawer--right{border-left:1px solid var(--r-color-gray-200)}.rm-drawer--left{border-right:1px solid var(--r-color-gray-200)}.rm-drawer__header{align-items:center;border-bottom:1px solid var(--r-color-gray-200);display:flex;justify-content:space-between;min-height:64px;padding:16px 24px}.rm-drawer__close{align-items:center;background:none;border:none;border-radius:var(--r-radius-md);color:var(--r-color-gray-500);cursor:pointer;display:flex;flex-shrink:0;height:32px;justify-content:center;transition:all var(--r-transition-fast);width:32px}.rm-drawer__close:hover{background-color:var(--r-color-gray-100);color:var(--r-color-gray-700)}.rm-drawer__body{flex:1;overflow-y:auto;padding:24px}.rm-drawer__footer{border-top:1px solid var(--r-color-gray-200);padding:16px 24px}.rm-drawer-overlay-enter-active,.rm-drawer-overlay-leave-active{transition:opacity .25s ease}.rm-drawer-overlay-enter-from,.rm-drawer-overlay-leave-to{opacity:0}.rm-drawer-slide-right-enter-active,.rm-drawer-slide-right-leave-active{transition:transform .3s cubic-bezier(.4,0,.2,1)}.rm-drawer-slide-right-enter-from,.rm-drawer-slide-right-leave-to{transform:translateX(100%)}.rm-drawer-slide-left-enter-active,.rm-drawer-slide-left-leave-active{transition:transform .3s cubic-bezier(.4,0,.2,1)}.rm-drawer-slide-left-enter-from,.rm-drawer-slide-left-leave-to{transform:translateX(-100%)}
+</style>

package/dist/runtime/components/FilterCheckbox.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { PhCheck } from '@phosphor-icons/vue'
+
+defineProps<{
+  label: string
+}>()
+
+const checked = defineModel<boolean>({ default: false })
+</script>
+
+<template>
+  <button
+    class="filter-checkbox"
+    :class="{ 'filter-checkbox--active': checked }"
+    @click="checked = !checked"
+  >
+    <span class="filter-checkbox__box" :class="{ 'filter-checkbox__box--checked': checked }">
+      <PhCheck v-if="checked" :size="10" weight="bold" />
+    </span>
+    <span>{{ label }}</span>
+  </button>
+</template>
+
+<style scoped>
+.filter-checkbox{align-items:center;background:#fff;border:1px solid #dbdef0;border-radius:6px;box-sizing:border-box;color:var(--r-color-gray-600);cursor:pointer;display:flex;font-family:var(--r-font-family);font-size:var(--r-text-sm);font-weight:var(--r-font-weight-medium);gap:8px;height:32px;padding:8px;transition:all var(--r-transition-fast);white-space:nowrap;width:193px}.filter-checkbox:hover{border-color:var(--r-color-gray-300)}.filter-checkbox--active{border-color:#4164ee;box-shadow:0 0 8px 0 rgba(65,100,238,.1)}.filter-checkbox__box{align-items:center;border:1.5px solid var(--r-color-gray-300);border-radius:3px;display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--r-transition-fast);width:16px}.filter-checkbox__box--checked{background-color:#4164ee;border-color:#4164ee;color:#fff}
+</style>

package/dist/runtime/components/FilterComplex.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import {
+  PhCaretDown,
+  PhMagnifyingGlass,
+  PhPlusCircle,
+  PhMinusCircle,
+  PhX,
+} from '@phosphor-icons/vue'
+import type { Component } from 'vue'
+
+export interface FilterComplexOption {
+  label: string
+  value: string
+}
+
+const props = withDefaults(defineProps<{
+  icon?: Component
+  label: string
+  options: FilterComplexOption[]
+}>(), {
+  icon: undefined,
+})
+
+const selected = defineModel<string[]>({ default: () => [] })
+
+const isOpen = ref(false)
+const wrapperRef = ref<HTMLElement>()
+const addSearch = ref('')
+const delSearch = ref('')
+
+const isActive = computed(() => selected.value.length > 0)
+
+const availableOptions = computed(() => {
+  return props.options.filter(o => !selected.value.includes(o.value))
+})
+
+const filteredAvailable = computed(() => {
+  if (!addSearch.value) return availableOptions.value
+  const q = addSearch.value.toLowerCase()
+  return availableOptions.value.filter(o => o.label.toLowerCase().includes(q))
+})
+
+const selectedOptions = computed(() => {
+  return props.options.filter(o => selected.value.includes(o.value))
+})
+
+const filteredSelected = computed(() => {
+  if (!delSearch.value) return selectedOptions.value
+  const q = delSearch.value.toLowerCase()
+  return selectedOptions.value.filter(o => o.label.toLowerCase().includes(q))
+})
+
+function addOption(value: string) {
+  selected.value = [...selected.value, value]
+}
+
+function removeOption(value: string) {
+  selected.value = selected.value.filter(v => v !== value)
+}
+
+function addAll() {
+  selected.value = [...selected.value, ...filteredAvailable.value.map(o => o.value)]
+}
+
+function clearAll() {
+  selected.value = []
+}
+
+function toggle() {
+  isOpen.value = !isOpen.value
+  if (!isOpen.value) {
+    addSearch.value = ''
+    delSearch.value = ''
+  }
+}
+
+function onClickOutside(e: Event) {
+  if (wrapperRef.value && !wrapperRef.value.contains(e.target as Node)) {
+    isOpen.value = false
+    addSearch.value = ''
+    delSearch.value = ''
+  }
+}
+
+onMounted(() => document.addEventListener('click', onClickOutside))
+onUnmounted(() => document.removeEventListener('click', onClickOutside))
+</script>
+
+<template>
+  <div ref="wrapperRef" class="filter-complex">
+    <button
+      class="filter-complex__trigger"
+      :class="{ 'filter-complex__trigger--active': isActive }"
+      @click="toggle"
+    >
+      <component :is="icon" v-if="icon" :size="16" class="filter-complex__icon" />
+      <span class="filter-complex__label">{{ label }}</span>
+      <span v-if="isActive" class="filter-complex__badge">
+        {{ selected.length }}
+      </span>
+      <PhCaretDown
+        :size="12"
+        class="filter-complex__caret"
+        :class="{ 'filter-complex__caret--open': isOpen }"
+      />
+    </button>
+
+    <Transition name="dropdown">
+      <div v-if="isOpen" class="filter-complex__panel" @click.stop>
+        <!-- Left: Add -->
+        <div class="filter-complex__left">
+          <h3 class="filter-complex__title">Custom selection</h3>
+
+          <div class="filter-complex__search">
+            <PhMagnifyingGlass :size="14" color="#9ca3af" />
+            <input
+              v-model="addSearch"
+              type="text"
+              placeholder="Search to add..."
+              class="filter-complex__search-input"
+            >
+            <PhX
+              v-if="addSearch"
+              :size="12"
+              class="filter-complex__search-clear"
+              @click="addSearch = ''"
+            />
+          </div>
+
+          <button
+            v-if="filteredAvailable.length > 0"
+            class="filter-complex__action filter-complex__action--add"
+            @click="addAll"
+          >
+            Add all ({{ filteredAvailable.length }})
+          </button>
+
+          <div class="filter-complex__list">
+            <button
+              v-for="option in filteredAvailable"
+              :key="option.value"
+              class="filter-complex__item"
+              @click="addOption(option.value)"
+            >
+              <span class="filter-complex__item-label">{{ option.label }}</span>
+              <PhPlusCircle :size="16" class="filter-complex__item-icon filter-complex__item-icon--add" />
+            </button>
+            <p v-if="filteredAvailable.length === 0" class="filter-complex__empty">
+              No results
+            </p>
+          </div>
+        </div>
+
+        <!-- Right: Selection -->
+        <div class="filter-complex__right">
+          <div class="filter-complex__right-header">
+            <h3 class="filter-complex__title">Current selection</h3>
+            <button
+              v-if="selected.length > 0"
+              class="filter-complex__action filter-complex__action--clear"
+              @click="clearAll"
+            >
+              Clear
+            </button>
+          </div>
+
+          <div v-if="selected.length > 0" class="filter-complex__search">
+            <PhMagnifyingGlass :size="14" color="#9ca3af" />
+            <input
+              v-model="delSearch"
+              type="text"
+              placeholder="Search selection..."
+              class="filter-complex__search-input"
+            >
+            <PhX
+              v-if="delSearch"
+              :size="12"
+              class="filter-complex__search-clear"
+              @click="delSearch = ''"
+            />
+          </div>
+
+          <div class="filter-complex__list">
+            <button
+              v-for="option in filteredSelected"
+              :key="option.value"
+              class="filter-complex__item"
+              @click="removeOption(option.value)"
+            >
+              <span class="filter-complex__item-label">{{ option.label }}</span>
+              <PhMinusCircle :size="16" class="filter-complex__item-icon filter-complex__item-icon--remove" />
+            </button>
+            <p v-if="selected.length === 0" class="filter-complex__empty">
+              No selection
+            </p>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.filter-complex{position:relative}.filter-complex__trigger{align-items:center;background:#fff;border:1px solid #dbdef0;border-radius:6px;box-sizing:border-box;color:var(--r-color-gray-600);cursor:pointer;display:flex;font-family:var(--r-font-family);font-size:var(--r-text-sm);font-weight:var(--r-font-weight-medium);gap:8px;height:32px;padding:8px;transition:all var(--r-transition-fast);white-space:nowrap;width:193px}.filter-complex__trigger:hover{border-color:var(--r-color-gray-300)}.filter-complex__icon{color:#4164ee;flex-shrink:0}.filter-complex__trigger--active{border-color:#4164ee;box-shadow:0 0 8px 0 rgba(65,100,238,.1)}.filter-complex__label{flex:1;min-width:0;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.filter-complex__badge{align-items:center;background-color:#4164ee;border-radius:100px;color:#fff;display:inline-flex;flex-shrink:0;font-size:11px;font-weight:600;height:18px;justify-content:center;line-height:1;min-width:18px;padding:0 5px}.filter-complex__caret{color:var(--r-color-gray-400);flex-shrink:0;transition:transform var(--r-transition-fast)}.filter-complex__caret--open{transform:rotate(180deg)}.filter-complex__panel{background:#fff;border:1px solid #dbdef0;border-radius:8px;box-shadow:0 4px 24px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.05);display:flex;left:0;max-height:380px;overflow:hidden;position:absolute;top:calc(100% + 4px);width:520px;z-index:50}.filter-complex__left{flex:1 1 60%;flex-direction:column}.filter-complex__left,.filter-complex__right{display:flex;gap:8px;overflow:hidden;padding:20px}.filter-complex__right{background-color:var(--r-color-gray-50);border-left:1px solid #dbdef0;flex:1 1 40%;flex-direction:column}.filter-complex__right-header{align-items:center;display:flex;justify-content:space-between}.filter-complex__title{color:var(--r-color-gray-700);font-size:var(--r-text-sm);font-weight:var(--r-font-weight-semibold);margin:0}.filter-complex__search{align-items:center;background:#fff;border:1px solid #dbdef0;border-radius:6px;display:flex;gap:8px;padding:6px 8px}.filter-complex__search:focus-within{border-color:#4164ee}.filter-complex__search-input{background:transparent;border:none;color:var(--r-color-gray-700);flex:1;font-family:var(--r-font-family);font-size:var(--r-text-sm);outline:none}.filter-complex__search-input::-moz-placeholder{color:var(--r-color-gray-400)}.filter-complex__search-input::placeholder{color:var(--r-color-gray-400)}.filter-complex__search-clear{color:var(--r-color-gray-400);cursor:pointer;flex-shrink:0}.filter-complex__search-clear:hover{color:var(--r-color-gray-700)}.filter-complex__action{background:none;border:none;cursor:pointer;font-family:var(--r-font-family);font-size:var(--r-text-sm);padding:0;text-align:left;text-decoration:underline}.filter-complex__action--add{color:#4164ee}.filter-complex__action--add:hover{color:#3451d4}.filter-complex__action--clear{color:var(--r-color-danger-500)}.filter-complex__action--clear:hover{color:var(--r-color-danger-600)}.filter-complex__list{display:flex;flex:1;flex-direction:column;overflow-y:auto}.filter-complex__list::-webkit-scrollbar{width:4px}.filter-complex__list::-webkit-scrollbar-thumb{background:var(--r-color-gray-200);border-radius:100px}.filter-complex__list::-webkit-scrollbar-thumb:hover{background:var(--r-color-gray-400)}.filter-complex__item{align-items:center;background:none;border:none;border-radius:4px;color:var(--r-color-gray-700);cursor:pointer;display:flex;font-family:var(--r-font-family);font-size:var(--r-text-sm);gap:8px;padding:6px 8px;text-align:left;transition:background-color var(--r-transition-fast)}.filter-complex__item:hover{background-color:var(--r-color-gray-50)}.filter-complex__right .filter-complex__item:hover{background-color:var(--r-color-gray-100)}.filter-complex__item-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filter-complex__item-icon{flex-shrink:0;opacity:0;transition:opacity var(--r-transition-fast)}.filter-complex__item:hover .filter-complex__item-icon{opacity:1}.filter-complex__item-icon--add{color:#4164ee}.filter-complex__item-icon--remove{color:var(--r-color-danger-500)}.filter-complex__empty{color:var(--r-color-gray-400);font-size:var(--r-text-sm);font-style:italic;padding:8px}.dropdown-enter-active,.dropdown-leave-active{transition:opacity var(--r-transition-fast),transform var(--r-transition-fast)}.dropdown-enter-from,.dropdown-leave-to{opacity:0;transform:translateY(-4px)}
+</style>

package/dist/runtime/components/FilterDropdown.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { PhCaretDown, PhCheck } from '@phosphor-icons/vue'
+import type { Component } from 'vue'
+
+export interface FilterDropdownOption {
+  label: string
+  value: string
+}
+
+const props = withDefaults(defineProps<{
+  icon?: Component
+  label: string
+  options: FilterDropdownOption[]
+  multiple?: boolean
+}>(), {
+  icon: undefined,
+  multiple: true,
+})
+
+const selected = defineModel<string[]>({ default: () => [] })
+
+const isOpen = ref(false)
+const chipRef = ref<HTMLElement>()
+const hasUserChanged = ref(false)
+
+// Initialise synchrone pour éviter hydration mismatch
+if (!props.multiple && selected.value.length === 0 && props.options.length > 0) {
+  selected.value = [props.options[0]!.value]
+}
+
+const isActive = computed(() => hasUserChanged.value && selected.value.length > 0)
+
+const displayLabel = computed(() => {
+  if (!props.multiple && isActive.value && selected.value.length === 1) {
+    const option = props.options.find(o => o.value === selected.value[0])
+    return option ? `${props.label}: ${option.label}` : props.label
+  }
+  return props.label
+})
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+
+function toggleOption(value: string) {
+  hasUserChanged.value = true
+  if (props.multiple) {
+    const index = selected.value.indexOf(value)
+    if (index === -1) {
+      selected.value = [...selected.value, value]
+    } else {
+      selected.value = selected.value.filter(v => v !== value)
+    }
+  } else {
+    selected.value = [value]
+    isOpen.value = false
+  }
+}
+
+function isSelected(value: string) {
+  return selected.value.includes(value)
+}
+
+function onClickOutside(e: Event) {
+  if (chipRef.value && !chipRef.value.contains(e.target as Node)) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => document.addEventListener('click', onClickOutside))
+onUnmounted(() => document.removeEventListener('click', onClickOutside))
+</script>
+
+<template>
+  <div ref="chipRef" class="filter-chip-wrapper">
+    <button
+      class="filter-chip"
+      :class="{ 'filter-chip--active': isActive }"
+      @click="toggle"
+    >
+      <component :is="icon" v-if="icon" :size="16" class="filter-chip__icon" />
+      <span class="filter-chip__label">{{ displayLabel }}</span>
+      <span v-if="isActive && multiple && selected.length > 0" class="filter-chip__badge">
+        {{ selected.length }}
+      </span>
+      <PhCaretDown
+        :size="12"
+        class="filter-chip__caret"
+        :class="{ 'filter-chip__caret--open': isOpen }"
+      />
+    </button>
+
+    <Transition name="dropdown">
+      <div v-if="isOpen" class="filter-chip__dropdown">
+        <button
+          v-for="option in options"
+          :key="option.value"
+          class="filter-chip__option"
+          :class="{ 'filter-chip__option--selected': isSelected(option.value) }"
+          @click="toggleOption(option.value)"
+        >
+          <span
+            :class="[
+              multiple ? 'filter-chip__checkbox' : 'filter-chip__radio',
+              isSelected(option.value) && (multiple ? 'filter-chip__checkbox--checked' : 'filter-chip__radio--checked'),
+            ]"
+          >
+            <PhCheck v-if="multiple && isSelected(option.value)" :size="10" weight="bold" />
+          </span>
+          <span>{{ option.label }}</span>
+        </button>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.filter-chip-wrapper{position:relative}.filter-chip{align-items:center;background:#fff;border:1px solid #dbdef0;border-radius:6px;box-sizing:border-box;color:var(--r-color-gray-600);cursor:pointer;display:flex;font-family:var(--r-font-family);font-size:var(--r-text-sm);font-weight:var(--r-font-weight-medium);gap:8px;height:32px;padding:8px;transition:all var(--r-transition-fast);white-space:nowrap;width:193px}.filter-chip:hover{border-color:var(--r-color-gray-300)}.filter-chip__icon{color:#4164ee;flex-shrink:0}.filter-chip--active{border-color:#4164ee;box-shadow:0 0 8px 0 rgba(65,100,238,.1)}.filter-chip__label{flex:1;min-width:0;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.filter-chip__badge{align-items:center;background-color:#4164ee;border-radius:100px;color:#fff;display:inline-flex;flex-shrink:0;font-size:11px;font-weight:600;height:18px;justify-content:center;line-height:1;min-width:18px;padding:0 5px}.filter-chip__caret{color:var(--r-color-gray-400);flex-shrink:0;transition:transform var(--r-transition-fast)}.filter-chip__caret--open{transform:rotate(180deg)}.filter-chip__dropdown{background-color:#fff;border:1px solid #dbdef0;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);left:0;max-height:260px;min-width:200px;overflow-y:auto;padding:4px;position:absolute;top:calc(100% + 4px);z-index:50}.filter-chip__option{align-items:center;background:none;border:none;border-radius:4px;color:var(--r-color-gray-700);cursor:pointer;display:flex;font-family:var(--r-font-family);font-size:var(--r-text-sm);gap:8px;padding:6px 8px;text-align:left;transition:background-color var(--r-transition-fast);width:100%}.filter-chip__option:hover{background-color:var(--r-color-gray-50)}.filter-chip__option--selected{color:var(--r-color-gray-900);font-weight:var(--r-font-weight-medium)}.filter-chip__checkbox{align-items:center;border:1.5px solid var(--r-color-gray-300);border-radius:3px;display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--r-transition-fast);width:16px}.filter-chip__checkbox--checked{background-color:#4164ee;border-color:#4164ee;color:#fff}.filter-chip__radio{align-items:center;border:1.5px solid var(--r-color-gray-300);border-radius:100%;display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--r-transition-fast);width:16px}.filter-chip__radio--checked{border-color:#4164ee}.filter-chip__radio--checked:after{background-color:#4164ee;border-radius:100%;content:"";height:8px;width:8px}.dropdown-enter-active,.dropdown-leave-active{transition:opacity var(--r-transition-fast),transform var(--r-transition-fast)}.dropdown-enter-from,.dropdown-leave-to{opacity:0;transform:translateY(-4px)}
+</style>

package/dist/runtime/components/Icon.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed, defineAsyncComponent, type Component } from 'vue'
+
+export interface RmIconProps {
+  /** Phosphor icon name without the "Ph" prefix (e.g. "House", "Gear", "ChartBar") */
+  name: string
+  /** Icon size in pixels */
+  size?: number
+  /** Icon weight: thin, light, regular, bold, fill, duotone */
+  weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
+  /** Icon color */
+  color?: string
+}
+
+const props = withDefaults(defineProps<RmIconProps>(), {
+  size: 20,
+  weight: 'regular',
+  color: undefined,
+})
+
+const iconComponent = computed<Component>(() => {
+  const iconName = `Ph${props.name}`
+  return defineAsyncComponent(() =>
+    import('@phosphor-icons/vue').then((mod) => {
+      return (mod as Record<string, Component>)[iconName] || mod.PhQuestion
+    }),
+  )
+})
+</script>
+
+<template>
+  <ClientOnly>
+    <component
+      :is="iconComponent"
+      :size="size"
+      :weight="weight"
+      :color="color"
+    />
+    <template #fallback>
+      <span :style="{ display: 'inline-block', width: size + 'px', height: size + 'px' }" />
+    </template>
+  </ClientOnly>
+</template>

package/dist/runtime/components/Kpi.vue

@@ -0,0 +1,63 @@
+<!--
+  RmKpi - tuile KPI (chiffre + label + tendance). Style : components.css.
+  La valeur est toujours en serif (Caudex) : une valeur KPI en Figtree est
+  un bug. Pas de bloc de texte ici, seulement un chiffre et ses libelles.
+  La tendance porte un signe explicite ET une fleche, jamais la couleur seule.
+-->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  /** Libelle court, rendu en majuscules par le design system. */
+  label: string
+  /** Valeur deja formatee (voir utils/format : rmNumber, rmBig, rmPrice). */
+  value: string | number
+  /** Unite affichee apres la valeur : €, %, patients... */
+  unit?: string
+  /** Variation en points de pourcentage, deja signee. Affiche fleche + couleur semantique. */
+  trend?: number
+  /** Libelle de la periode comparee : "vs 2023". Obligatoire des qu'il y a une tendance. */
+  trendLabel?: string
+  /** Note de bas de tuile : precision de perimetre ou de methode. */
+  note?: string
+  /** Couleur produit. `brand` = violet de marque, le defaut en contexte generique. */
+  accent?: 'brand' | 'healthcare' | 'discovery' | 'pharma' | 'databank'
+}>(), {
+  unit: undefined,
+  trend: undefined,
+  trendLabel: undefined,
+  note: undefined,
+  accent: 'brand',
+})
+
+const direction = computed(() => {
+  if (props.trend === undefined) return null
+  if (props.trend > 0) return 'up'
+  if (props.trend < 0) return 'down'
+  return 'flat'
+})
+
+const arrow = computed(() => ({ up: 'ArrowUp', down: 'ArrowDown', flat: 'ArrowRight' }[direction.value!]))
+
+// Signe explicite + virgule decimale + espace avant le %, cf. utils/format.
+const trendText = computed(() =>
+  props.trend === undefined
+    ? ''
+    : (props.trend > 0 ? '+' : '') + props.trend.toFixed(1).replace('.', ',') + ' %',
+)
+</script>
+
+<template>
+  <div class="kpi-card">
+    <p class="kpi-label">{{ label }}</p>
+    <p class="kpi-value" :class="accent === 'brand' ? undefined : accent">
+      {{ value }}<span v-if="unit" class="unit">&#160;{{ unit }}</span>
+    </p>
+    <p v-if="direction" class="kpi-trend" :class="`kpi-trend--${direction}`">
+      <RmIcon :name="arrow" :size="11" weight="bold" />
+      <span>{{ trendText }}</span>
+      <span v-if="trendLabel">{{ trendLabel }}</span>
+    </p>
+    <p v-if="note" class="kpi-foot">{{ note }}</p>
+  </div>
+</template>

package/dist/runtime/components/NavGroup.vue

@@ -0,0 +1,37 @@
+<!--
+  RmNavGroup - section de navigation repliable. Style : components.css.
+
+  L'etat d'ouverture est pilote par le PARENT (`v-model:open`). C'est le
+  point qui manquait a `argSubMenu` d'Auriga : son `openMenu` vivait a
+  l'interieur du composant, donc impossible de refermer une section depuis
+  l'exterieur, donc pas d'accordeon exclusif. Ici le parent garde une seule
+  cle ouverte et la sidebar reste courte meme avec beaucoup de sections.
+-->
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  label: string
+  /** Icone Phosphor sans le prefixe "Ph". */
+  icon?: string
+  open?: boolean
+}>(), { icon: undefined, open: false })
+
+const emit = defineEmits<{ 'update:open': [value: boolean] }>()
+</script>
+
+<template>
+  <div class="nav-group" :data-open="String(props.open)">
+    <button
+      class="nav-group-header"
+      type="button"
+      :aria-expanded="props.open"
+      @click="emit('update:open', !props.open)"
+    >
+      <RmIcon v-if="icon" :name="icon" :size="14" />
+      <span>{{ label }}</span>
+      <span class="caret"><RmIcon name="CaretDown" :size="12" weight="bold" /></span>
+    </button>
+    <div v-show="props.open" class="nav-group-items">
+      <slot />
+    </div>
+  </div>
+</template>