@dsfrkit/react 0.1.0

package/dist/components/ui/modal.js

@@ -0,0 +1,153 @@
+'use strict';
+
+var DialogPrimitive = require('@radix-ui/react-dialog');
+var classVarianceAuthority = require('class-variance-authority');
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/components/ui/modal.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var Modal = DialogPrimitive__namespace.Root;
+var ModalTrigger = DialogPrimitive__namespace.Trigger;
+var ModalPortal = DialogPrimitive__namespace.Portal;
+var ModalClose = DialogPrimitive__namespace.Close;
+var ModalOverlay = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-foreground-title/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+ModalOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
+var modalContentVariants = classVarianceAuthority.cva(
+  "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg max-h-[85vh] overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background-elevated text-foreground p-6 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] border-border",
+  {
+    variants: {
+      size: {
+        sm: "max-w-sm",
+        md: "max-w-lg",
+        lg: "max-w-2xl",
+        xl: "max-w-4xl",
+        full: "max-w-[95vw] max-h-[95vh]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var ModalContent = React__namespace.forwardRef(({ className, children, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(ModalPortal, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(ModalOverlay, {}),
+  /* @__PURE__ */ jsxRuntime.jsxs(
+    DialogPrimitive__namespace.Content,
+    {
+      ref,
+      className: cn(modalContentVariants({ size, className })),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsxs(DialogPrimitive__namespace.Close, { className: "absolute right-4 top-2 sm:top-4 flex items-center gap-2 text-sm text-primary hover:text-primary-hover focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-muted", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Fermer" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "24",
+              height: "24",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: "h-4 w-4",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  )
+] }));
+ModalContent.displayName = DialogPrimitive__namespace.Content.displayName;
+var ModalHeader = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: cn("flex flex-col space-y-1.5 text-center sm:text-left mt-8", className),
+    ...props
+  }
+);
+ModalHeader.displayName = "ModalHeader";
+var ModalFooter = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
+    ...props
+  }
+);
+ModalFooter.displayName = "ModalFooter";
+var ModalTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Title,
+  {
+    ref,
+    className: cn(
+      "text-2xl font-bold leading-none tracking-tight text-foreground-title",
+      className
+    ),
+    ...props
+  }
+));
+ModalTitle.displayName = DialogPrimitive__namespace.Title.displayName;
+var ModalDescription = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DialogPrimitive__namespace.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+ModalDescription.displayName = DialogPrimitive__namespace.Description.displayName;
+
+exports.Modal = Modal;
+exports.ModalClose = ModalClose;
+exports.ModalContent = ModalContent;
+exports.ModalDescription = ModalDescription;
+exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;
+exports.ModalOverlay = ModalOverlay;
+exports.ModalPortal = ModalPortal;
+exports.ModalTitle = ModalTitle;
+exports.ModalTrigger = ModalTrigger;

package/dist/components/ui/modal.mjs

@@ -0,0 +1,2 @@
+export { Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger } from '../../chunk-OZ37V2CL.mjs';
+import '../../chunk-SZOFVBTZ.mjs';

package/dist/components/ui/notice.d.mts

