@hgdc/ui 0.1.0 → 0.2.0

package/README.md

@@ -1,7 +1,48 @@
 # @hgdc/ui
 
-Interface de la H family : jetons de la DA, thèmes, polices et composants.
+Interface de la H family : jetons de la DA, thèmes clair et sombre, polices et composants de base, pour une application React 19 + Tailwind v4.
 
-Paquet réservé : son contenu arrive avec la vague 1 de la H family.
+```sh
+bun add @hgdc/ui
+```
+
+```css
+/* src/styles.css */
+@import "tailwindcss";
+@import "@hgdc/ui/styles.css";
+
+/* Écarts du produit, après l'import. */
+:root {
+  --chart-1: oklch(0.55 0.25 296);
+}
+```
+
+```tsx
+import { Button } from "@hgdc/ui/button"
+import { ThemeProvider, themeInitScript, useTheme } from "@hgdc/ui/theme"
+```
+
+## Contenu
+
+| Import                                                                                          | Rôle                                                                                                        |
+| ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| `@hgdc/ui/styles.css`                                                                           | Jetons OKLCH, thèmes (`.dark` sur `<html>`), Inter et Geist, utilitaires `surface`, `pressable`, `soft-in`… |
+| `@hgdc/ui/theme`                                                                                | `ThemeProvider`, `useTheme`, `themeInitScript` (à poser dans le `<head>` contre le flash de thème)          |
+| `@hgdc/ui/cn`                                                                                   | `cn()` (clsx + tailwind-merge)                                                                              |
+| `@hgdc/ui/use-media-query`                                                                      | `useMediaQuery`, `useIsMobile` (sûrs au rendu serveur)                                                      |
+| `@hgdc/ui/floating`                                                                             | Classes des surfaces flottantes (menus, sélecteurs)                                                         |
+| `avatar` `badge` `button` `dialog` `drawer` `dropdown-menu` `empty` `field` `input` `input-otp` | Primitives sur Base UI                                                                                      |
+| `label` `segmented-control` `select` `separator` `sonner` `spinner` `switch` `textarea`         | Primitives sur Base UI, toasts sonner, icônes Hugeicons                                                     |
+
+Un sous-chemin par composant, sans fichier d'index : `import { Badge } from "@hgdc/ui/badge"`.
+
+## Règles de la DA
+
+- Chrome monochrome, un seul accent violet : focus, lien, élément actif, un geste principal par écran.
+- Profondeur par la teinte : ni ombre ni bordure dans le flux, ombre réservée à ce qui flotte.
+- Boutons en pilule, champs et menus en `rounded-2xl`, cartes en `rounded-3xl`.
+- Un `Button` rendu en lien (`render={<Link />}`) reste un lien pour les lecteurs d'écran.
+
+Mode d'emploi complet : [Adopter le kit](https://github.com/hugogebel-boop/hgdc-kit/blob/main/docs/guides/adopter-le-kit.md#7-interface). Décisions : [ADR 0005](https://github.com/hugogebel-boop/hgdc-kit/blob/main/docs/adr/0005-ui-css-brute-et-sous-chemins.md).
 
 Tous droits réservés, Hugo Gebel Développement Conseil.

package/dist/avatar.d.ts

@@ -0,0 +1,11 @@
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import * as React from "react";
+declare function Avatar({ className, size, ...props }: AvatarPrimitive.Root.Props & {
+    size?: "default" | "sm" | "lg";
+}): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props): React.JSX.Element;
+declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };

package/dist/avatar.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import * as React from "react";
+import { cn } from "./cn.js";
+function Avatar({ className, size = "default", ...props }) {
+    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className), ...props }));
+}
+function AvatarImage({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn("aspect-square size-full rounded-full object-cover", className), ...props }));
+}
+function AvatarFallback({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className), ...props }));
+}
+function AvatarBadge({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "avatar-badge", className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className), ...props }));
+}
+function AvatarGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group", className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className), ...props }));
+}
+function AvatarGroupCount({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "avatar-group-count", className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className), ...props }));
+}
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };

package/dist/badge.d.ts

@@ -0,0 +1,9 @@
+import { type VariantProps } from "class-variance-authority";
+import type { ComponentProps } from "react";
+import { type Variants } from "./cn.ts";
+export type BadgeTone = "neutral" | "success" | "warning" | "info" | "destructive";
+declare const badgeVariants: Variants<{
+    tone: BadgeTone;
+}>;
+declare function Badge({ className, tone, ...props }: ComponentProps<"span"> & VariantProps<typeof badgeVariants>): React.JSX.Element;
+export { Badge, badgeVariants };

