silex_ui 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 84ca6a3d2f412fa7ff808b0d7a0513e87257123a852e26dbd098795085b76ff3
+  data.tar.gz: e237663991a4a318eb7190b48c9b84c11eedbd69e18f027abf491bd1ee71fa87
+SHA512:
+  metadata.gz: ba83d0d1d6ae11d0ca91c0e6009a5c2970dd90c513714d4bae1c8cf22b363f7789df8c5fae2771d7029856a017dcef72bcde92a93d8be2ae3fcd202226f3ae53
+  data.tar.gz: e37f9d24f41677ba8d0d06db94624e32a759b1478845915af2d92aa7abbb2bbd34ded84507b71b4fb5f0351261bf13fe86fa9544588b05cfc0b7146c5f1df8fa

data/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Changelog
+
+Toutes les évolutions notables de silex_ui. Le format suit
+[Keep a Changelog](https://keepachangelog.com/fr/1.1.0/) et le versionnage
+[SemVer](https://semver.org/lang/fr/).
+
+## [Non publié]
+
+## [0.1.0] — 2026-09-10
+
+Première version.
+
+### Ajouté
+
+- Design tokens Tailwind v4 : familles `sand`, `ink`, `alert`, `warn`, `ok`, `info`.
+- 16 ViewComponents : navigation, en-tête de page, section, carte, compteurs,
+  répartition, tableau, pagination, badge, alerte, flash, état vide, champ de
+  formulaire, bouton, bouton de copie, modale.
+- Contrôleurs Stimulus `silex-ui--clipboard` et `silex-ui--modal`.
+- Générateur `silex_ui:install` et tâche `silex_ui:sync`, branchée sur
+  `tailwindcss:build`.

data/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Théo Galais — Le Silex
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,157 @@
+# silex_ui
+
+Design system partagé des applications Le Silex : **design tokens Tailwind v4**,
+**ViewComponents** et **contrôleurs Stimulus**, dans un moteur Rails.
+
+Une seule source de vérité pour la palette, la typographie et les composants —
+au lieu d'un dossier de partials recopié d'une application à l'autre.
+
+## Prérequis
+
+- Rails ≥ 7.1
+- Tailwind CSS **v4** (`tailwindcss-rails` ≥ 4.0)
+- ViewComponent ≥ 3.0
+
+## Installation
+
+```ruby
+# Gemfile
+gem "silex_ui"
+```
+
+```bash
+bundle install
+bin/rails generate silex_ui:install
+```
+
+Le générateur :
+
+1. copie les tokens dans `app/assets/tailwind/silex_ui/theme.css` ;
+2. copie une image plate des sources du gem dans `app/assets/tailwind/silex_ui/sources.html` ;
+3. déclare les deux fichiers dans `app/assets/tailwind/application.css`.
+
+```css
+@import "tailwindcss";
+
+@import "./silex_ui/theme.css";
+@source "./silex_ui/sources.html";
+```
+
+Les deux fichiers sont **versionnés avec l'application**. C'est délibéré : le
+chemin d'installation d'un gem change entre le poste de dev, la CI et le
+conteneur, alors qu'un `@source` doit pointer sur quelque chose de stable.
+
+Après chaque montée de version du gem :
+
+```bash
+bin/rails silex_ui:sync
+```
+
+La tâche est branchée sur `tailwindcss:build`, donc un build de CSS repart
+toujours de sources à jour.
+
+### Contrôleurs Stimulus
+
+```js
+// app/javascript/controllers/index.js
+import { registerSilexUiControllers } from "silex_ui"
+registerSilexUiControllers(application)
+```
+
+Ils sont enregistrés sous le préfixe `silex-ui--`, hors de portée des
+contrôleurs de l'application.
+
+## Tokens
+
+| Famille | Rôle | Nuances |
+|---|---|---|
+| `sand` | le sol : fond de page, bordures | 50 · 100 · 200 · 300 |
+| `ink` | le texte, du plus discret au plus plein | 300 · 400 · 600 · 900 |
+| `alert` | ce qui a lapsé, ce qui est cassé | 50 · 100 · 300 · 700 |
+| `warn` | ce qui est sur le point de basculer | 50 · 100 · 300 · 700 |
+| `ok` | ce qui est en règle | 50 · 100 · 300 · 700 |
+| `info` | neutre, factuel, sans urgence | 50 · 100 · 300 · 700 |
+
+Les tons sont **sémantiques** : on écrit `tone: :alert`, jamais `tone: :red`.
+Le jour où l'alerte devient violette, une seule ligne bouge.
+
+## Composants
+
+| Composant | Ce qu'il fait |
+|---|---|
+| `NavComponent` | barre de navigation : marque, sections, zone utilisateur |
+| `PageHeaderComponent` | titre de page, sous-titre, actions — alimente aussi `content_for :title` |
+| `SectionComponent` | bloc précédé d'un titre en petites capitales |
+| `CardComponent` | surface surélevée, avec en-tête et pied optionnels |
+| `StatGridComponent` / `StatCardComponent` | rangée de compteurs, avec lien, ton, évolution |
+| `BreakdownComponent` | répartition libellé / compte, chaque ligne cliquable |
+| `TableComponent` | tableau à colonnes déclarées, tri, état vide |
+| `PaginationComponent` | navigation de pages, l'URL restant à la charge de l'appelant |
+| `BadgeComponent` | pastille de statut |
+| `AlertComponent` | bandeau d'information persistant |
+| `FlashComponent` | messages flash de Rails traduits en tons |
+| `EmptyStateComponent` | ce qu'on voit quand il n'y a rien à voir |
+| `FieldComponent` | champ de formulaire : libellé, champ, aide, erreurs |
+| `ButtonComponent` | bouton ou lien, quatre variantes |
+| `CopyButtonComponent` | copie dans le presse-papiers, avec confirmation |
+| `ModalComponent` | fenêtre modale sur `<dialog>` |
+
+Tous acceptent `class:` : les classes de l'appelant sont ajoutées après celles
+du composant, donc elles gagnent à spécificité égale.
+
+## Exemples
+
+```erb
+<%= render SilexUi::NavComponent.new(brand: "Network", brand_href: root_path) do |nav| %>
+  <% nav.with_item(label: "Sites", href: websites_path, active: controller_name == "websites") %>
+  <% nav.with_aside do %><%= current_user.display_name %><% end %>
+<% end %>
+
+<%= render SilexUi::PageHeaderComponent.new(title: "Sites", subtitle: "1 240 domaines") do |header| %>
+  <% header.with_actions do %>
+    <%= render SilexUi::ButtonComponent.new(label: "Ajouter un domaine", href: new_website_path) %>
+  <% end %>
+<% end %>
+
+<%= render SilexUi::StatGridComponent.new do |grid| %>
+  <% grid.with_stat(value: @total, label: "Domaines", href: websites_path) %>
+  <% grid.with_stat(value: @expired, label: "Expirés", tone: :alert, href: websites_path(filter: "expire")) %>
+<% end %>
+
+<%= render SilexUi::TableComponent.new(rows: @websites) do |table| %>
+  <% table.with_column(header: "Domaine") { |site| site.domain } %>
+  <% table.with_column(header: "Registrar") { |site| site.registrar.titleize } %>
+  <% table.with_column(header: "", align: :right) do |site| %>
+    <%= render SilexUi::ButtonComponent.new(label: "Éditer", href: edit_website_path(site), variant: :ghost, size: :sm) %>
+  <% end %>
+<% end %>
+```
+
+## Développement
+
+```bash
+bundle install
+bundle exec rspec
+```
+
+Pour travailler sur le gem depuis une application, pointer le `Gemfile` de
+celle-ci sur la copie locale :
+
+```ruby
+gem "silex_ui", path: "../silex_ui"
+```
+
+## Publication
+
+```bash
+# 1. faire monter SilexUi::VERSION et compléter le CHANGELOG
+# 2. puis :
+bundle exec rake release
+```
+
+`rake release` pose le tag git, pousse la branche et envoie le `.gem` sur
+rubygems.org. La MFA est exigée sur ce gem.
+
+## Licence
+
+MIT — voir `LICENSE.txt`.

data/app/assets/javascripts/silex_ui/controllers/clipboard_controller.js

@@ -0,0 +1,42 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Copie une valeur dans le presse-papiers et le dit — un bouton qui ne confirme
+// rien laisse l'utilisateur cliquer trois fois.
+export default class extends Controller {
+  static values = {
+    value: String,
+    label: { type: String, default: "Copier" },
+    copiedLabel: { type: String, default: "Copié" },
+    resetAfter: { type: Number, default: 1500 }
+  }
+
+  async copy(event) {
+    event.preventDefault()
+
+    try {
+      await navigator.clipboard.writeText(this.valueValue)
+      this.#confirm()
+    } catch {
+      // Presse-papiers refusé (contexte non sécurisé, permission) : on laisse la
+      // valeur sélectionnable plutôt que de mentir sur le succès.
+      this.element.textContent = "Échec"
+      this.#restoreLater()
+    }
+  }
+
+  #confirm() {
+    this.element.textContent = this.copiedLabelValue
+    this.#restoreLater()
+  }
+
+  #restoreLater() {
+    clearTimeout(this.timeout)
+    this.timeout = setTimeout(() => {
+      this.element.textContent = this.labelValue
+    }, this.resetAfterValue)
+  }
+
+  disconnect() {
+    clearTimeout(this.timeout)
+  }
+}

