silkui 1.0.0__py3-none-any.whl

silkui/__init__.py

@@ -0,0 +1 @@
+__version__ = "1.0.0"

silkui/apps.py

@@ -0,0 +1,7 @@
+from django.apps import AppConfig
+
+
+class SilkuiConfig(AppConfig):
+    name = "silkui"
+    verbose_name = "SilkUI"
+    default_auto_field = "django.db.models.BigAutoField"

silkui/cli.py

@@ -0,0 +1,18 @@
+import click
+from silkui.commands.init import init
+from silkui.commands.add import add
+from silkui.commands.list import list_components
+
+
+@click.group()
+@click.version_option(package_name="silkui")
+def main():
+    """SilkUI — UI components for Django, inspired by shadcn/ui.
+
+    Components are copied into your project. You own the code.
+    """
+
+
+main.add_command(init)
+main.add_command(add)
+main.add_command(list_components, name="list")

silkui/commands/add.py

@@ -0,0 +1,91 @@
+import json
+from pathlib import Path
+
+import click
+from rich.console import Console
+
+console = Console()
+
+
+def _load_config() -> dict:
+    config_path = Path("silkui.json")
+    if not config_path.exists():
+        console.print("[red]silkui.json not found. Run [bold]silkui init[/bold] first.[/red]")
+        raise SystemExit(1)
+    return json.loads(config_path.read_text())
+
+
+@click.command()
+@click.argument("components", nargs=-1)
+@click.option("--all", "all_components", is_flag=True, help="Install all available components")
+@click.option("--overwrite", is_flag=True, help="Overwrite existing files")
+def add(components, all_components, overwrite):
+    """Add one or more components to your project.
+
+    Examples:
+
+      silkui add button
+
+      silkui add button card input
+
+      silkui add --all
+    """
+    from silkui.registry import get_registry, get_component_files
+
+    registry = get_registry()
+
+    if all_components:
+        components = tuple(registry.keys())
+
+    if not components:
+        console.print("[yellow]No component specified. Use --all to install everything.[/yellow]")
+        console.print("Run [bold]silkui list[/bold] to see available components.")
+        return
+
+    config = _load_config()
+    components_dir = Path(config["components_dir"])
+    js_dir = Path(config["js_dir"])
+
+    for name in components:
+        name = name.lower()
+        if name not in registry:
+            console.print(f"[red]✗[/red] Component [bold]{name}[/bold] not found.")
+            console.print("  Run [bold]silkui list[/bold] to see available components.")
+            continue
+
+        meta = registry[name]
+        files = get_component_files(name)
+        installed_count = 0
+
+        for filename, content in files.items():
+            dest = js_dir / filename if filename.endswith(".js") else components_dir / filename
+
+            if dest.exists() and not overwrite:
+                console.print(f"  [yellow]~[/yellow] {dest} already exists (use --overwrite to replace)")
+                continue
+
+            dest.write_text(content)
+            console.print(f"  [green]✓[/green] {dest}")
+            installed_count += 1
+
+        if installed_count > 0:
+            console.print(f"[green]Added[/green] [bold]{name}[/bold]")
+
+            if meta.get("alpine"):
+                console.print(
+                    f"  [dim]Requires Alpine.js — "
+                    "add [cyan]<script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js\"></script>[/cyan] "
+                    "to your base template[/dim]"
+                )
+
+            if meta.get("dependencies"):
+                console.print(f"  [dim]Also needed: {', '.join(meta['dependencies'])}[/dim]")
+
+            _print_usage(name, meta)
+
+
+def _print_usage(name: str, meta: dict) -> None:
+    usage = meta.get("usage")
+    if usage:
+        console.print(f"\n  [dim]Usage:[/dim]")
+        console.print(f"  [cyan]{usage}[/cyan]\n")

silkui/commands/init.py