package/dist/badge.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "./cn.js";
+const badgeVariants = cva("inline-flex w-fit items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3", {
+    variants: {
+        tone: {
+            neutral: "bg-muted text-muted-foreground",
+            success: "bg-status-active/15 text-status-active",
+            warning: "bg-status-paused/15 text-status-paused",
+            info: "bg-status-done/15 text-status-done",
+            destructive: "bg-destructive/10 text-destructive",
+        },
+    },
+    defaultVariants: {
+        tone: "neutral",
+    },
+});
+function Badge({ className, tone, ...props }) {
+    return (_jsx("span", { "data-slot": "badge", "data-tone": tone ?? "neutral", className: cn(badgeVariants({ tone, className })), ...props }));
+}
+export { Badge, badgeVariants };

package/dist/button.d.ts

@@ -0,0 +1,19 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { type VariantProps } from "class-variance-authority";
+import { type Variants } from "./cn.ts";
+type ButtonVariant = "default" | "outline" | "secondary" | "ghost" | "destructive" | "link";
+type ButtonSize = "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
+declare const buttonVariants: Variants<{
+    variant: ButtonVariant;
+    size: ButtonSize;
+}>;
+type ButtonProps = ButtonPrimitive.Props & VariantProps<typeof buttonVariants> & {
+    /**
+     * When true, the button is disabled and its children are replaced with a
+     * spinner. If `children` is a plain string, it is passed as the spinner
+     * label so the action stays readable while in-flight.
+     */
+    isLoading?: boolean | undefined;
+};
+declare function Button({ className, variant, size, isLoading, disabled, children, ...props }: ButtonProps): React.JSX.Element;
+export { Button, buttonVariants, type ButtonProps };