data/app/assets/javascripts/silex_ui/controllers/modal_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Ouverture et fermeture d'un <dialog>. Le focus, la touche Échap et l'inertie
+// du fond sont l'affaire du navigateur ; on ne réimplémente rien de tout ça.
+export default class extends Controller {
+  static targets = ["dialog"]
+
+  open(event) {
+    event?.preventDefault()
+    this.dialogTarget.showModal()
+  }
+
+  close(event) {
+    event?.preventDefault()
+    this.dialogTarget.close()
+  }
+
+  // Un clic hors du panneau ferme : dans un <dialog>, ce clic atteint le dialog
+  // lui-même, jamais son contenu.
+  closeOnBackdrop(event) {
+    if (event.target === this.dialogTarget) this.dialogTarget.close()
+  }
+}

data/app/assets/javascripts/silex_ui/index.js

@@ -0,0 +1,11 @@
+import ClipboardController from "silex_ui/controllers/clipboard_controller"
+import ModalController from "silex_ui/controllers/modal_controller"
+
+// Enregistre les contrôleurs du design system sous le préfixe `silex-ui--`,
+// pour qu'ils ne puissent jamais entrer en collision avec ceux de l'application.
+export function registerSilexUiControllers(application) {
+  application.register("silex-ui--clipboard", ClipboardController)
+  application.register("silex-ui--modal", ModalController)
+}
+
+export { ClipboardController, ModalController }