@@ -0,0 +1,167 @@
+import json
+from pathlib import Path
+
+import click
+from rich.console import Console
+from rich.panel import Panel
+
+console = Console()
+
+DEFAULT_CONFIG = {
+    "version": "1.0.0",
+    "templates_dir": "templates",
+    "components_dir": "templates/components",
+    "static_dir": "static",
+    "js_dir": "static/js/silkui",
+    "css_dir": "static/css",
+}
+
+# Lines we ensure exist in .prettierignore
+PRETTIER_IGNORE_ENTRIES = [
+    "# Django templates — formatters like Prettier break template tags on multiline",
+    "{templates_dir}/",
+]
+
+
+def _setup_prettier_ignore(templates_dir: str) -> None:
+    """
+    Add the templates directory to .prettierignore so HTML formatters
+    don't break Django template tags when indenting across multiple lines.
+    """
+    ignore_path = Path(".prettierignore")
+    entry = f"{templates_dir}/"
+
+    existing = ignore_path.read_text() if ignore_path.exists() else ""
+
+    if entry in existing:
+        return
+
+    lines_to_add = []
+    comment = "# Django templates — formatters break {% %} tags across multiple lines"
+    if comment not in existing:
+        lines_to_add.append(comment)
+    lines_to_add.append(entry)
+
+    separator = "\n" if existing and not existing.endswith("\n") else ""
+    new_content = existing + separator + "\n".join(lines_to_add) + "\n"
+
+    ignore_path.write_text(new_content)
+    console.print(f"[green]✓[/green] Added [bold]{entry}[/bold] to .prettierignore")
+
+
+def _setup_djlint() -> None:
+    djlint_path = Path(".djlintrc")
+    if djlint_path.exists():
+        return
+    config = {"profile": "django", "indent": 2, "max_line_length": 120}
+    djlint_path.write_text(json.dumps(config, indent=2))
+    console.print("[green]✓[/green] Created [bold].djlintrc[/bold]")
+
+
+def _setup_vscode() -> None:
+    vscode_dir = Path(".vscode")
+    vscode_dir.mkdir(exist_ok=True)
+
+    settings_path = vscode_dir / "settings.json"
+    if not settings_path.exists():
+        settings = {
+            "[html]": {
+                "editor.defaultFormatter": "monosans.djlint",
+                "editor.formatOnSave": True,
+            },
+            "files.associations": {"*.html": "django-html"},
+            "prettier.ignorePath": ".prettierignore",
+        }
+        settings_path.write_text(json.dumps(settings, indent=2))
+        console.print("[green]✓[/green] Created [bold].vscode/settings.json[/bold]")
+
+    extensions_path = vscode_dir / "extensions.json"
+    if not extensions_path.exists():
+        extensions = {"recommendations": ["monosans.djlint"]}
+        extensions_path.write_text(json.dumps(extensions, indent=2))
+        console.print("[green]✓[/green] Created [bold].vscode/extensions.json[/bold] (VS Code will prompt to install djlint)")
+
+
+@click.command()
+@click.option("--templates-dir", default="templates", show_default=True, help="Templates directory")
+@click.option("--static-dir", default="static", show_default=True, help="Static files directory")
+def init(templates_dir, static_dir):
+    """Initialize SilkUI in your Django project."""
+    config = {
+        **DEFAULT_CONFIG,
+        "templates_dir": templates_dir,
+        "components_dir": f"{templates_dir}/components",
+        "static_dir": static_dir,
+        "js_dir": f"{static_dir}/js/silkui",
+        "css_dir": f"{static_dir}/css",
+    }
+
+    # silkui.json
+    config_path = Path("silkui.json")
+    if config_path.exists():
+        console.print("[yellow]silkui.json already exists, skipping.[/yellow]")
+    else:
+        config_path.write_text(json.dumps(config, indent=2))
+        console.print("[green]✓[/green] Created [bold]silkui.json[/bold]")
+
+    # Directories
+    for key in ("components_dir", "js_dir", "css_dir"):
+        Path(config[key]).mkdir(parents=True, exist_ok=True)
+
+    # silkui.css
+    from silkui.registry import get_base_css
+    css_file = Path(config["css_dir"]) / "silkui.css"
+    if not css_file.exists():
+        css_file.write_text(get_base_css())
+        console.print(f"[green]✓[/green] Created [bold]{css_file}[/bold]")
+
+    # .prettierignore — Prettier must never reformat Django templates
+    _setup_prettier_ignore(templates_dir)
+
+    # .djlintrc — djlint understands Django syntax and formats HTML without
+    # breaking {% %} tags. Use it instead of Prettier for HTML files.
+    _setup_djlint()
+
+    # .vscode/settings.json — configure djlint as the HTML formatter
+    _setup_vscode()
+
+    console.print(
+        Panel(
+            "\n".join([
+                "[bold]SilkUI initialized![/bold]",
+                "",
+                "Next steps:",
+                "",
+                "  1. Add [cyan]silkui[/cyan] to INSTALLED_APPS in settings.py",
+                "",
+                "  2. Add SilkUI colors to your [bold]tailwind.config.js[/bold]:",
+                "     [cyan]theme: { extend: { colors: {",
+                "       border: \"hsl(var(--border))\", input: \"hsl(var(--input))\",",
+                "       background: \"hsl(var(--background))\", foreground: \"hsl(var(--foreground))\",",
+                "       primary: { DEFAULT: \"hsl(var(--primary))\", foreground: \"hsl(var(--primary-foreground))\" },",
+                "       secondary: { DEFAULT: \"hsl(var(--secondary))\", foreground: \"hsl(var(--secondary-foreground))\" },",
+                "       destructive: { DEFAULT: \"hsl(var(--destructive))\", foreground: \"hsl(var(--destructive-foreground))\" },",
+                "       muted: { DEFAULT: \"hsl(var(--muted))\", foreground: \"hsl(var(--muted-foreground))\" },",
+                "       accent: { DEFAULT: \"hsl(var(--accent))\", foreground: \"hsl(var(--accent-foreground))\" },",
+                "       card: { DEFAULT: \"hsl(var(--card))\", foreground: \"hsl(var(--card-foreground))\" },",
+                "       popover: { DEFAULT: \"hsl(var(--popover))\", foreground: \"hsl(var(--popover-foreground))\" },",
+                "     }, borderRadius: { lg: \"var(--radius)\", md: \"calc(var(--radius) - 2px)\", sm: \"calc(var(--radius) - 4px)\" } } }[/cyan]",
+                "",
+                "     [dim]Using Tailwind CDN? See README for the inline config block.[/dim]",
+                "",
+                "  3. In your base.html:",
+                "     [cyan]<link rel=\"stylesheet\" href=\"{% static 'css/silkui.css' %}\">",
+                "     <body x-data>",
+                "       <script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js\"></script>",
+                "     </body>[/cyan]",
+                "",
+                "  4. Add your first component:",
+                "     [cyan]silkui add button[/cyan]",
+                "",
+                "  5. Use it in any template:",
+                "     [cyan]{% load silkui_tags %}",
+                "     {% button %}Save{% endbutton %}[/cyan]",
+            ]),
+            title="[bold green]Done[/bold green]",
+        )
+    )

