@tekkare/romulus 0.1.0 → 0.1.5

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/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>