data/app/assets/stylesheets/silex_ui/theme.css

@@ -0,0 +1,59 @@
+/* Silex UI — design tokens.
+ *
+ * Une seule source de vérité pour la palette, la typographie et les rayons des
+ * applications Le Silex. Les noms suivent la convention Tailwind v4 : déclarer
+ * `--color-ink-900` suffit à rendre `text-ink-900`, `bg-ink-900`, `border-ink-900`
+ * disponibles dans l'application comme dans les composants du gem.
+ *
+ * Le ton : un fond sable chaud, une encre presque noire, et des accents qui se
+ * posent sur le sable au lieu de crier par-dessus. */
+
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+
+  /* Sable — le sol. Du plus clair (fond de page) au plus soutenu (bordures). */
+  --color-sand-50: #faf8f4;
+  --color-sand-100: #f4f0e8;
+  --color-sand-200: #e8e1d4;
+  --color-sand-300: #d6ccb9;
+
+  /* Encre — jamais un noir pur, du texte discret au texte plein. */
+  --color-ink-300: #bdb9b3;
+  --color-ink-400: #9a9691;
+  --color-ink-600: #6b6763;
+  --color-ink-900: #1c1a17;
+
+  /* Alerte — terracotta : ce qui a lapsé, ce qui est cassé. */
+  --color-alert-50: #fbf1ee;
+  --color-alert-100: #f2dcd5;
+  --color-alert-300: #d99e8c;
+  --color-alert-700: #9c3b26;
+
+  /* Attention — ocre : ce qui est sur le point de basculer. */
+  --color-warn-50: #fbf5e8;
+  --color-warn-100: #f0e5c8;
+  --color-warn-300: #d8bd7c;
+  --color-warn-700: #8a6318;
+
+  /* Validation — sauge : ce qui est en règle. */
+  --color-ok-50: #f1f5ef;
+  --color-ok-100: #dfe8da;
+  --color-ok-300: #a8bf9c;
+  --color-ok-700: #4a6b3d;
+
+  /* Information — bleu ardoise : neutre, factuel, sans urgence. */
+  --color-info-50: #eff2f6;
+  --color-info-100: #dde4ee;
+  --color-info-300: #9db0cc;
+  --color-info-700: #3c5578;
+}
+
+/* Rendu par défaut du document. L'application peut l'écraser, mais partir de là
+ * évite que chaque app redécouvre son fond et son antialiasing. */
+@layer base {
+  body {
+    background-color: var(--color-sand-50);
+    color: var(--color-ink-900);
+    -webkit-font-smoothing: antialiased;
+  }
+}

data/app/components/silex_ui/alert_component.html.erb

@@ -0,0 +1,11 @@
+<div class="<%= css_classes %>" role="status">
+  <% if title.present? %>
+    <p class="text-xs font-light tracking-widest uppercase"><%= title %></p>
+  <% end %>
+
+  <% if text.present? %>
+    <p class="<%= "mt-1" if title.present? %>"><%= text %></p>
+  <% end %>
+
+  <%= content %>
+</div>

data/app/components/silex_ui/alert_component.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Bandeau d'information persistant — l'AlertBannerComponent du Silex : un ton,
+  # un titre, un texte.
+  #
+  #   <%= render SilexUi::AlertComponent.new(tone: :warn, title: "Synchronisation en retard",
+  #         text: "Les registrars n'ont pas répondu depuis 3 jours.") %>
+  class AlertComponent < BaseComponent
+    TONE_CLASSES = {
+      neutral: "border-sand-300 bg-white text-ink-900",
+      ok: "border-ok-300 bg-ok-50 text-ok-700",
+      warn: "border-warn-300 bg-warn-50 text-warn-700",
+      alert: "border-alert-300 bg-alert-50 text-alert-700",
+      info: "border-info-300 bg-info-50 text-info-700"
+    }.freeze
+
+    def initialize(title: nil, text: nil, tone: :info, **options)
+      @title = title
+      @text = text
+      @tone = tone_of(tone)
+      super(**options)
+    end
+
+    attr_reader :title, :text
+
+    def css_classes
+      merge_class("rounded-sm border px-4 py-3 text-sm font-light", TONE_CLASSES[@tone])
+    end
+  end
+end

data/app/components/silex_ui/badge_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Pastille de statut. Reprend l'API du BadgeComponent du Silex — un libellé, un
+  # ton, un lien et une infobulle facultatifs — en tons sémantiques.
+  #
+  #   SilexUi::BadgeComponent.new(label: "expiré depuis 3 j", tone: :alert)
+  class BadgeComponent < BaseComponent
+    TONE_CLASSES = {
+      neutral: "border-sand-300 bg-white text-ink-600",
+      ok: "border-ok-300 bg-ok-50 text-ok-700",
+      warn: "border-warn-300 bg-warn-50 text-warn-700",
+      alert: "border-alert-300 bg-alert-50 text-alert-700",
+      info: "border-info-300 bg-info-50 text-info-700"
+    }.freeze
+
+    def initialize(label: nil, tone: :neutral, href: nil, title: nil, **options)
+      @label = label
+      @tone = tone_of(tone)
+      @href = href
+      @title = title.presence
+      super(**options)
+    end
+
+    def call
+      text = @label || content
+      attributes = html_attributes.merge(class: css_classes, title: @title)
+
+      @href.present? ? link_to(text, @href, **attributes) : tag.span(text, **attributes)
+    end
+
+    private
+
+    def css_classes
+      merge_class(
+        "inline-block rounded-sm border px-2 py-0.5 text-xs font-light whitespace-nowrap",
+        ("transition hover:border-ink-900 hover:text-ink-900" if @href.present?),
+        TONE_CLASSES[@tone]
+      )
+    end
+  end
+end

data/app/components/silex_ui/base_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Socle commun : la palette de tons et la fusion de classes.
+  #
+  # Chaque composant accepte `class:` pour ajuster son rendu sans le forker —
+  # les classes de l'appelant sont ajoutées après celles du composant, donc
+  # elles gagnent à spécificité égale.
+  class BaseComponent < ViewComponent::Base
+    # Les tons sont sémantiques, jamais chromatiques : on écrit `tone: :alert`,
+    # pas `tone: :red`. Le jour où l'alerte devient violette, une seule ligne bouge.
+    TONES = %i[neutral ok warn alert info].freeze
+
+    def initialize(class: nil, **html_attributes)
+      @extra_class = binding.local_variable_get(:class)
+      @html_attributes = html_attributes
+    end
+
+    private
+
+    attr_reader :extra_class, :html_attributes
+
+    def tone_of(value)
+      TONES.include?(value&.to_sym) ? value.to_sym : :neutral
+    end
+
+    # `class_names` (alias de `token_list`) élimine les nil et les doublons.
+    def merge_class(*base)
+      class_names(*base, extra_class)
+    end
+  end
+end

data/app/components/silex_ui/breakdown_component.html.erb

@@ -0,0 +1,17 @@
+<% if any? %>
+  <%= render SilexUi::SectionComponent.new(title: title) do %>
+    <ul class="<%= css_classes %>">
+      <% items.each do |item| %>
+        <li class="flex justify-between gap-4 border-b border-sand-100 pb-2">
+          <% if item[:href].present? %>
+            <%= link_to item[:label], item[:href], class: "truncate text-ink-600 transition hover:text-ink-900" %>
+          <% else %>
+            <span class="truncate text-ink-600"><%= item[:label] %></span>
+          <% end %>
+
+          <span class="shrink-0 text-ink-400"><%= item[:count] %></span>
+        </li>
+      <% end %>
+    </ul>
+  <% end %>
+<% end %>

data/app/components/silex_ui/breakdown_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Répartition : une liste libellé / compte, chaque ligne cliquable vers la
+  # liste filtrée correspondante. Le motif se répète sur tous les tableaux de
+  # bord du Silex (par hébergeur, par registrar, par tag).
+  #
+  #   <%= render SilexUi::BreakdownComponent.new(title: "Par registrar",
+  #         items: @by_registrar.map { |name, count| { label: name.titleize, count:, href: websites_path(registrar: name) } }) %>
+  class BreakdownComponent < BaseComponent
+    def initialize(items:, title: nil, **options)
+      @items = items
+      @title = title
+      super(**options)
+    end
+
+    attr_reader :items, :title
+
+    def any?
+      items.any?
+    end
+
+    def css_classes
+      merge_class("space-y-2 text-sm font-light")
+    end
+  end
+end

data/app/components/silex_ui/button_component.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Bouton ou lien : même costume, trois usages.
+  #
+  #   SilexUi::ButtonComponent.new(label: "Ajouter", href: new_website_path)
+  #   SilexUi::ButtonComponent.new(label: "Supprimer", href: website_path(w), method: :delete, variant: :danger)
+  #   SilexUi::ButtonComponent.new(label: "Appliquer", type: :submit)
+  #
+  # `method:` bascule sur `button_to` (formulaire + jeton CSRF) ; sans `href`,
+  # on rend un `<button>`.
+  class ButtonComponent < BaseComponent
+    VARIANTS = {
+      primary: "bg-ink-900 text-sand-50 hover:bg-ink-600",
+      secondary: "border border-sand-300 bg-white text-ink-900 hover:border-ink-900",
+      ghost: "text-ink-400 hover:text-ink-900",
+      danger: "border border-alert-300 bg-alert-50 text-alert-700 hover:border-alert-700"
+    }.freeze
+
+    SIZES = {
+      sm: "px-3 py-1 text-xs",
+      md: "px-4 py-2 text-xs",
+      lg: "px-6 py-3 text-sm"
+    }.freeze
+
+    def initialize(label: nil, href: nil, variant: :primary, size: :md, method: nil, type: :button, **options)
+      @label = label
+      @href = href
+      @variant = VARIANTS.key?(variant.to_sym) ? variant.to_sym : :primary
+      @size = SIZES.key?(size.to_sym) ? size.to_sym : :md
+      @method = method
+      @type = type
+      super(**options)
+    end
+
+    def call
+      if @method.present? && @href.present?
+        button_to(text, @href, **attributes.merge(method: @method))
+      elsif @href.present?
+        link_to(text, @href, **attributes)
+      else
+        button_tag(text, **attributes.merge(type: @type))
+      end
+    end
+
+    private
+
+    def text
+      @label || content
+    end
+
+    def attributes
+      html_attributes.merge(class: css_classes)
+    end
+
+    def css_classes
+      merge_class(
+        "inline-block cursor-pointer rounded-sm font-light uppercase tracking-widest transition",
+        SIZES[@size],
+        VARIANTS[@variant]
+      )
+    end
+  end
+end