silkui/commands/list.py

@@ -0,0 +1,40 @@
+import json
+from pathlib import Path
+
+import click
+from rich.console import Console
+from rich.table import Table
+
+console = Console()
+
+
+@click.command()
+def list_components():
+    """List all available SilkUI components."""
+    from silkui.registry import get_registry
+
+    registry = get_registry()
+
+    installed = set()
+    config_path = Path("silkui.json")
+    if config_path.exists():
+        config = json.loads(config_path.read_text())
+        components_dir = Path(config.get("components_dir", "templates/components"))
+        if components_dir.exists():
+            installed = {f.stem for f in components_dir.glob("*.html")}
+
+    table = Table(title="SilkUI Components", show_header=True, header_style="bold")
+    table.add_column("", width=2)
+    table.add_column("Component", style="bold")
+    table.add_column("Description")
+    table.add_column("Alpine.js", justify="center")
+
+    for name, meta in registry.items():
+        status = "[green]✓[/green]" if name in installed else " "
+        needs_alpine = "[cyan]yes[/cyan]" if meta.get("alpine") else "[dim]no[/dim]"
+        table.add_row(status, name, meta.get("description", ""), needs_alpine)
+
+    console.print()
+    console.print(table)
+    console.print(f"\n[dim]{len(registry)} components available, {len(installed)} installed[/dim]")
+    console.print("[dim]Run [bold]silkui add <name>[/bold] to install a component.[/dim]\n")

silkui/registry/__init__.py

@@ -0,0 +1,30 @@
+import json
+from pathlib import Path
+
+COMPONENTS_DIR = Path(__file__).parent / "components"
+BASE_CSS_FILE = Path(__file__).parent / "base.css"
+
+
+def get_registry() -> dict:
+    registry = {}
+    for component_dir in sorted(COMPONENTS_DIR.iterdir()):
+        if not component_dir.is_dir():
+            continue
+        meta_file = component_dir / "meta.json"
+        if meta_file.exists():
+            meta = json.loads(meta_file.read_text())
+            registry[meta["name"]] = meta
+    return registry
+
+
+def get_component_files(name: str) -> dict[str, str]:
+    component_dir = COMPONENTS_DIR / name
+    return {
+        f.name: f.read_text()
+        for f in component_dir.iterdir()
+        if f.suffix in (".html", ".js")
+    }
+
+
+def get_base_css() -> str:
+    return BASE_CSS_FILE.read_text()

silkui/registry/base.css

@@ -0,0 +1,59 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

silkui/registry/components/alert/alert-description.html

@@ -0,0 +1,2 @@
+{% comment %}NexUI Alert Description v1.0.0{% endcomment %}
+<div class="text-sm [&_p]:leading-relaxed {{ class }}">{{ slot }}</div>

silkui/registry/components/alert/alert-title.html

@@ -0,0 +1,2 @@
+{% comment %}NexUI Alert Title v1.0.0{% endcomment %}
+<h5 class="mb-1 font-medium leading-none tracking-tight {{ class }}">{{ slot }}</h5>

silkui/registry/components/alert/alert.html

@@ -0,0 +1,8 @@
+{% comment %}NexUI Alert v1.0.0{% endcomment %}
+{% with nv=variant|default:"default" %}
+<div role="alert" class="relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4
+  {% if nv == 'destructive' %}border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive
+  {% else %}bg-background text-foreground
+  {% endif %}
+  {{ class }}">{{ slot }}</div>
+{% endwith %}

silkui/registry/components/alert/meta.json

@@ -0,0 +1,11 @@
+{
+  "name": "alert",
+  "version": "1.0.0",
+  "description": "Bloc d'alerte composable. Variantes: default, destructive.",
+  "files": ["alert.html", "alert-title.html", "alert-description.html"],
+  "js_files": [],
+  "alpine": false,
+  "htmx_ready": false,
+  "dependencies": [],
+  "usage": "{% alert %}{% alert_title %}Heads up!{% endalert_title %}{% alert_description %}Something happened.{% endalert_description %}{% endalert %}"
+}

silkui/registry/components/badge/badge.html

@@ -0,0 +1,10 @@
+{% comment %}NexUI Badge v1.0.0{% endcomment %}
+{% with nv=variant|default:"default" %}
+<span class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+  {% if nv == 'default' %}border-transparent bg-primary text-primary-foreground hover:bg-primary/80
+  {% elif nv == 'secondary' %}border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80
+  {% elif nv == 'destructive' %}border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80
+  {% elif nv == 'outline' %}text-foreground
+  {% endif %}
+  {{ class }}">{{ slot }}</span>
+{% endwith %}

silkui/registry/components/badge/meta.json

@@ -0,0 +1,11 @@
+{
+  "name": "badge",
+  "version": "1.0.0",
+  "description": "Badge compact avec variantes (default, secondary, destructive, outline)",
+  "files": ["badge.html"],
+  "js_files": [],
+  "alpine": false,
+  "htmx_ready": false,
+  "dependencies": [],
+  "usage": "{% include \"components/badge.html\" with label=\"New\" variant=\"default\" %}"
+}

silkui/registry/components/button/button.html

@@ -0,0 +1,23 @@
+{% comment %}NexUI Button v1.0.0{% endcomment %}
+{% with nv=variant|default:"default" ns=size|default:"md" %}
+<button
+  type="{{ type|default:'button' }}"
+  {% if id %}id="{{ id }}"{% endif %}
+  class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50
+    {% if nv == 'default' %}bg-primary text-primary-foreground hover:bg-primary/90
+    {% elif nv == 'destructive' %}bg-destructive text-destructive-foreground hover:bg-destructive/90
+    {% elif nv == 'outline' %}border border-input bg-background hover:bg-accent hover:text-accent-foreground
+    {% elif nv == 'secondary' %}bg-secondary text-secondary-foreground hover:bg-secondary/80
+    {% elif nv == 'ghost' %}hover:bg-accent hover:text-accent-foreground
+    {% elif nv == 'link' %}text-primary underline-offset-4 hover:underline
+    {% endif %}
+    {% if ns == 'sm' %}h-9 px-3 text-xs
+    {% elif ns == 'lg' %}h-11 px-8 text-base
+    {% elif ns == 'icon' %}h-10 w-10 p-0
+    {% else %}h-10 px-4 py-2
+    {% endif %}
+    {{ class }}"
+  {% if disabled %}disabled{% endif %}
+  {{ attrs }}
+>{{ slot }}</button>
+{% endwith %}

silkui/registry/components/button/meta.json

@@ -0,0 +1,11 @@
+{
+  "name": "button",
+  "version": "1.0.0",
+  "description": "Bouton avec variantes (default, destructive, outline, secondary, ghost, link) et tailles",
+  "files": ["button.html"],
+  "js_files": [],
+  "alpine": false,
+  "htmx_ready": true,
+  "dependencies": [],
+  "usage": "{% include \"components/button.html\" with label=\"Click me\" variant=\"default\" size=\"md\" %}"
+}

silkui/registry/components/card/card-content.html

@@ -0,0 +1,2 @@
+{% comment %}NexUI Card Content v1.0.0{% endcomment %}
+<div class="p-6 pt-0 {{ class }}">{{ slot }}</div>

silkui/registry/components/card/card-description.html

@@ -0,0 +1,2 @@
+{% comment %}NexUI Card Description v1.0.0{% endcomment %}
+<p class="text-sm text-muted-foreground {{ class }}">{{ slot }}</p>

silkui/registry/components/card/card-footer.html

@@ -0,0 +1,2 @@
+{% comment %}NexUI Card Footer v1.0.0{% endcomment %}
+<div class="flex items-center p-6 pt-0 {{ class }}">{{ slot }}</div>

silkui/registry/components/card/card-header.html

@@ -0,0 +1,2 @@
+{% comment %}NexUI Card Header v1.0.0{% endcomment %}
+<div class="flex flex-col space-y-1.5 p-6 {{ class }}">{{ slot }}</div>

silkui/registry/components/card/card-title.html

@@ -0,0 +1,2 @@
+{% comment %}NexUI Card Title v1.0.0{% endcomment %}
+<h3 class="text-2xl font-semibold leading-none tracking-tight {{ class }}">{{ slot }}</h3>

silkui/registry/components/card/card.html

@@ -0,0 +1,2 @@
+{% comment %}NexUI Card v1.0.0{% endcomment %}
+<div class="rounded-lg border bg-card text-card-foreground shadow-sm {{ class }}">{{ slot }}</div>

silkui/registry/components/card/meta.json

@@ -0,0 +1,11 @@
+{
+  "name": "card",
+  "version": "1.0.0",
+  "description": "Conteneur composable avec header, title, description, content et footer.",
+  "files": ["card.html", "card-header.html", "card-title.html", "card-description.html", "card-content.html", "card-footer.html"],
+  "js_files": [],
+  "alpine": false,
+  "htmx_ready": true,
+  "dependencies": [],
+  "usage": "{% card %}{% card_header %}{% card_title %}Title{% endcard_title %}{% endcard_header %}{% card_content %}Body{% endcard_content %}{% endcard %}"
+}

silkui/registry/components/checkbox/checkbox.html

@@ -0,0 +1,24 @@
+{% comment %}NexUI Checkbox v1.0.0{% endcomment %}
+<div class="{{ container_class }}">
+  <div class="flex items-center gap-2">
+    <input
+      type="checkbox"
+      name="{{ name }}"
+      id="{{ id }}"
+      {% if value %}value="{{ value }}"{% endif %}
+      {% if checked %}checked{% endif %}
+      {% if required %}required{% endif %}
+      {% if disabled %}disabled{% endif %}
+      class="h-4 w-4 rounded border border-input accent-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 {{ input_class }}"
+      {{ attrs }}
+    />
+    {% if label %}
+    <label
+      for="{{ id }}"
+      class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 {{ label_class }}"
+    >{{ label }}</label>
+    {% endif %}
+  </div>
+  {% if hint %}<p class="text-xs text-muted-foreground mt-1 ml-6">{{ hint }}</p>{% endif %}
+  {% if error %}<p class="text-xs text-destructive mt-1 ml-6">{{ error }}</p>{% endif %}
+</div>

silkui/registry/components/checkbox/meta.json

@@ -0,0 +1,11 @@
+{
+  "name": "checkbox",
+  "version": "1.0.0",
+  "description": "Case à cocher avec label inline, hint et error.",
+  "files": ["checkbox.html"],
+  "js_files": [],
+  "alpine": false,
+  "htmx_ready": true,
+  "dependencies": [],
+  "usage": "{% checkbox name=\"terms\" label=\"J'accepte les CGU\" %}"
+}

silkui/registry/components/dropdown/dropdown.html

@@ -0,0 +1,37 @@
+{% comment %}NexUI Dropdown v1.0.0
+
+Usage:
+  {% dropdown trigger_label="My Account" %}
+    {% dropdown_item href="/profile/" %}Profile{% enddropdown_item %}
+    {% dropdown_item href="/settings/" %}Settings{% enddropdown_item %}
+    {% dropdown_separator %}
+    {% dropdown_item href="/logout/" %}Logout{% enddropdown_item %}
+  {% enddropdown %}
+{% endcomment %}
+<div x-data="{ open: false }" class="relative inline-block {{ class }}">
+  <button
+    type="button"
+    x-on:click="open = !open"
+    x-on:keydown.escape="open = false"
+    class="inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 {{ trigger_class }}"
+    aria-haspopup="true"
+    x-bind:aria-expanded="open"
+  >
+    {{ trigger_label }}
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" x-bind:class="open ? 'rotate-180' : ''" class="transition-transform duration-200"><path d="m6 9 6 6 6-6"/></svg>
+  </button>
+
+  <div
+    x-show="open"
+    x-on:click.outside="open = false"
+    x-transition:enter="transition ease-out duration-100"
+    x-transition:enter-start="opacity-0 scale-95"
+    x-transition:enter-end="opacity-100 scale-100"
+    x-transition:leave="transition ease-in duration-75"
+    x-transition:leave-start="opacity-100 scale-100"
+    x-transition:leave-end="opacity-0 scale-95"
+    class="absolute right-0 z-50 mt-1 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md {{ menu_class }}"
+    style="display:none"
+    role="menu"
+  >{{ slot }}</div>
+</div>

silkui/registry/components/dropdown/meta.json

@@ -0,0 +1,11 @@
+{
+  "name": "dropdown",
+  "version": "1.0.0",
+  "description": "Menu déroulant avec items et séparateurs, contrôlé par Alpine.js",
+  "files": ["dropdown.html"],
+  "js_files": [],
+  "alpine": true,
+  "htmx_ready": true,
+  "dependencies": [],
+  "usage": "{% include \"components/dropdown.html\" with trigger_label=\"Options\" items=items_list %}"
+}