package/dist/button.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva } from "class-variance-authority";
+import { useRender } from "@base-ui/react/use-render";
+import { isValidElement } from "react";
+import { Spinner } from "./spinner.js";
+import { cn } from "./cn.js";
+const buttonVariants = cva(
+// Appui : combine `:active` (CSS pseudo, marche sur tout élément pressable —
+// DropdownMenuTrigger, Link stylisés via buttonVariants, etc.) ET
+// `data-pressed` (attribut Base UI, fiable au doigt). Pas d'exclusion
+// `aria-haspopup` : les déclencheurs de menu répondent aussi.
+// `transition-property` explicite avec `scale` (Tailwind v4 sépare
+// `scale:` de `transform:`).
+//
+// Le bouton s'enfonce (0.97), il ne grossit pas. C'est la métaphore
+// physique : on appuie sur une touche, elle descend. Un bouton qui grandit
+// sous le doigt donne l'impression de venir vers soi, ce qu'aucun objet
+// pressé ne fait.
+//
+// Timing asymétrique : l'appui répond en 100 ms parce que la personne
+// regarde à cet instant précis ; la relâche revient en 300 ms avec un petit
+// rebond (`--ease-bounce`, révision du 2026-09-24).
+//
+// Au survol d'un vrai pointeur (`hover:` ne s'applique qu'aux pointeurs
+// fins en Tailwind v4), le bouton s'avance d'un rien (1.02), comme sur le
+// site ; aucune ombre, jamais : ce qui répond au survol est la couleur et
+// l'échelle.
+//
+// Ni bordure transparente ni `bg-clip-padding` (retirés le 2026-09-27) : le
+// fond s'arrêtait un pixel avant le bord, et dans une feuille du bas posée à
+// une coordonnée fractionnaire (hauteur en `svh`, glissement), iOS laissait
+// voir ce pixel comme un filet sombre en haut de la pilule, en thème sombre.
+// Le focus et l'erreur passent par l'anneau seul.
+"group/button touch-target inline-flex shrink-0 items-center justify-center rounded-full text-sm font-medium whitespace-nowrap [transition-property:color,background-color,opacity,scale,box-shadow] duration-(--duration-slow) ease-(--ease-bounce) outline-none select-none focus-visible:ring-3 focus-visible:ring-ring/50 active:scale-[0.96] active:duration-(--duration-instant) active:ease-out disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-3 aria-invalid:ring-destructive/40 data-[pressed]:scale-[0.96] data-[pressed]:duration-(--duration-instant) data-[pressed]:ease-out motion-safe:hover:scale-[1.02] dark:aria-invalid:ring-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/85",
+            // Un filet à 70 % plutôt qu'une bordure pleine : c'est le seul
+            // contour de l'interface, et il est là pour dire « secondaire ».
+            outline: "bg-background ring-1 ring-border/70 ring-inset hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-transparent dark:hover:bg-input/30",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+            ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+            destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:ring-destructive/30 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        // L'échelle de la barre du haut (révision du 2026-09-25) : un bouton a
+        // la hauteur de la maison et de la cloche, 44 px au doigt et 40 au-dessus
+        // de `lg`, et un bouton-icône leur icône de 20 px. Avant, la page vivait
+        // sur 36 et 32 px à côté de ronds de 44 : deux échelles sur un écran.
+        // `sm` reste un cran plus bas, pour une carte ou une ligne de tableau.
+        size: {
+            default: "h-11 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 lg:h-10",
+            xs: "h-7 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5",
+            sm: "h-10 gap-1.5 px-3.5 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 lg:h-9",
+            lg: "h-12 gap-2 px-5 text-base has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4 lg:h-11",
+            icon: "size-11 lg:size-10 [&_svg:not([class*='size-'])]:size-5",
+            "icon-xs": "size-7 [&_svg:not([class*='size-'])]:size-3.5",
+            "icon-sm": "size-10 lg:size-9 [&_svg:not([class*='size-'])]:size-4.5",
+            "icon-lg": "size-12 lg:size-11 [&_svg:not([class*='size-'])]:size-5",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Button({ className, variant = "default", size = "default", isLoading, disabled, children, ...props }) {
+    // Sur les variantes `icon*` le bouton n'a pas de padding horizontal pour
+    // accueillir un label — on n'expose que le spinner pour éviter un overflow.
+    const isIconSize = typeof size === "string" && size.startsWith("icon");
+    const spinnerLabel = !isIconSize && typeof children === "string" ? children : undefined;
+    const classes = cn(buttonVariants({ variant, size, className: typeof className === "string" ? className : undefined }));
+    // Rendu en lien (`render={<Link />}` ou `<a>`) : le lien garde sa sémantique de lien. Passé par
+    // `ButtonPrimitive`, même avec `nativeButton={false}`, il recevait `role="button"` (doc Base UI :
+    // un lien ne se rend pas par Button, il en prend seulement le style).
+    const { render, nativeButton: _nativeButton, focusableWhenDisabled: _focusable, ...linkProps } = props;
+    const linkElement = isValidElement(render) && render.type !== "button" ? render : undefined;
+    const link = useRender({
+        render: linkElement,
+        enabled: linkElement !== undefined,
+        props: {
+            ...linkProps,
+            "data-slot": "button",
+            className: classes,
+            "aria-disabled": isLoading || disabled || undefined,
+            children,
+        },
+    });
+    if (link)
+        return link;
+    return (_jsx(ButtonPrimitive, { "data-slot": "button", className: classes, disabled: isLoading || disabled, ...props, children: isLoading ? _jsx(Spinner, { ...(spinnerLabel !== undefined ? { label: spinnerLabel } : {}) }) : children }));
+}
+export { Button, buttonVariants };

package/dist/cn.d.ts

@@ -0,0 +1,10 @@
+import type { ClassProp } from "class-variance-authority/types";
+import type { ClassValue } from "clsx";
+export declare function cn(...inputs: Array<ClassValue>): string;
+/**
+ * Signature d'une fonction `cva`, écrite à la main : `isolatedDeclarations` exige un type
+ * explicite sur tout ce qu'expose un paquet, et celui que `cva` infère ne s'écrit pas.
+ */
+export type Variants<V extends Record<string, string>> = (props?: {
+    [K in keyof V]?: V[K] | null;
+} & ClassProp) => string;

package/dist/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/dialog.d.ts

@@ -0,0 +1,14 @@
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import * as React from "react";
+declare function Dialog(props: DialogPrimitive.Root.Props): React.JSX.Element;
+declare const DialogTrigger: typeof DialogPrimitive.Trigger;
+declare const DialogClose: typeof DialogPrimitive.Close;
+declare function DialogContent({ className, children, showClose, ...props }: DialogPrimitive.Popup.Props & {
+    showClose?: boolean;
+}): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props): React.JSX.Element;
+declare function DialogBody({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export { Dialog, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, };

package/dist/dialog.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import Cancel01Icon from "@hugeicons/core-free-icons/Cancel01Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import * as React from "react";
+import { Drawer, DrawerCloseButton, DrawerContent } from "./drawer.js";
+import { useIsMobile } from "./use-media-query.js";
+import { cn } from "./cn.js";
+// La boîte est pleine et nette : c'est le fond qui est assombri et flouté,
+// pas elle. Translucide et floutée elle-même, elle laissait transparaître le
+// contenu qu'elle recouvrait — on lisait deux plans à la fois là où l'on
+// cherchait justement à n'en montrer qu'un. Sur iPhone en app installée, ce
+// second `backdrop-filter` coûtait en plus une recomposition à chaque image
+// de l'animation d'entrée.
+// Sous `lg`, une boîte de dialogue est une feuille du bas, et une feuille se
+// referme au doigt. Elle en avait l'allure sans le geste : on la tirait vers
+// le bas et rien ne bougeait (révision du 2026-09-23). Elle passe donc par le
+// même `Drawer` que les autres feuilles ; Base UI bâtit le Drawer sur le
+// Dialog, titre, description, déclencheur et croix sont les mêmes pièces.
+const SheetContext = React.createContext(false);
+function Dialog(props) {
+    const isMobile = useIsMobile();
+    if (!isMobile)
+        return _jsx(DialogPrimitive.Root, { ...props });
+    return (_jsx(SheetContext.Provider, { value: true, children: _jsx(Drawer, { side: "bottom", ...props }) }));
+}
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogClose = DialogPrimitive.Close;
+// Largeurs et hauteurs de la boîte : la feuille prend toute la largeur et
+// borne elle-même sa hauteur, elles n'ont rien à y faire.
+const BOX_ONLY = /^(?:[a-z0-9-]+:)*(?:max-w|w|max-h|h|overflow(?:-[xy])?)-/;
+function sheetClasses(className) {
+    if (typeof className !== "string")
+        return undefined;
+    return className
+        .split(/\s+/)
+        .filter((token) => token !== "" && !BOX_ONLY.test(token) && !token.startsWith("lg:"))
+        .join(" ");
+}
+function DialogContent({ className, children, showClose = true, ...props }) {
+    const sheet = React.useContext(SheetContext);
+    if (sheet) {
+        return (_jsxs(DrawerContent, { ...props, children: [_jsx("div", { "data-slot": "dialog-content", className: cn("grid min-h-0 flex-1 grid-cols-1 content-start gap-4 overflow-y-auto overscroll-contain px-5 pt-3 pb-5", sheetClasses(className)), children: children }), showClose ? _jsx(DrawerCloseButton, {}) : null] }));
+    }
+    return (_jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Backdrop, { className: "fixed inset-0 z-50 bg-foreground/40 transition-opacity duration-(--duration-slow) ease-ios data-ending-style:opacity-0 data-starting-style:opacity-0 dark:bg-black/60" }), _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn(
+                // Pas d'anneau : la boîte est déjà détachée par le voile qui assombrit
+                // tout le reste. L'ombre, douce, reste la seule de l'interface avec
+                // celle des menus — elle dit « au-dessus », rien d'autre.
+                //
+                // Entrée et sortie en transitions (pas en keyframes) : une boîte
+                // fermée pendant son ouverture repart de là où elle en est. Elle
+                // monte de 0.97 à 1 sur la courbe iOS, centrée — une boîte modale
+                // n'a pas d'ancre dont partir.
+                "fixed z-50 grid gap-4 overflow-y-auto bg-popover text-popover-foreground shadow-2xl shadow-black/10 outline-none", 
+                // Écran large seulement : sous `lg`, c'est la feuille ci-dessus.
+                "lg:top-1/2 lg:left-1/2 lg:max-h-[calc(100dvh-2rem)] lg:w-[calc(100%-2rem)] lg:max-w-lg lg:-translate-x-1/2 lg:-translate-y-1/2 lg:rounded-3xl lg:p-6 lg:transition-[opacity,scale] lg:duration-(--duration-slow) lg:ease-ios lg:data-ending-style:scale-[0.97] lg:data-ending-style:opacity-0 lg:data-ending-style:duration-(--duration-base) lg:data-starting-style:scale-[0.97] lg:data-starting-style:opacity-0", className), ...props, children: [children, showClose ? (_jsx(DialogPrimitive.Close, { className: "touch-target absolute top-4 right-4 flex size-10 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", "aria-label": "Fermer", children: _jsx(HugeiconsIcon, { icon: Cancel01Icon, strokeWidth: 2, className: "size-5" }) })) : null] })] }));
+}
+function DialogHeader({ className, ...props }) {
+    return _jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-1.5 pr-8", className), ...props });
+}
+function DialogTitle({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("font-heading text-lg font-medium tracking-tight", className), ...props }));
+}
+function DialogDescription({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+function DialogBody({ className, ...props }) {
+    return _jsx("div", { "data-slot": "dialog-body", className: cn("", className), ...props });
+}
+function DialogFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props }));
+}
+export { Dialog, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, };