data/app/components/silex_ui/card_component.html.erb

@@ -0,0 +1,22 @@
+<% body = capture do %>
+  <% if title.present? || header? %>
+    <div class="mb-3 flex items-baseline justify-between gap-4">
+      <% if title.present? %>
+        <h3 class="text-xs font-light tracking-widest text-ink-400 uppercase"><%= title %></h3>
+      <% end %>
+      <%= header %>
+    </div>
+  <% end %>
+
+  <div class="text-sm font-light text-ink-600"><%= content %></div>
+
+  <% if footer? %>
+    <div class="mt-4 border-t border-sand-100 pt-3 text-xs font-light text-ink-400"><%= footer %></div>
+  <% end %>
+<% end %>
+
+<% if href.present? %>
+  <%= link_to href, class: css_classes do %><%= body %><% end %>
+<% else %>
+  <div class="<%= css_classes %>"><%= body %></div>
+<% end %>

data/app/components/silex_ui/card_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Surface surélevée : un encadré blanc sur le sable. Sert de conteneur à tout
+  # ce qui doit se détacher du flux — panneau de synchronisation, fiche, aperçu.
+  class CardComponent < BaseComponent
+    renders_one :header
+    renders_one :footer
+
+    def initialize(title: nil, href: nil, **options)
+      @title = title
+      @href = href
+      super(**options)
+    end
+
+    attr_reader :title, :href
+
+    def css_classes
+      merge_class(
+        "block rounded-sm border border-sand-200 bg-white p-5",
+        ("transition hover:border-ink-900" if href.present?)
+      )
+    end
+  end
+end

data/app/components/silex_ui/copy_button_component.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Copier une valeur sans la sélectionner à la souris. Visuellement un badge,
+  # comme le CopyButtonComponent du Silex, mais branché sur le contrôleur
+  # Stimulus fourni par le gem.
+  #
+  #   <%= render SilexUi::CopyButtonComponent.new(value: website.domain) %>
+  class CopyButtonComponent < BaseComponent
+    def initialize(value:, label: "Copier", copied_label: "Copié", tone: :neutral, **options)
+      @value = value.to_s
+      @label = label
+      @copied_label = copied_label
+      @tone = tone_of(tone)
+      super(**options)
+    end
+
+    def call
+      button_tag(@label, type: "button", class: css_classes, **stimulus_attributes)
+    end
+
+    private
+
+    def css_classes
+      merge_class(
+        "inline-block cursor-pointer rounded-sm border px-2 py-0.5 text-xs font-light whitespace-nowrap",
+        "transition hover:border-ink-900 hover:text-ink-900",
+        SilexUi::BadgeComponent::TONE_CLASSES[@tone]
+      )
+    end
+
+    def stimulus_attributes
+      html_attributes.deep_merge(
+        data: {
+          controller: "silex-ui--clipboard",
+          action: "silex-ui--clipboard#copy",
+          silex_ui__clipboard_value_value: @value,
+          silex_ui__clipboard_label_value: @label,
+          silex_ui__clipboard_copied_label_value: @copied_label
+        }
+      )
+    end
+  end
+end