@tekkare/romulus 0.1.0 → 0.1.7

package/dist/runtime/components/NavLink.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+export interface RmNavLinkProps {
+  /** Phosphor icon name (e.g. "ChartBar", "Flask") */
+  icon: string
+  /** Link label */
+  label: string
+  /** Navigation path */
+  to?: string
+  /** Whether the link is currently active */
+  active?: boolean
+  /** Caret type: 'expand' (down/up), 'navigate' (right), 'none' */
+  caret?: 'expand' | 'navigate' | 'none'
+  /** Whether the submenu is expanded (only for caret='expand') */
+  expanded?: boolean
+}
+
+withDefaults(defineProps<RmNavLinkProps>(), {
+  to: undefined,
+  active: false,
+  caret: 'none',
+  expanded: false,
+})
+
+defineEmits<{
+  click: []
+}>()
+</script>
+
+<template>
+  <button
+    class="rm-nav-link"
+    :class="{
+      'rm-nav-link--active': active,
+    }"
+    @click="$emit('click')"
+  >
+    <span class="rm-nav-link__icon">
+      <RmIcon :name="icon" :size="18" />
+    </span>
+    <span class="rm-nav-link__label">{{ label }}</span>
+
+    <!-- Expand caret (down/up) -->
+    <span
+      v-if="caret === 'expand'"
+      class="rm-nav-link__caret"
+      :class="{ 'rm-nav-link__caret--expanded': expanded }"
+    >
+      <RmIcon name="CaretDown" :size="14" />
+    </span>
+
+    <!-- Navigate caret (right) -->
+    <span v-if="caret === 'navigate'" class="rm-nav-link__caret">
+      <RmIcon name="CaretRight" :size="14" />
+    </span>
+  </button>
+</template>
+
+<style scoped>
+.rm-nav-link{background:none;border:none;border-radius:var(--r-radius-lg);cursor:pointer;gap:8px;padding:6px 12px 6px 6px;text-align:left;width:100%}.rm-nav-link,.rm-nav-link__icon{align-items:center;display:flex;transition:all var(--r-transition-fast)}.rm-nav-link__icon{background-color:var(--r-color-gray-100);border-radius:var(--r-radius-md);color:var(--r-color-gray-500);flex-shrink:0;height:28px;justify-content:center;width:28px}.rm-nav-link__label{color:#1e293b;flex:1;font-family:var(--r-font-family);font-size:14px;font-weight:400;line-height:160%;overflow:hidden;text-overflow:ellipsis;transition:all var(--r-transition-fast);white-space:nowrap}.rm-nav-link__caret{align-items:center;color:var(--r-color-gray-400);display:flex;flex-shrink:0;transition:transform .25s ease,color var(--r-transition-fast)}.rm-nav-link__caret--expanded{transform:rotate(-180deg)}.rm-nav-link:not(.rm-nav-link--active):hover{background-color:var(--r-color-primary-50)}.rm-nav-link:not(.rm-nav-link--active):hover .rm-nav-link__icon{background-color:var(--r-color-primary-100);color:var(--r-color-primary-600)}.rm-nav-link:not(.rm-nav-link--active):hover .rm-nav-link__caret{color:var(--r-color-primary-600)}.rm-nav-link--active{background-color:var(--r-color-gray-100)}.rm-nav-link--active .rm-nav-link__icon{background-color:var(--r-color-primary-600);color:var(--r-color-white)}.rm-nav-link--active .rm-nav-link__caret{color:var(--r-color-primary-600)}
+</style>

package/dist/runtime/components/Pill.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+
+withDefaults(defineProps<{
+  icon?: Component
+  label: string
+  active?: boolean
+  variant?: 'default' | 'primary' | 'secondary' | 'pharma' | 'discovery' | 'databank'
+}>(), {
+  icon: undefined,
+  active: false,
+  variant: 'default',
+})
+
+defineEmits<{
+  click: []
+}>()
+</script>
+
+<template>
+  <button
+    class="toolbar-pill"
+    :class="[
+      active && 'toolbar-pill--active',
+      `toolbar-pill--${variant}`,
+    ]"
+    @click="$emit('click')"
+  >
+    <component :is="icon" v-if="icon" :size="16" />
+    <span>{{ label }}</span>
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+.toolbar-pill{align-items:center;background-color:#fff;border:1px solid #dbdef0;border-radius:38px;color:var(--r-color-gray-600);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--r-text-sm);font-weight:var(--r-font-weight-medium);gap:4px;padding:4px 12px;transition:all var(--r-transition-fast);white-space:nowrap}.toolbar-pill:hover{box-shadow:0 1px 2px 0 rgba(30,41,59,.1)}.toolbar-pill--active{background-color:#2176ff;border-color:#2176ff;color:var(--r-color-white)}.toolbar-pill--active:hover{background-color:#1a65e0;border-color:#1a65e0;box-shadow:none}.toolbar-pill--primary{background-color:#2176ff;border-color:#2176ff;color:var(--r-color-white)}.toolbar-pill--primary:hover{background-color:#1a65e0;border-color:#1a65e0;box-shadow:none}.toolbar-pill--secondary{background-color:var(--r-color-gray-100);border-color:transparent;color:var(--r-color-gray-800)}.toolbar-pill--secondary:hover{background-color:var(--r-color-gray-200);border-color:transparent}.toolbar-pill--pharma{background-color:#f7520e;border-color:#f7520e;color:var(--r-color-white)}.toolbar-pill--pharma:hover{background-color:#d9470c;border-color:#d9470c}.toolbar-pill--discovery{background-color:#07816f;border-color:#07816f;color:var(--r-color-white)}.toolbar-pill--discovery:hover{background-color:#066b5c;border-color:#066b5c}.toolbar-pill--databank{background-color:#e04380;border-color:#e04380;color:var(--r-color-white)}.toolbar-pill--databank:hover{background-color:#c73a6f;border-color:#c73a6f}
+</style>

package/dist/runtime/components/PillTabs.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+export interface RmPillTabsProps {
+  /** Tab labels */
+  tabs: string[]
+  /** Active tab index */
+  modelValue?: number
+}
+
+withDefaults(defineProps<RmPillTabsProps>(), {
+  modelValue: 0,
+})
+
+defineEmits<{
+  'update:modelValue': [index: number]
+}>()
+</script>
+
+<template>
+  <div class="rm-pill-tabs">
+    <button
+      v-for="(tab, idx) in tabs"
+      :key="idx"
+      class="rm-pill-tabs__tab"
+      :class="{ 'rm-pill-tabs__tab--active': modelValue === idx }"
+      @click="$emit('update:modelValue', idx)"
+    >
+      {{ tab }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.rm-pill-tabs{display:flex;gap:4px}.rm-pill-tabs__tab{background:transparent;border:none;border-radius:var(--r-radius-lg);color:var(--r-color-gray-500);cursor:pointer;font-family:var(--r-font-family);font-size:14px;font-weight:400;padding:6px 14px;transition:all var(--r-transition-fast)}.rm-pill-tabs__tab:hover{color:var(--r-color-gray-700)}.rm-pill-tabs__tab--active{background-color:var(--r-color-gray-100);color:var(--r-color-gray-900);font-weight:600}
+</style>

package/dist/runtime/components/SearchBar.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { PhMagnifyingGlass } from '@phosphor-icons/vue'
+
+const model = defineModel<string>({ default: '' })
+
+withDefaults(defineProps<{
+  advancedActive?: boolean
+}>(), {
+  advancedActive: false,
+})
+
+defineEmits<{
+  advancedSearch: []
+}>()
+</script>
+
+<template>
+  <div class="search-bar" :class="{ 'search-bar--advanced-active': advancedActive }">
+    <PhMagnifyingGlass :size="16" class="search-bar__icon" />
+    <input
+      v-model="model"
+      type="text"
+      placeholder="Search..."
+      class="search-bar__input"
+    >
+    <button
+      class="search-bar__advanced"
+      :class="{ 'search-bar__advanced--active': advancedActive }"
+      @click="$emit('advancedSearch')"
+    >
+      Advanced search
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.search-bar{align-items:center;border:1px solid var(--r-color-gray-200);border-radius:var(--r-radius-full);display:inline-flex;gap:var(--r-space-2);height:32px;min-width:200px;padding:var(--r-space-1) var(--r-space-3);transition:border-color var(--r-transition-fast)}.search-bar:focus-within{border-color:var(--r-color-primary-400)}.search-bar__icon{color:var(--r-color-gray-400);flex-shrink:0}.search-bar__input{background:transparent;border:none;color:var(--r-color-gray-700);font-family:inherit;font-size:var(--r-text-sm);outline:none;width:100%}.search-bar__input::-moz-placeholder{color:var(--r-color-gray-400)}.search-bar__input::placeholder{color:var(--r-color-gray-400)}.search-bar__advanced{background:none;border:none;border-left:1px solid var(--r-color-gray-200);color:var(--r-color-gray-500);cursor:pointer;flex-shrink:0;font-family:inherit;font-size:var(--r-text-sm);padding:0 0 0 var(--r-space-2);text-decoration:underline;transition:color var(--r-transition-fast);white-space:nowrap}.search-bar__advanced:hover{color:var(--r-color-primary-600)}.search-bar--advanced-active{border-color:#4164ee}.search-bar__advanced--active{color:#4164ee;font-weight:var(--r-font-weight-medium)}
+</style>

package/dist/runtime/components/Sidebar.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+export interface RmSidebarMenuItem {
+  /** Display label */
+  label: string
+  /** Phosphor icon name (e.g. "ChartBar", "Flask") */
+  icon: string
+  /** Navigation path (if no children) */
+  to?: string
+  /** Sub-menu items */
+  children?: RmSidebarMenuItem[]
+}
+
+export interface RmSidebarProps {
+  /** Application name displayed in the header */
+  name: string
+  /** Menu items */
+  menus: RmSidebarMenuItem[]
+  /** Whether the sidebar is open */
+  open?: boolean
+}
+
+const props = withDefaults(defineProps<RmSidebarProps>(), {
+  open: true,
+})
+
+defineEmits<{
+  toggle: []
+}>()
+
+const route = useRoute()
+const router = useRouter()
+const expandedMenu = ref<string | null>(null)
+
+function onSubmenuEnter(el: Element) {
+  const element = el as HTMLElement
+  element.style.height = '0'
+  element.style.overflow = 'hidden'
+  element.offsetHeight // force reflow
+  element.style.transition = 'height 250ms ease, opacity 250ms ease'
+  element.style.opacity = '0'
+  element.style.height = element.scrollHeight + 'px'
+  element.style.opacity = '1'
+}
+
+function onSubmenuAfterEnter(el: Element) {
+  const element = el as HTMLElement
+  element.style.height = ''
+  element.style.overflow = ''
+  element.style.transition = ''
+  element.style.opacity = ''
+}
+
+function onSubmenuLeave(el: Element) {
+  const element = el as HTMLElement
+  element.style.height = element.scrollHeight + 'px'
+  element.style.overflow = 'hidden'
+  element.offsetHeight // force reflow
+  element.style.transition = 'height 200ms ease, opacity 200ms ease'
+  element.style.height = '0'
+  element.style.opacity = '0'
+}
+
+function onSubmenuAfterLeave(el: Element) {
+  const element = el as HTMLElement
+  element.style.height = ''
+  element.style.overflow = ''
+  element.style.transition = ''
+  element.style.opacity = ''
+}
+
+function isActive(item: RmSidebarMenuItem): boolean {
+  if (item.to) return route.path === item.to
+  return item.children?.some(c => isActive(c)) ?? false
+}
+
+function handleClick(item: RmSidebarMenuItem) {
+  if (item.children) {
+    expandedMenu.value = expandedMenu.value === item.label ? null : item.label
+  }
+  else if (item.to) {
+    router.push(item.to)
+  }
+}
+</script>
+
+<template>
+  <aside class="rm-sidebar" :class="{ 'rm-sidebar--collapsed': !open }">
+    <div class="rm-sidebar__header">
+      <div v-if="open" class="rm-sidebar__brand">
+        <RmIcon name="DiamondsFour" :size="22" weight="duotone" class="rm-sidebar__logo" />
+        <span class="rm-sidebar__name">{{ name }}</span>
+      </div>
+      <button class="rm-sidebar__toggle" @click="$emit('toggle')">
+        <RmIcon name="SidebarSimple" :size="20" />
+      </button>
+    </div>
+
+    <nav class="rm-sidebar__nav">
+      <template v-for="item in menus" :key="item.label">
+        <RmNavLink
+          :icon="item.icon"
+          :label="open ? item.label : ''"
+          :active="isActive(item)"
+          :caret="item.children && open ? 'expand' : 'none'"
+          :expanded="expandedMenu === item.label"
+          @click="handleClick(item)"
+        />
+
+        <Transition
+          @enter="onSubmenuEnter"
+          @after-enter="onSubmenuAfterEnter"
+          @leave="onSubmenuLeave"
+          @after-leave="onSubmenuAfterLeave"
+        >
+          <div
+            v-if="open && item.children && expandedMenu === item.label"
+            class="rm-sidebar__submenu"
+          >
+            <RmNavLink
+              v-for="(child, idx) in item.children"
+              :key="child.label"
+              :icon="child.icon"
+              :label="child.label"
+              :active="isActive(child)"
+              :expandable="false"
+              :style="{ animationDelay: `${idx * 50}ms` }"
+              class="rm-sidebar__submenu-item"
+              @click="child.to && router.push(child.to)"
+            />
+          </div>
+        </Transition>
+      </template>
+    </nav>
+
+    <div v-if="$slots.footer" class="rm-sidebar__footer">
+      <slot name="footer" />
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.rm-sidebar{background-color:var(--r-color-white);border-right:1px solid var(--r-color-gray-200);bottom:0;display:flex;flex-direction:column;left:0;overflow-y:auto;position:fixed;top:0;transition:width var(--r-transition-base);width:240px;z-index:50}.rm-sidebar--collapsed{width:64px}.rm-sidebar__header{align-items:center;border-bottom:1px solid var(--r-color-gray-200);display:flex;justify-content:space-between;min-height:64px;padding:0 16px}.rm-sidebar__brand{align-items:center;display:flex;gap:8px}.rm-sidebar__logo{color:var(--r-color-primary-600)}.rm-sidebar__name{color:var(--r-color-gray-900);font-family:var(--r-font-family);font-size:16px;font-weight:700;white-space:nowrap}.rm-sidebar__toggle{align-items:center;background:none;border:none;border-radius:var(--r-radius-md);color:var(--r-color-gray-500);cursor:pointer;display:flex;justify-content:center;padding:4px}.rm-sidebar__toggle:hover{background-color:var(--r-color-gray-100)}.rm-sidebar__nav{display:flex;flex:1;flex-direction:column;gap:6px;padding:8px}.rm-sidebar__submenu{display:flex;flex-direction:column;gap:6px;padding-left:20px}.rm-sidebar__submenu-item{animation:rm-submenu-fade-in .25s ease both}@keyframes rm-submenu-fade-in{0%{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}.rm-sidebar__footer{border-top:1px solid var(--r-color-gray-200);padding:12px}
+</style>

package/dist/runtime/components/Tabs.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+export interface RmTabsProps {
+  /** Tab labels */
+  tabs: string[]
+  /** Active tab index */
+  modelValue?: number
+  /** Color variant */
+  variant?: 'default' | 'pharma' | 'discovery' | 'databank'
+}
+
+const props = withDefaults(defineProps<RmTabsProps>(), {
+  modelValue: 0,
+  variant: 'default',
+})
+
+const defaultColors = { color: '#4164EE', bg: 'rgba(65, 100, 238, 0.05)' }
+
+const variantColors: Record<string, { color: string; bg: string }> = {
+  default: defaultColors,
+  pharma: { color: '#F7520E', bg: 'rgba(247, 82, 14, 0.05)' },
+  discovery: { color: '#07816F', bg: 'rgba(7, 129, 111, 0.05)' },
+  databank: { color: '#E04380', bg: 'rgba(224, 67, 128, 0.05)' },
+}
+
+const currentColors = computed((): { color: string; bg: string } => variantColors[props.variant] ?? defaultColors)
+
+const emit = defineEmits<{
+  'update:modelValue': [index: number]
+}>()
+
+const route = useRoute()
+const router = useRouter()
+
+const tabRefs = ref<HTMLElement[]>([])
+const indicatorStyle = ref<Record<string, string>>({})
+
+function slugify(name: string): string {
+  return name.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '')
+}
+
+function updateIndicator(index: number) {
+  nextTick(() => {
+    const tab = tabRefs.value[index]
+    if (tab) {
+      indicatorStyle.value = {
+        width: `${tab.offsetWidth}px`,
+        transform: `translateX(${tab.offsetLeft}px)`,
+      }
+    }
+  })
+}
+
+function selectTab(index: number) {
+  emit('update:modelValue', index)
+  updateIndicator(index)
+
+  const tabSlug = slugify(props.tabs[index] ?? '')
+  router.replace({ query: { ...route.query, tab: tabSlug } })
+}
+
+onMounted(() => {
+  if (route.query.tab) {
+    const tabParam = route.query.tab as string
+    const index = props.tabs.findIndex(t => slugify(t) === tabParam)
+    if (index >= 0) {
+      emit('update:modelValue', index)
+      updateIndicator(index)
+      return
+    }
+  }
+  updateIndicator(props.modelValue)
+})
+
+watch(() => props.modelValue, (val) => updateIndicator(val))
+</script>
+
+<template>
+  <div class="rm-tabs">
+    <div class="rm-tabs__list">
+      <button
+        v-for="(tab, idx) in tabs"
+        :key="idx"
+        :ref="(el) => { if (el) tabRefs[idx] = el as HTMLElement }"
+        class="rm-tabs__tab"
+        :class="{ 'rm-tabs__tab--active': modelValue === idx }"
+        :style="{
+          '--tab-active-color': currentColors.color,
+          '--tab-active-bg': currentColors.bg,
+          ...(modelValue === idx ? { color: currentColors.color, background: currentColors.bg } : {}),
+        }"
+        @click="selectTab(idx)"
+      >
+        {{ tab }}
+      </button>
+      <span
+        class="rm-tabs__indicator"
+        :style="{ ...indicatorStyle, backgroundColor: currentColors.color }"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rm-tabs{background-color:var(--r-color-white);border-bottom:1px solid var(--r-color-gray-200)}.rm-tabs__list{display:flex;padding:8px 20px 0;position:relative}.rm-tabs__tab{background:none;border:none;border-radius:4px 4px 0 0;color:var(--r-color-gray-500);cursor:pointer;font-family:var(--r-font-family);font-size:14px;font-weight:400;padding:12px 16px;position:relative;transition:color var(--r-transition-fast),background var(--r-transition-fast);white-space:nowrap}.rm-tabs__tab:hover{background:var(--tab-active-bg);color:var(--r-color-gray-700)}.rm-tabs__tab--active{font-weight:500}.rm-tabs__indicator{border-radius:2px 2px 0 0;bottom:0;height:2px;left:0;position:absolute;transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1)}
+</style>

package/dist/runtime/components/ToolbarFilter.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { PhCaretDown, PhCheck } from '@phosphor-icons/vue'
+import type { Component } from 'vue'
+
+export interface FilterOption {
+  label: string
+  value: string
+}
+
+const props = withDefaults(defineProps<{
+  icon?: Component
+  label: string
+  prefix?: string
+  options: FilterOption[]
+  variant?: 'default' | 'primary' | 'secondary' | 'pharma' | 'discovery' | 'databank'
+  multiple?: boolean
+}>(), {
+  icon: undefined,
+  prefix: undefined,
+  variant: 'default',
+  multiple: true,
+})
+
+const selected = defineModel<string[]>({ default: () => [] })
+
+const isOpen = ref(false)
+const filterRef = ref<HTMLElement>()
+const hasUserChanged = ref(false)
+
+// Initialise avec la première option par défaut (synchrone pour éviter hydration mismatch)
+if (selected.value.length === 0 && props.options.length > 0) {
+  selected.value = [props.options[0]!.value]
+}
+
+const isActive = computed(() => hasUserChanged.value && selected.value.length > 0)
+
+const pillLabel = computed(() => {
+  if (props.prefix) {
+    if (selected.value.length === 0) return `${props.prefix} ${props.label}`
+    const option = props.options.find(o => o.value === selected.value[0])
+    return `${props.prefix} ${option ? option.label : props.label}`
+  }
+  if (selected.value.length === 0) return props.label
+  if (selected.value.length === 1) {
+    const option = props.options.find(o => o.value === selected.value[0])
+    return option ? option.label : props.label
+  }
+  return `${props.label} (${selected.value.length})`
+})
+
+const pillVariant = computed(() => {
+  if (props.prefix) return props.variant
+  if (isActive.value) return props.variant === 'default' ? 'primary' : props.variant
+  return 'default'
+})
+
+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 (filterRef.value && !filterRef.value.contains(e.target as Node)) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => document.addEventListener('click', onClickOutside))
+onUnmounted(() => document.removeEventListener('click', onClickOutside))
+</script>
+
+<template>
+  <div ref="filterRef" class="toolbar-filter">
+    <RmPill
+      :icon="icon"
+      :label="pillLabel"
+      :active="isActive && variant === 'default'"
+      :variant="pillVariant"
+      @click="toggle"
+    >
+      <template #default>
+        <PhCaretDown
+          :size="12"
+          class="toolbar-filter__caret"
+          :class="{ 'toolbar-filter__caret--open': isOpen }"
+        />
+      </template>
+    </RmPill>
+
+    <Transition name="dropdown">
+      <div v-if="isOpen" class="toolbar-filter__dropdown">
+        <button
+          v-for="option in options"
+          :key="option.value"
+          class="toolbar-filter__option"
+          :class="{ 'toolbar-filter__option--selected': isSelected(option.value) }"
+          @click="toggleOption(option.value)"
+        >
+          <span
+            :class="[
+              multiple ? 'toolbar-filter__checkbox' : 'toolbar-filter__radio',
+              isSelected(option.value) && (multiple ? 'toolbar-filter__checkbox--checked' : 'toolbar-filter__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>
+.toolbar-filter{position:relative}.toolbar-filter__caret{opacity:.6;transition:transform var(--r-transition-fast)}.toolbar-filter__caret--open{transform:rotate(180deg)}.toolbar-filter__dropdown{background-color:var(--r-color-white);border:1px solid var(--r-color-gray-200);border-radius:var(--r-radius-lg);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:var(--r-space-1);position:absolute;top:calc(100% + var(--r-space-2));z-index:50}.toolbar-filter__option{align-items:center;background:none;border:none;border-radius:var(--r-radius-md);color:var(--r-color-gray-700);cursor:pointer;display:flex;font-family:inherit;font-size:var(--r-text-sm);gap:var(--r-space-2);padding:var(--r-space-2) var(--r-space-3);text-align:left;transition:background-color var(--r-transition-fast);width:100%}.toolbar-filter__option:hover{background-color:var(--r-color-gray-50)}.toolbar-filter__option--selected{color:var(--r-color-gray-900);font-weight:var(--r-font-weight-medium)}.toolbar-filter__checkbox{align-items:center;border:1.5px solid var(--r-color-gray-300);border-radius:var(--r-radius-sm);display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--r-transition-fast);width:16px}.toolbar-filter__checkbox--checked{background-color:var(--r-color-primary-600);border-color:var(--r-color-primary-600);color:var(--r-color-white)}.toolbar-filter__radio{align-items:center;border:1.5px solid var(--r-color-gray-300);border-radius:var(--r-radius-full);display:flex;flex-shrink:0;height:16px;justify-content:center;transition:all var(--r-transition-fast);width:16px}.toolbar-filter__radio--checked{border-color:var(--r-color-primary-600)}.toolbar-filter__radio--checked:after{background-color:var(--r-color-primary-600);border-radius:var(--r-radius-full);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/utils/format.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Formatage OIP - locale francaise. Regles reprises du skill
+ * `tekkare-dashboard-design` (`utils/oip-format.ts`), qui fait foi.
+ *
+ * Regle dates : le mois est TOUJOURS en toutes lettres. Ce n'est pas une
+ * regle esthetique mais une regle de securite de lecture : `05/09/2025` se
+ * lit « 5 septembre » en France et « 9 mai » au format US. Interdits
+ * partout, y compris dans une cellule de tableau : tout en chiffres, ISO,
+ * mois abrege anglais.
+ *
+ * Regle nombres : virgule decimale, espace avant le %, separateur de
+ * milliers insecable via `toLocaleString('fr-FR')`.
+ */
+/** "17 juin 2026" - prose, foot « Verifie le », tableaux, partout. */
+export declare const rmDate: (d: Date | string | number) => string;
+/** "juin 2026" - quand le jour est inconnu. */
+export declare const rmMonth: (d: Date | string | number) => string;
+/** "1 234" - separateur de milliers francais. */
+export declare const rmNumber: (n: number) => string;
+/** "2 043 €" */
+export declare const rmPrice: (n: number) => string;
+/** "9,2 Md€" · "43 M€" · "12 k" - grands nombres abreges. */
+export declare const rmBig: (n: number) => string;
+/** "+18,2 %" / "-3,1 %" - signe explicite, virgule, espace avant le %. */
+export declare const rmPct: (n: number, digits?: number) => string;
+/** "8,7" - decimale francaise sans unite (ratios : HR, OR, taux). */
+export declare const rmDecimal: (n: number, digits?: number) => string;

package/dist/runtime/utils/format.js

@@ -0,0 +1,7 @@
+export const rmDate = (d) => new Date(d).toLocaleDateString("fr-FR", { day: "numeric", month: "long", year: "numeric" });
+export const rmMonth = (d) => new Date(d).toLocaleDateString("fr-FR", { month: "long", year: "numeric" });
+export const rmNumber = (n) => n.toLocaleString("fr-FR");
+export const rmPrice = (n) => n.toLocaleString("fr-FR") + " \u20AC";
+export const rmBig = (n) => n >= 1e9 ? (n / 1e9).toFixed(1).replace(".", ",") + " Md\u20AC" : n >= 1e6 ? (n / 1e6).toFixed(0) + " M\u20AC" : n >= 1e3 ? (n / 1e3).toFixed(0) + " k" : String(n);
+export const rmPct = (n, digits = 1) => (n > 0 ? "+" : "") + n.toFixed(digits).replace(".", ",") + " %";
+export const rmDecimal = (n, digits = 1) => n.toFixed(digits).replace(".", ",");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/romulus",
-  "version": "0.1.0",
+  "version": "0.1.7",
   "description": "Romulus Design System - Nuxt module by Tekkare",
   "license": "MIT",
   "type": "module",
@@ -23,10 +23,11 @@
   "scripts": {
     "build": "nuxt-module-build build",
     "dev": "nuxi dev playground",
-"typecheck": "nuxi typecheck"
+    "typecheck": "nuxi typecheck"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.16.0"
+    "@nuxt/kit": "^3.16.0",
+    "@phosphor-icons/vue": "^2.2.1"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.8.4",