@@ -0,0 +1,56 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+/**
+ * Variants du bandeau d'information DSFR
+ * Conforme au design system : https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bandeau-d-information
+ */
+declare const noticeVariants: (props?: ({
+    variant?: "info" | "success" | "warning" | "error" | "neutral" | "weather" | null | undefined;
+    closable?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface NoticeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof noticeVariants> {
+    /**
+     * Titre du bandeau (optionnel, accepte du texte ou un noeud React)
+     */
+    title?: React.ReactNode;
+    /**
+     * Callback appelé lors de la fermeture
+     */
+    onClose?: () => void;
+    /**
+     * Icône personnalisée
+     */
+    icon?: React.ReactNode;
+    /**
+     * Masquer l'icône par défaut
+     */
+    hideIcon?: boolean;
+}
+/**
+ * Composant Notice (Bandeau d'information) DSFR
+ *
+ * Affiche un message important en haut de page ou dans une section.
+ *
+ * @example
+ * ```tsx
+ * // Bandeau d'information simple
+ * <Notice variant="info">
+ *   Cette fonctionnalité est en cours de déploiement.
+ * </Notice>
+ *
+ * // Avec titre et fermeture
+ * <Notice
+ *   variant="warning"
+ *   title="Maintenance prévue"
+ *   closable
+ *   onClose={() => console.log('fermé')}
+ * >
+ *   Le service sera indisponible dimanche de 2h à 6h.
+ * </Notice>
+ * ```
+ */
+declare const Notice: React.ForwardRefExoticComponent<NoticeProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Notice, type NoticeProps, noticeVariants };

package/dist/components/ui/notice.d.ts

@@ -0,0 +1,56 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+/**
+ * Variants du bandeau d'information DSFR
+ * Conforme au design system : https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/bandeau-d-information
+ */
+declare const noticeVariants: (props?: ({
+    variant?: "info" | "success" | "warning" | "error" | "neutral" | "weather" | null | undefined;
+    closable?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface NoticeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof noticeVariants> {
+    /**
+     * Titre du bandeau (optionnel, accepte du texte ou un noeud React)
+     */
+    title?: React.ReactNode;
+    /**
+     * Callback appelé lors de la fermeture
+     */
+    onClose?: () => void;
+    /**
+     * Icône personnalisée
+     */
+    icon?: React.ReactNode;
+    /**
+     * Masquer l'icône par défaut
+     */
+    hideIcon?: boolean;
+}
+/**
+ * Composant Notice (Bandeau d'information) DSFR
+ *
+ * Affiche un message important en haut de page ou dans une section.
+ *
+ * @example
+ * ```tsx
+ * // Bandeau d'information simple
+ * <Notice variant="info">
+ *   Cette fonctionnalité est en cours de déploiement.
+ * </Notice>
+ *
+ * // Avec titre et fermeture
+ * <Notice
+ *   variant="warning"
+ *   title="Maintenance prévue"
+ *   closable
+ *   onClose={() => console.log('fermé')}
+ * >
+ *   Le service sera indisponible dimanche de 2h à 6h.
+ * </Notice>
+ * ```
+ */
+declare const Notice: React.ForwardRefExoticComponent<NoticeProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Notice, type NoticeProps, noticeVariants };

package/dist/components/ui/notice.js

@@ -0,0 +1,126 @@
+'use strict';
+
+var icons = require('@dsfrkit/icons');
+var classVarianceAuthority = require('class-variance-authority');
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/components/ui/notice.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var noticeVariants = classVarianceAuthority.cva("relative w-full py-4 px-6 flex items-start gap-4", {
+  variants: {
+    variant: {
+      // DSFR: bordure gauche 4px + fond sémantique (même logique qu'Alert)
+      info: "border-l-4 border-l-info bg-info-background text-foreground",
+      success: "border-l-4 border-l-success bg-success-background text-foreground",
+      warning: "border-l-4 border-l-warning bg-warning-background text-foreground",
+      error: "border-l-4 border-l-destructive bg-destructive-background text-foreground",
+      neutral: "border-l-4 border-l-border-contrast bg-accent text-accent-foreground",
+      // Variante "weather" DSFR — fond neutre
+      weather: "bg-muted text-foreground border-b border-border"
+    },
+    closable: {
+      true: "pr-12",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    variant: "info",
+    closable: false
+  }
+});
+var noticeIconVariants = classVarianceAuthority.cva("flex-shrink-0 mt-0.5", {
+  variants: {
+    variant: {
+      info: "text-info",
+      success: "text-success",
+      warning: "text-warning",
+      error: "text-destructive",
+      neutral: "text-muted-foreground",
+      weather: "text-muted-foreground"
+    }
+  },
+  defaultVariants: {
+    variant: "info"
+  }
+});
+var defaultIcons = {
+  info: /* @__PURE__ */ jsxRuntime.jsx(icons.InfoIcon, { className: "h-6 w-6", "aria-hidden": "true" }),
+  success: /* @__PURE__ */ jsxRuntime.jsx(icons.SuccessIcon, { className: "h-6 w-6", "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(icons.WarningIcon, { className: "h-6 w-6", "aria-hidden": "true" }),
+  error: /* @__PURE__ */ jsxRuntime.jsx(icons.ErrorIcon, { className: "h-6 w-6", "aria-hidden": "true" }),
+  neutral: /* @__PURE__ */ jsxRuntime.jsx(icons.InfoIcon, { className: "h-6 w-6", "aria-hidden": "true" })
+};
+var Notice = React__namespace.forwardRef(
+  ({
+    className,
+    variant = "info",
+    closable,
+    title,
+    onClose,
+    icon,
+    hideIcon = false,
+    children,
+    ...props
+  }, ref) => {
+    const displayIcon = icon ?? (variant ? defaultIcons[variant] : null);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: "status",
+        className: cn(noticeVariants({ variant, closable, className })),
+        ...props,
+        children: [
+          !hideIcon && displayIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(noticeIconVariants({ variant })), children: displayIcon }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-base mb-1", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm", children })
+          ] }),
+          closable && onClose && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              className: cn(
+                "absolute right-4 top-4 p-1 rounded-md",
+                "hover:bg-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-current",
+                "transition-colors"
+              ),
+              "aria-label": "Fermer",
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { className: "h-5 w-5", "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Notice.displayName = "Notice";
+
+exports.Notice = Notice;
+exports.noticeVariants = noticeVariants;

package/dist/components/ui/notice.mjs

@@ -0,0 +1,2 @@
+export { Notice, noticeVariants } from '../../chunk-HAAWMTFK.mjs';
+import '../../chunk-SZOFVBTZ.mjs';

package/dist/components/ui/pagination.d.mts

@@ -0,0 +1,100 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface PaginationProps extends React.ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Libellé d'accessibilité pour la navigation
+     */
+    'aria-label'?: string;
+}
+/**
+ * Conteneur de la pagination DSFR
+ */
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Liste des éléments de pagination
+ */
+declare const PaginationContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+/**
+ * Élément de pagination individuel
+ */
+declare const PaginationItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+interface PaginationLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Si true, rend le composant enfant au lieu d'un <a>
+     */
+    asChild?: boolean;
+    /**
+     * Si true, indique que c'est la page actuelle
+     */
+    isActive?: boolean;
+    /**
+     * Si true, désactive le lien
+     */
+    disabled?: boolean;
+}
+/**
+ * Lien de pagination
+ */
+declare const PaginationLink: React.ForwardRefExoticComponent<PaginationLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+/**
+ * Bouton première page
+ */
+declare const PaginationFirst: React.ForwardRefExoticComponent<PaginationLinkProps & {
+    /**
+     * Libellé du bouton (défaut: "Première page")
+     */
+    label?: string;
+    /**
+     * Si true, affiche uniquement l'icône
+     */
+    iconOnly?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
+/**
+ * Bouton page précédente
+ */
+declare const PaginationPrevious: React.ForwardRefExoticComponent<PaginationLinkProps & {
+    /**
+     * Libellé du bouton (défaut: "Page précédente")
+     */
+    label?: string;
+    /**
+     * Si true, affiche uniquement l'icône
+     */
+    iconOnly?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
+/**
+ * Bouton page suivante
+ */
+declare const PaginationNext: React.ForwardRefExoticComponent<PaginationLinkProps & {
+    /**
+     * Libellé du bouton (défaut: "Page suivante")
+     */
+    label?: string;
+    /**
+     * Si true, affiche uniquement l'icône
+     */
+    iconOnly?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
+/**
+ * Bouton dernière page
+ */
+declare const PaginationLast: React.ForwardRefExoticComponent<PaginationLinkProps & {
+    /**
+     * Libellé du bouton (défaut: "Dernière page")
+     */
+    label?: string;
+    /**
+     * Si true, affiche uniquement l'icône
+     */
+    iconOnly?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
+/**
+ * Ellipsis pour indiquer des pages masquées
+ */
+declare const PaginationEllipsis: {
+    ({ className, ...props }: React.ComponentPropsWithoutRef<"span">): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, type PaginationProps };

package/dist/components/ui/pagination.d.ts

@@ -0,0 +1,100 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface PaginationProps extends React.ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Libellé d'accessibilité pour la navigation
+     */
+    'aria-label'?: string;
+}
+/**
+ * Conteneur de la pagination DSFR
+ */
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Liste des éléments de pagination
+ */
+declare const PaginationContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+/**
+ * Élément de pagination individuel
+ */
+declare const PaginationItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+interface PaginationLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Si true, rend le composant enfant au lieu d'un <a>
+     */
+    asChild?: boolean;
+    /**
+     * Si true, indique que c'est la page actuelle
+     */
+    isActive?: boolean;
+    /**
+     * Si true, désactive le lien
+     */
+    disabled?: boolean;
+}
+/**
+ * Lien de pagination
+ */
+declare const PaginationLink: React.ForwardRefExoticComponent<PaginationLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+/**
+ * Bouton première page
+ */
+declare const PaginationFirst: React.ForwardRefExoticComponent<PaginationLinkProps & {
+    /**
+     * Libellé du bouton (défaut: "Première page")
+     */
+    label?: string;
+    /**
+     * Si true, affiche uniquement l'icône
+     */
+    iconOnly?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
+/**
+ * Bouton page précédente
+ */
+declare const PaginationPrevious: React.ForwardRefExoticComponent<PaginationLinkProps & {
+    /**
+     * Libellé du bouton (défaut: "Page précédente")
+     */
+    label?: string;
+    /**
+     * Si true, affiche uniquement l'icône
+     */
+    iconOnly?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
+/**
+ * Bouton page suivante
+ */
+declare const PaginationNext: React.ForwardRefExoticComponent<PaginationLinkProps & {
+    /**
+     * Libellé du bouton (défaut: "Page suivante")
+     */
+    label?: string;
+    /**
+     * Si true, affiche uniquement l'icône
+     */
+    iconOnly?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
+/**
+ * Bouton dernière page
+ */
+declare const PaginationLast: React.ForwardRefExoticComponent<PaginationLinkProps & {
+    /**
+     * Libellé du bouton (défaut: "Dernière page")
+     */
+    label?: string;
+    /**
+     * Si true, affiche uniquement l'icône
+     */
+    iconOnly?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
+/**
+ * Ellipsis pour indiquer des pages masquées
+ */
+declare const PaginationEllipsis: {
+    ({ className, ...props }: React.ComponentPropsWithoutRef<"span">): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, type PaginationProps };