package/dist/drawer.d.ts

@@ -0,0 +1,59 @@
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+import { type HTMLAttributes } from "react";
+/**
+ * Panneau glissant, sur Base UI Drawer.
+ *
+ * Deux placements. `bottom` : une feuille qui monte du bas et se referme au
+ * doigt, pour un téléphone. `right` : un volet flottant à droite pour un écran
+ * large, le « Peek » de Linear — la liste reste visible derrière, et
+ * cliquable si le panneau n'est pas modal. `auto` choisit selon la largeur
+ * (`lg`), au même seuil que la barre de navigation.
+ *
+ * Le geste vient de Base UI : pendant le glissement, le panneau suit le doigt
+ * par `--drawer-swipe-movement-*` et la transition est coupée
+ * (`data-swiping`) ; au lâcher, elle reprend depuis la position courante.
+ * Rien ici n'est un keyframe : une ouverture interrompue se retourne sans
+ * rejouer l'animation entière.
+ *
+ * La feuille du bas suit la recette de la démo Base UI (révision du
+ * 2026-09-23) : `touch-action: none` sur la feuille, sinon le navigateur prend
+ * le doigt pour un défilement natif et le glissement s'interrompt en route.
+ * Une zone qui défile dedans garde son défilement : le navigateur ne combine
+ * `touch-action` que jusqu'au conteneur défilant le plus proche. Un fond qui déborde sous le
+ * bord (`--bleed`) évite le vide quand on tire vers le haut, la sortie dure
+ * selon la vitesse du geste (`--drawer-swipe-strength`), et le clavier virtuel
+ * est suivi (`VirtualKeyboardProvider`) : le champ touché reste visible.
+ */
+type DrawerSide = "bottom" | "right";
+type DrawerProps = Omit<DrawerPrimitive.Root.Props, "swipeDirection"> & {
+    side?: DrawerSide | "auto";
+};
+declare function Drawer({ side, children, ...props }: DrawerProps): React.JSX.Element;
+declare const DrawerTrigger: typeof DrawerPrimitive.Trigger;
+declare const DrawerClose: typeof DrawerPrimitive.Close;
+type DrawerContentProps = DrawerPrimitive.Popup.Props & {
+    /**
+     * Voile derrière le panneau. À couper pour un volet non modal, où la page
+     * doit rester lisible et cliquable.
+     */
+    backdrop?: boolean;
+};
+declare function DrawerContent({ className, children, backdrop, ...props }: DrawerContentProps): React.JSX.Element;
+declare function useDrawerSide(): DrawerSide;
+/** La croix en haut à droite, même dessin que celle des boîtes de dialogue. */
+declare function DrawerCloseButton({ className, ...props }: DrawerPrimitive.Close.Props): React.JSX.Element;
+declare function DrawerHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props): React.JSX.Element;
+declare function DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props): React.JSX.Element;
+/**
+ * La partie qui défile ; l'en-tête et le pied restent en place.
+ *
+ * `*:shrink-0` : posé en colonne flex (`flex flex-col`, le cas courant), un
+ * corps plus haut que la feuille ne défile pas, il comprime ses enfants. Un
+ * enfant `overflow-hidden` (le bandeau d'un plan) n'a plus de hauteur minimale
+ * et s'écrasait en une bande de quelques pixels sur téléphone.
+ */
+declare function DrawerBody({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+declare function DrawerFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+export { Drawer, DrawerTrigger, DrawerClose, DrawerCloseButton, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, useDrawerSide, };
+export type { DrawerSide };

package/dist/drawer.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+import Cancel01Icon from "@hugeicons/core-free-icons/Cancel01Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { createContext, useContext } from "react";
+import { useIsMobile } from "./use-media-query.js";
+import { cn } from "./cn.js";
+const DrawerSideContext = createContext("bottom");
+function Drawer({ side = "auto", children, ...props }) {
+    const isMobile = useIsMobile();
+    const resolved = side === "auto" ? (isMobile ? "bottom" : "right") : side;
+    return (_jsx(DrawerSideContext.Provider, { value: resolved, children: _jsx(DrawerPrimitive.Root, { swipeDirection: resolved === "bottom" ? "down" : "right", ...props, children: resolved === "bottom" && typeof children !== "function" ? (_jsx(DrawerPrimitive.VirtualKeyboardProvider, { children: children })) : (children) }) }));
+}
+const DrawerTrigger = DrawerPrimitive.Trigger;
+const DrawerClose = DrawerPrimitive.Close;
+const popupBase = "pointer-events-auto fixed z-50 flex flex-col bg-popover text-popover-foreground shadow-2xl shadow-black/10 outline-none transition-[translate] duration-(--duration-drawer) ease-ios data-swiping:duration-0 data-swiping:select-none";
+const popupBySide = {
+    bottom: cn("inset-x-0 bottom-0 touch-none rounded-t-3xl", 
+    // Tirée vers le haut, la feuille monte au-delà de son bord : le fond qui
+    // déborde (`--bleed`, compensé par la marge négative) comble le vide.
+    // Le clavier ouvert (`--drawer-keyboard-inset`, posé par
+    // `VirtualKeyboardProvider` sur le cadre) s'ajoute au pied : le contenu
+    // reste au-dessus du clavier au lieu de passer dessous.
+    "-mb-(--bleed) pb-[calc(env(safe-area-inset-bottom)+var(--bleed)+var(--drawer-keyboard-inset,0px))] [--bleed:3rem]", "translate-y-[calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px))]", "data-ending-style:translate-y-[calc(100%-var(--bleed))] data-starting-style:translate-y-[calc(100%-var(--bleed))]", 
+    // Lâchée d'un coup sec, elle part plus vite qu'un glissement lent.
+    "data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*var(--duration-drawer))]"),
+    right: cn("top-2 right-2 bottom-2 w-[calc(100%-1rem)] max-w-md rounded-3xl", 
+    // Tirer vers la gauche ne fait rien : le volet est déjà contre son bord.
+    "translate-x-[max(0px,var(--drawer-swipe-movement-x,0px))]", "data-ending-style:translate-x-[calc(100%+0.5rem)] data-starting-style:translate-x-[calc(100%+0.5rem)]"),
+};
+function DrawerContent({ className, children, backdrop = true, ...props }) {
+    const side = useDrawerSide();
+    return (_jsxs(DrawerPrimitive.Portal, { children: [backdrop ? (_jsx(DrawerPrimitive.Backdrop, { className: "fixed inset-x-0 -inset-y-24 z-50 bg-black/30 opacity-[calc(1-var(--drawer-swipe-progress,0))] transition-opacity duration-(--duration-drawer) ease-ios data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 dark:bg-black/50" })) : null, _jsx(DrawerPrimitive.Viewport, { className: "pointer-events-none fixed inset-0 z-50", children: _jsx(DrawerPrimitive.Popup, { "data-slot": "drawer-content", className: cn(popupBase, popupBySide[side], 
+                    // La feuille prend la hauteur de son contenu, jusqu'en haut de
+                    // l'écran (révision du 2026-10-01) : arrêtée aux deux tiers, un
+                    // contenu long obligeait à défiler dedans. Clavier ouvert, elle
+                    // monte d'office tout en haut : le multiplicateur fait passer la
+                    // hauteur minimale de 0 à la hauteur maximale dès que le clavier
+                    // a une hauteur, sans JavaScript.
+                    // Tout l'écran, moins la barre d'état et un liseré qui laisse
+                    // deviner la page derrière. Classes écrites en entier : Tailwind
+                    // ne lit pas une classe composée.
+                    side === "bottom" &&
+                        "max-h-[calc(100svh-max(env(safe-area-inset-top),0.75rem)-0.5rem+var(--bleed))] min-h-[min(calc(var(--drawer-keyboard-inset,0px)*1000),calc(100svh-max(env(safe-area-inset-top),0.75rem)-0.5rem+var(--bleed)))]", className), ...props, children: _jsxs(DrawerPrimitive.Content, { className: "flex min-h-0 flex-1 flex-col", children: [side === "bottom" ? (_jsx("div", { "aria-hidden": true, className: "mx-auto mt-2.5 h-1 w-10 shrink-0 rounded-full bg-muted-foreground/30" })) : null, children] }) }) })] }));
+}
+function useDrawerSide() {
+    return useContext(DrawerSideContext);
+}
+/** La croix en haut à droite, même dessin que celle des boîtes de dialogue. */
+function DrawerCloseButton({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Close, { "data-slot": "drawer-close", "aria-label": "Fermer", className: cn("touch-target absolute top-4 right-4 flex size-10 items-center justify-center rounded-full text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring", className), ...props, children: _jsx(HugeiconsIcon, { icon: Cancel01Icon, strokeWidth: 2, className: "size-5" }) }));
+}
+function DrawerHeader({ className, ...props }) {
+    const side = useDrawerSide();
+    return (_jsx("div", { "data-slot": "drawer-header", className: cn("flex shrink-0 flex-col gap-1.5 px-6 pr-14 pb-3", side === "bottom" ? "pt-3" : "pt-5", className), ...props }));
+}
+function DrawerTitle({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Title, { "data-slot": "drawer-title", className: cn("font-heading text-lg font-medium tracking-tight", className), ...props }));
+}
+function DrawerDescription({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Description, { "data-slot": "drawer-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+/**
+ * La partie qui défile ; l'en-tête et le pied restent en place.
+ *
+ * `*:shrink-0` : posé en colonne flex (`flex flex-col`, le cas courant), un
+ * corps plus haut que la feuille ne défile pas, il comprime ses enfants. Un
+ * enfant `overflow-hidden` (le bandeau d'un plan) n'a plus de hauteur minimale
+ * et s'écrasait en une bande de quelques pixels sur téléphone.
+ */
+function DrawerBody({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-body", className: cn("min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-2 *:shrink-0", className), ...props }));
+}
+function DrawerFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-footer", className: cn("flex shrink-0 flex-col-reverse gap-2 px-6 pt-3 pb-5 sm:flex-row sm:justify-end", className), ...props }));
+}
+export { Drawer, DrawerTrigger, DrawerClose, DrawerCloseButton, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, useDrawerSide, };

package/dist/dropdown-menu.d.ts

@@ -0,0 +1,36 @@
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import * as React from "react";
+declare function DropdownMenu({ ...props }: MenuPrimitive.Root.Props): React.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props): React.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props): React.JSX.Element;
+declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, collisionPadding, collisionAvoidance, className, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "collisionPadding" | "collisionAvoidance">): React.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props): React.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: MenuPrimitive.GroupLabel.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: MenuPrimitive.Item.Props & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): React.JSX.Element;
+declare function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props): React.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: MenuPrimitive.SubmenuTrigger.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: React.ComponentProps<typeof DropdownMenuContent>): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: MenuPrimitive.CheckboxItem.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+/**
+ * `label` titre le groupe. `Menu.RadioGroup` ne pose pas le contexte de
+ * `Menu.Group` : un `DropdownMenuLabel` glissé dedans lève l'erreur Base UI
+ * #31 et fait tomber le menu. Le titre passe donc par ici, jamais en enfant.
+ */
+declare function DropdownMenuRadioGroup({ label, ...props }: MenuPrimitive.RadioGroup.Props & {
+    label?: React.ReactNode;
+}): React.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, inset, ...props }: MenuPrimitive.RadioItem.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props): React.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/dropdown-menu.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import ArrowRight01Icon from "@hugeicons/core-free-icons/ArrowRight01Icon";
+import Tick02Icon from "@hugeicons/core-free-icons/Tick02Icon";
+import { HugeiconsIcon } from "@hugeicons/react";
+import * as React from "react";
+import { FLOATING_COLLISION_AVOIDANCE, FLOATING_COLLISION_PADDING, FLOATING_MAX_WIDTH, FLOATING_SUBMENU_COLLISION_AVOIDANCE, FLOATING_SURFACE, } from "./floating.js";
+import { cn } from "./cn.js";
+function DropdownMenu({ ...props }) {
+    return _jsx(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({ ...props }) {
+    return _jsx(MenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+    return _jsx(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, 
+// Marge minimale aux bords de l'écran. Un menu ouvert depuis un élément collé
+// au bord — l'action d'un message, celle d'une ligne de tableau — s'y appuyait
+// sans respiration, quand il ne débordait pas.
+collisionPadding = FLOATING_COLLISION_PADDING, collisionAvoidance = FLOATING_COLLISION_AVOIDANCE, className, ...props }) {
+    return (_jsx(MenuPrimitive.Portal, { children: _jsx(MenuPrimitive.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, collisionPadding: collisionPadding, collisionAvoidance: collisionAvoidance, children: _jsx(MenuPrimitive.Popup, { "data-slot": "dropdown-menu-content", className: cn(FLOATING_MAX_WIDTH, 
+                // Même surface que Select et Combobox : opaque, ombre douce,
+                // pas d'anneau. Entrée en 150 ms depuis l'ancre (scale 0.98 → 1),
+                // sortie en 100 ms ; des transitions, pas des keyframes, pour
+                // qu'un ouvrir-fermer rapide reparte de la position courante.
+                FLOATING_SURFACE, "relative z-50 max-h-(--available-height) w-(--anchor-width) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl p-1.5 transition-[scale,opacity] duration-(--duration-fast) ease-ios outline-none data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-ending-style:duration-(--duration-instant) data-starting-style:scale-[0.98] data-starting-style:opacity-0 **:data-[slot$=-item]:focus:bg-muted **:data-[slot$=-item]:data-highlighted:bg-muted **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-muted **:data-[slot$=-trigger]:aria-expanded:bg-muted! **:data-[variant=destructive]:focus:bg-destructive/10!", className), ...props }) }) }));
+}
+function DropdownMenuGroup({ ...props }) {
+    return _jsx(MenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+    return (_jsx(MenuPrimitive.GroupLabel, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("px-3 py-2.5 text-xs text-muted-foreground data-inset:pl-9.5", className), ...props }));
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+    return (_jsx(MenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-xl px-3 py-2 text-sm font-medium outline-hidden select-none focus:bg-muted focus:text-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive max-lg:min-h-11 dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className), ...props }));
+}
+function DropdownMenuSub({ ...props }) {
+    return _jsx(MenuPrimitive.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+    return (_jsxs(MenuPrimitive.SubmenuTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("flex cursor-default items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium outline-hidden select-none focus:bg-muted focus:text-foreground data-inset:pl-9.5 data-popup-open:bg-muted data-popup-open:text-foreground data-open:bg-muted data-open:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(HugeiconsIcon, { icon: ArrowRight01Icon, strokeWidth: 2, className: "ml-auto" })] }));
+}
+function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
+    return (_jsx(DropdownMenuContent, { "data-slot": "dropdown-menu-sub-content", collisionAvoidance: FLOATING_SUBMENU_COLLISION_AVOIDANCE, className: cn("relative w-auto min-w-36 rounded-2xl p-1.5 **:data-[slot$=-item]:focus:bg-muted **:data-[slot$=-item]:data-highlighted:bg-muted **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-muted **:data-[slot$=-trigger]:aria-expanded:bg-muted! **:data-[variant=destructive]:focus:bg-destructive/10!", className), align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, ...props }));
+}
+function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+    return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm font-medium outline-hidden select-none focus:bg-muted focus:text-foreground data-inset:pl-9.5 max-lg:min-h-11 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-checkbox-item-indicator", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(HugeiconsIcon, { icon: Tick02Icon, strokeWidth: 2 }) }) }), children] }));
+}
+/**
+ * `label` titre le groupe. `Menu.RadioGroup` ne pose pas le contexte de
+ * `Menu.Group` : un `DropdownMenuLabel` glissé dedans lève l'erreur Base UI
+ * #31 et fait tomber le menu. Le titre passe donc par ici, jamais en enfant.
+ */
+function DropdownMenuRadioGroup({ label, ...props }) {
+    const group = _jsx(MenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
+    if (label === undefined)
+        return group;
+    return (_jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: label }), group] }));
+}
+function DropdownMenuRadioItem({ className, children, inset, ...props }) {
+    return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-inset": inset, className: cn("relative flex cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm font-medium outline-hidden select-none focus:bg-muted focus:text-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-radio-item-indicator", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(HugeiconsIcon, { icon: Tick02Icon, strokeWidth: 2 }) }) }), children] }));
+}
+function DropdownMenuSeparator({ className, ...props }) {
+    return (_jsx(MenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn("-mx-1.5 my-1.5 h-px bg-border/50", className), ...props }));
+}
+function DropdownMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-foreground", className), ...props }));
+}
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/empty.d.ts

@@ -0,0 +1,12 @@
+import { type VariantProps } from "class-variance-authority";
+import { type Variants } from "./cn.ts";
+declare function Empty({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare const emptyMediaVariants: Variants<{
+    variant: "default" | "icon";
+}>;
+declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): React.JSX.Element;
+declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };