@dsfrkit/cli 0.1.0

package/README.md

@@ -0,0 +1,90 @@
+# @dsfrkit/cli
+
+CLI pour installer et copier les composants DSFR dans votre projet.
+
+## Installation
+
+```bash
+# Via pnpm (recommandé)
+pnpm dlx @dsfrkit/cli init
+
+# Via npx
+npx @dsfrkit/cli init
+
+# Installation globale
+pnpm add -g @dsfrkit/cli
+```
+
+## Commandes
+
+### `init`
+
+Initialise le projet avec la configuration DSFR.
+
+```bash
+dsfrkit init
+```
+
+Cette commande :
+- ✅ Crée le dossier `src/components/ui`
+- ✅ Crée le fichier `src/lib/utils.ts` avec la fonction `cn()`
+- ✅ Configure `tailwind.config.js` avec le preset DSFR
+- ✅ Installe les dépendances nécessaires
+
+### `add`
+
+Ajoute des composants au projet.
+
+```bash
+# Ajouter des composants spécifiques
+dsfrkit add button alert
+
+# Mode interactif
+dsfrkit add
+```
+
+Cette commande copie les composants dans `src/components/ui/` avec toutes leurs dépendances.
+
+## Workflow recommandé
+
+1. **Initialiser le projet**
+   ```bash
+   pnpm dlx @dsfrkit/cli init
+   ```
+
+2. **Ajouter des composants**
+   ```bash
+   pnpm dlx @dsfrkit/cli add button alert card
+   ```
+
+3. **Utiliser les composants**
+   ```tsx
+   import { Button } from '@/components/ui/button'
+   import { Alert } from '@/components/ui/alert'
+
+   function App() {
+     return (
+       <div>
+         <Button variant="primary">Valider</Button>
+         <Alert variant="success">Succès !</Alert>
+       </div>
+     )
+   }
+   ```
+
+4. **Personnaliser selon vos besoins**
+
+   Les composants sont copiés dans votre projet, vous pouvez les modifier librement !
+
+## Composants disponibles
+
+- ✅ `button` - Bouton DSFR avec variants
+- ✅ `alert` - Alerte DSFR
+- 🚧 `card` - Carte (à venir)
+- 🚧 `input` - Champ de formulaire (à venir)
+- 🚧 `modal` - Modale (à venir)
+- 🚧 Plus de composants bientôt...
+
+## License
+
+ETALAB-2.0

package/dist/index.js

@@ -0,0 +1,1132 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command } from "commander";
+
+// src/commands/add.ts
+import path2 from "path";
+import { fileURLToPath } from "url";
+import chalk2 from "chalk";
+import fs2 from "fs-extra";
+import ora2 from "ora";
+import prompts from "prompts";
+
+// src/templates.ts
+var componentTemplates = {
+  button: `import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        primary: 'bg-blue-france-main text-white hover:bg-blue-france-625 focus-visible:ring-blue-france-main',
+        secondary: 'bg-red-marianne-main text-white hover:bg-red-marianne-625 focus-visible:ring-red-marianne-main',
+        tertiary: 'border-2 border-blue-france-main text-blue-france-main hover:bg-blue-france-50 focus-visible:ring-blue-france-main',
+        ghost: 'text-blue-france-main hover:bg-blue-france-50 focus-visible:ring-blue-france-main',
+        error: 'bg-error-main text-white hover:bg-error-625 focus-visible:ring-error-main',
+        success: 'bg-success-main text-white hover:bg-success-625 focus-visible:ring-success-main',
+        warning: 'bg-warning-main text-white hover:bg-warning-625 focus-visible:ring-warning-main',
+      },
+      size: {
+        sm: 'h-9 px-3 text-sm',
+        md: 'h-11 px-5 text-base',
+        lg: 'h-14 px-8 text-lg',
+      },
+      fullWidth: {
+        true: 'w-full',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'md',
+      fullWidth: false,
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, fullWidth, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, fullWidth, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }
+`,
+  alert: `import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border p-4',
+  {
+    variants: {
+      variant: {
+        info: 'border-info-main bg-info-50 text-info-main',
+        success: 'border-success-main bg-success-50 text-success-main',
+        warning: 'border-warning-main bg-warning-50 text-warning-main',
+        error: 'border-error-main bg-error-50 text-error-main',
+      },
+    },
+    defaultVariants: {
+      variant: 'info',
+    },
+  }
+)
+
+export interface AlertProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof alertVariants> {
+  title?: string
+}
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant, title, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="alert"
+        className={cn(alertVariants({ variant }), className)}
+        {...props}
+      >
+        {title && (
+          <h5 className="mb-1 font-bold leading-none tracking-tight">
+            {title}
+          </h5>
+        )}
+        {children && <div className="text-sm">{children}</div>}
+      </div>
+    )
+  }
+)
+
+Alert.displayName = 'Alert'
+
+export { Alert, alertVariants }
+`,
+  card: `import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const cardVariants = cva(
+  'rounded-lg border bg-white transition-shadow',
+  {
+    variants: {
+      variant: {
+        default: 'border-grey-200 shadow-sm hover:shadow-md',
+        bordered: 'border-2 border-blue-france-main',
+        elevated: 'border-grey-200 shadow-lg',
+        ghost: 'border-transparent',
+      },
+      padding: {
+        none: 'p-0',
+        sm: 'p-4',
+        md: 'p-6',
+        lg: 'p-8',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      padding: 'md',
+    },
+  }
+)
+
+export interface CardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof cardVariants> {}
+
+const Card = React.forwardRef<HTMLDivElement, CardProps>(
+  ({ className, variant, padding, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(cardVariants({ variant, padding, className }))}
+        {...props}
+      />
+    )
+  }
+)
+
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex flex-col space-y-1.5', className)}
+    {...props}
+  />
+))
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      'text-2xl font-bold leading-none tracking-tight text-blue-france-main',
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn('text-sm text-grey-500', className)}
+    {...props}
+  />
+))
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('pt-0', className)} {...props} />
+))
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('flex items-center pt-4', className)}
+    {...props}
+  />
+))
+CardFooter.displayName = 'CardFooter'
+
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  cardVariants,
+}
+`,
+  input: `import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const inputVariants = cva(
+  'flex w-full rounded-md border font-marianne text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-grey-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'border-grey-300 bg-white focus-visible:ring-blue-france-main',
+        error: 'border-error-main bg-error-50 focus-visible:ring-error-main',
+        success: 'border-success-main bg-success-50 focus-visible:ring-success-main',
+      },
+      inputSize: {
+        sm: 'h-9 px-3 py-1 text-sm',
+        md: 'h-11 px-4 py-2',
+        lg: 'h-14 px-5 py-3 text-lg',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      inputSize: 'md',
+    },
+  }
+)
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof inputVariants> {
+  label?: string
+  error?: string
+  hint?: string
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, variant, inputSize, label, error, hint, id, ...props }, ref) => {
+    const inputId = id || React.useId()
+    const errorId = \`\${inputId}-error\`
+    const hintId = \`\${inputId}-hint\`
+
+    return (
+      <div className="w-full space-y-2">
+        {label && (
+          <label
+            htmlFor={inputId}
+            className="block text-sm font-medium text-grey-850"
+          >
+            {label}
+            {props.required && <span className="text-error-main ml-1">*</span>}
+          </label>
+        )}
+
+        {hint && !error && (
+          <p id={hintId} className="text-sm text-grey-500">
+            {hint}
+          </p>
+        )}
+
+        <input
+          id={inputId}
+          className={cn(
+            inputVariants({ variant: error ? 'error' : variant, inputSize, className })
+          )}
+          ref={ref}
+          aria-invalid={error ? 'true' : 'false'}
+          aria-describedby={
+            error ? errorId : hint ? hintId : undefined
+          }
+          {...props}
+        />
+
+        {error && (
+          <p id={errorId} className="text-sm text-error-main font-medium">
+            {error}
+          </p>
+        )}
+      </div>
+    )
+  }
+)
+
+Input.displayName = 'Input'
+
+const textareaVariants = cva(
+  'flex min-h-[80px] w-full rounded-md border font-marianne text-base transition-colors placeholder:text-grey-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-y',
+  {
+    variants: {
+      variant: {
+        default: 'border-grey-300 bg-white focus-visible:ring-blue-france-main',
+        error: 'border-error-main bg-error-50 focus-visible:ring-error-main',
+        success: 'border-success-main bg-success-50 focus-visible:ring-success-main',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    VariantProps<typeof textareaVariants> {
+  label?: string
+  error?: string
+  hint?: string
+}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, variant, label, error, hint, id, ...props }, ref) => {
+    const textareaId = id || React.useId()
+    const errorId = \`\${textareaId}-error\`
+    const hintId = \`\${textareaId}-hint\`
+
+    return (
+      <div className="w-full space-y-2">
+        {label && (
+          <label
+            htmlFor={textareaId}
+            className="block text-sm font-medium text-grey-850"
+          >
+            {label}
+            {props.required && <span className="text-error-main ml-1">*</span>}
+          </label>
+        )}
+
+        {hint && !error && (
+          <p id={hintId} className="text-sm text-grey-500">
+            {hint}
+          </p>
+        )}
+
+        <textarea
+          id={textareaId}
+          className={cn(
+            textareaVariants({ variant: error ? 'error' : variant, className }),
+            'px-4 py-2'
+          )}
+          ref={ref}
+          aria-invalid={error ? 'true' : 'false'}
+          aria-describedby={
+            error ? errorId : hint ? hintId : undefined
+          }
+          {...props}
+        />
+
+        {error && (
+          <p id={errorId} className="text-sm text-error-main font-medium">
+            {error}
+          </p>
+        )}
+      </div>
+    )
+  }
+)
+
+Textarea.displayName = 'Textarea'
+
+export { Input, inputVariants, Textarea, textareaVariants }
+`,
+  modal: `import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const Modal = DialogPrimitive.Root
+const ModalTrigger = DialogPrimitive.Trigger
+const ModalPortal = DialogPrimitive.Portal
+const ModalClose = DialogPrimitive.Close
+
+const ModalOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-grey-1000/50 backdrop-blur-sm',
+      className
+    )}
+    {...props}
+  />
+))
+ModalOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const modalContentVariants = cva(
+  'fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white p-6 shadow-2xl rounded-lg border-grey-200',
+  {
+    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',
+    },
+  }
+)
+
+export interface ModalContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
+    VariantProps<typeof modalContentVariants> {}
+
+const ModalContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  ModalContentProps
+>(({ className, children, size, ...props }, ref) => (
+  <ModalPortal>
+    <ModalOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(modalContentVariants({ size, className }))}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100">
+        <svg className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+          <path d="M18 6 6 18M6 6l12 12" />
+        </svg>
+        <span className="sr-only">Fermer</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </ModalPortal>
+))
+ModalContent.displayName = DialogPrimitive.Content.displayName
+
+const ModalHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-1.5', className)} {...props} />
+)
+ModalHeader.displayName = 'ModalHeader'
+
+const ModalFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+)
+ModalFooter.displayName = 'ModalFooter'
+
+const ModalTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-2xl font-bold text-blue-france-main', className)}
+    {...props}
+  />
+))
+ModalTitle.displayName = DialogPrimitive.Title.displayName
+
+const ModalDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-grey-500', className)}
+    {...props}
+  />
+))
+ModalDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Modal,
+  ModalPortal,
+  ModalOverlay,
+  ModalClose,
+  ModalTrigger,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalTitle,
+  ModalDescription,
+}
+`,
+  select: `import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { cn } from '@/lib/utils'
+
+const Select = SelectPrimitive.Root
+const SelectGroup = SelectPrimitive.Group
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-11 w-full items-center justify-between rounded-md border border-grey-300 bg-white px-4 py-2 text-base',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <svg className="h-4 w-4 opacity-50" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+        <path d="m6 9 6 6 6-6" />
+      </svg>
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-grey-200 bg-white shadow-md',
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectPrimitive.Viewport className="p-1">
+        {children}
+      </SelectPrimitive.Viewport>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-blue-france-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <svg className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+          <path d="M20 6 9 17l-5-5" />
+        </svg>
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+}
+`,
+  "theme-artwork": `import type * as React from 'react'
+
+export const ThemeArtworkLight = (props: React.SVGProps<SVGSVGElement>) => (
+	<svg aria-hidden="true" className="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px" {...props}>
+		<use className="fr-artwork-decorative" href="/dist/artwork/pictograms/environment/sun.svg#artwork-decorative" />
+		<use className="fr-artwork-minor" href="/dist/artwork/pictograms/environment/sun.svg#artwork-minor" />
+		<use className="fr-artwork-major" href="/dist/artwork/pictograms/environment/sun.svg#artwork-major" />
+	</svg>
+)
+
+export const ThemeArtworkDark = (props: React.SVGProps<SVGSVGElement>) => (
+	<svg aria-hidden="true" className="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px" {...props}>
+		<use className="fr-artwork-decorative" href="/dist/artwork/pictograms/environment/moon.svg#artwork-decorative" />
+		<use className="fr-artwork-minor" href="/dist/artwork/pictograms/environment/moon.svg#artwork-minor" />
+		<use className="fr-artwork-major" href="/dist/artwork/pictograms/environment/moon.svg#artwork-major" />
+	</svg>
+)
+
+export const ThemeArtworkSystem = (props: React.SVGProps<SVGSVGElement>) => (
+	<svg aria-hidden="true" className="fr-artwork" viewBox="0 0 80 80" width="80px" height="80px" {...props}>
+		<use className="fr-artwork-decorative" href="/dist/artwork/pictograms/system/system.svg#artwork-decorative" />
+		<use className="fr-artwork-minor" href="/dist/artwork/pictograms/system/system.svg#artwork-minor" />
+		<use className="fr-artwork-major" href="/dist/artwork/pictograms/system/system.svg#artwork-major" />
+	</svg>
+)
+`,
+  "theme-toggle": `import * as React from 'react'
+import { useTheme } from 'next-themes'
+import { Button, type ButtonProps } from './button'
+import { Modal, ModalContent, ModalDescription, ModalHeader, ModalTitle, ModalTrigger } from './modal'
+import { RadioGroup, RadioGroupItem } from './radio'
+import { ThemeArtworkDark, ThemeArtworkLight, ThemeArtworkSystem } from './theme-artwork'
+
+export interface ThemeToggleProps extends Omit<ButtonProps, 'icon' | 'iconPosition'> {
+    /** 
+     * Si true, le bouton n'affiche que l'ic\xF4ne, sans le texte.
+     */
+    iconOnly?: boolean
+}
+
+/**
+ * Composant de s\xE9lection du th\xE8me (Param\xE8tres d'affichage)
+ */
+export function ThemeToggle({
+    size = 'md',
+    iconOnly = false,
+    className,
+    variant = 'ghost',
+    ...props
+}: ThemeToggleProps) {
+    const { theme, setTheme } = useTheme()
+    const [open, setOpen] = React.useState(false)
+
+    const currentTheme = theme ?? 'system'
+
+    const triggerIcon = (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" className="fill-current w-[1em] h-[1em]">
+            <path d="M13 20v3h-2v-3h2Zm5.364-3.05 2.121 2.121-1.414 1.414-2.121-2.121 1.414-1.414Zm-12.728 0 1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121ZM12 6a6 6 0 1 1 0 12 6 6 0 0 1 0-12Zm0 2a4 4 0 0 0-.2 7.995L12 16V8Zm-8 3v2H1v-2h3Zm19 0v2h-3v-2h3ZM4.929 3.515 7.05 5.636 5.636 7.05 3.515 4.93v-.001l1.414-1.414Zm14.142-.001 1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121v-.001ZM13 1v3h-2V1h2Z" />
+        </svg>
+    )
+
+    const triggerLabel = "Param\xE8tres d'affichage"
+
+    return (
+        <Modal open={open} onOpenChange={setOpen}>
+            <ModalTrigger asChild>
+                <Button
+                    variant={variant}
+                    size={size}
+                    className={className}
+                    aria-label={iconOnly ? triggerLabel : undefined}
+                    icon={triggerIcon}...props
+                >!iconOnly && triggerLabel
+                </Button>
+            </ModalTrigger>
+
+            <ModalContent className="sm:max-w-[480px]">
+                <ModalHeader className="border-b-0 pb-0">
+                    <ModalTitle>Param\xE8tres d'affichage</ModalTitle>
+                    <ModalDescription>Choisissez un th\xE8me pour personnaliser l'apparence du site.</ModalDescription>
+                </ModalHeader>
+
+                <div className="py-6 px-2">
+                    <RadioGroup
+                        value=currentTheme
+                        onValueChange={(val) => setTheme(val)}
+                        className="flex flex-col gap-6 justify-center"
+                    >
+                        <ThemeOption value="light" label="Th\xE8me clair" Artwork={ThemeArtworkLight} />
+                        <ThemeOption value="dark" label="Th\xE8me sombre" Artwork={ThemeArtworkDark} />
+                        <ThemeOption value="system" label="Syst\xE8me" Artwork={ThemeArtworkSystem} hint="Utilise les param\xE8tres syst\xE8me" />
+                    </RadioGroup>
+                </div>
+            </ModalContent>
+        </Modal>
+    )
+}
+
+function ThemeOption({
+    value,
+    label,
+    hint,
+    Artwork,
+}: {
+    value: string
+    label: string
+    hint?: string
+    Artwork: React.ElementType
+}
+)
+{
+  const id = React.useId()
+
+  return (
+        <label htmlFor={id}
+  className =
+    "flex flex-row items-center cursor-pointer border border-border hover:bg-muted focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 transition-colors">
+            <div className =
+    "flex-1 px-6 py-6 border-r border-border flex items-center h-[96px]">
+                <RadioGroupItem value =
+      { value }
+  id = { id }
+  label = { label }
+  hint = { hint }
+  className="mb-0" />
+            </div>
+            <div
+  className =
+    "w-[124px] h-[96px] shrink-0 flex items-center justify-center bg-background-alt overflow-hidden">
+                <Artwork className = 'w-20 h-20'
+  aria-hidden="true" />
+            </div>
+        </label>
+  )
+}
+`
+};
+
+// src/commands/fetch-artworks.ts
+import path from "path";
+import chalk from "chalk";
+import { execa } from "execa";
+import fs from "fs-extra";
+import ora from "ora";
+async function fetchArtworks() {
+  console.log(chalk.bold.blue("\n\u{1F1EB}\u{1F1F7} T\xE9l\xE9chargement des Artworks DSFR\n"));
+  const spinner = ora("T\xE9l\xE9chargement depuis le d\xE9p\xF4t officiel...").start();
+  try {
+    const publicDir = path.join(process.cwd(), "public");
+    if (!await fs.pathExists(publicDir)) {
+      await fs.ensureDir(publicDir);
+    }
+    const targetDir = path.join(publicDir, "dist", "artwork");
+    const tmpDir = path.join(process.cwd(), "node_modules", ".cache", `dsfr-fetch-${Date.now()}`);
+    await fs.ensureDir(tmpDir);
+    try {
+      await execa(
+        "git",
+        [
+          "clone",
+          "--depth",
+          "1",
+          "--filter=blob:none",
+          "--sparse",
+          "https://github.com/GouvernementFR/dsfr.git",
+          "."
+        ],
+        { cwd: tmpDir }
+      );
+      await execa("git", ["sparse-checkout", "set", "src/dsfr/core/asset/artwork"], { cwd: tmpDir });
+      await fs.ensureDir(targetDir);
+      const sourceDir = path.join(tmpDir, "src", "dsfr", "core", "asset", "artwork");
+      await fs.copy(sourceDir, targetDir, { overwrite: true });
+      spinner.succeed("Artworks t\xE9l\xE9charg\xE9s avec succ\xE8s !");
+      console.log(
+        chalk.dim(`
+Les fichiers ont \xE9t\xE9 copi\xE9s dans : ${chalk.bold("public/dist/artwork")}`)
+      );
+      console.log(chalk.dim("Vous pouvez maintenant utiliser les composants comme ThemeToggle.\n"));
+    } finally {
+      await fs.remove(tmpDir).catch(() => {
+      });
+    }
+  } catch (error) {
+    spinner.fail("Erreur lors du t\xE9l\xE9chargement des artworks.");
+    console.error(error);
+    throw error;
+  }
+}
+
+// src/commands/add.ts
+var __dirname2 = path2.dirname(fileURLToPath(import.meta.url));
+var AVAILABLE_COMPONENTS = {
+  button: {
+    name: "Button",
+    files: ["button.tsx"],
+    dependencies: ["class-variance-authority", "clsx", "tailwind-merge"]
+  },
+  alert: {
+    name: "Alert",
+    files: ["alert.tsx"],
+    dependencies: ["class-variance-authority", "clsx", "tailwind-merge"]
+  },
+  card: {
+    name: "Card",
+    files: ["card.tsx"],
+    dependencies: ["class-variance-authority", "clsx", "tailwind-merge"]
+  },
+  input: {
+    name: "Input",
+    files: ["input.tsx"],
+    dependencies: ["class-variance-authority", "clsx", "tailwind-merge"]
+  },
+  modal: {
+    name: "Modal",
+    files: ["modal.tsx"],
+    dependencies: ["class-variance-authority", "clsx", "tailwind-merge", "@radix-ui/react-dialog"]
+  },
+  select: {
+    name: "Select",
+    files: ["select.tsx"],
+    dependencies: ["class-variance-authority", "clsx", "tailwind-merge", "@radix-ui/react-select"]
+  },
+  themetoggle: {
+    name: "ThemeToggle",
+    files: ["theme-toggle.tsx", "theme-artwork.tsx"],
+    dependencies: ["@radix-ui/react-dialog", "@radix-ui/react-radio-group"]
+  }
+};
+async function add(components) {
+  console.log(chalk2.bold.blue("\n\u{1F1EB}\u{1F1F7} Ajout de composants DSFR\n"));
+  let selectedComponents = [];
+  if (!components || components.length === 0) {
+    const response = await prompts({
+      type: "multiselect",
+      name: "components",
+      message: "Quels composants voulez-vous ajouter ?",
+      choices: Object.entries(AVAILABLE_COMPONENTS).map(([key, value]) => ({
+        title: value.name,
+        value: key
+      }))
+    });
+    if (!response.components || response.components.length === 0) {
+      console.log(chalk2.yellow("\u274C Aucun composant s\xE9lectionn\xE9"));
+      process.exit(0);
+    }
+    selectedComponents = response.components;
+  } else {
+    selectedComponents = components.filter((c) => {
+      if (!(c in AVAILABLE_COMPONENTS)) {
+        console.log(chalk2.yellow(`\u26A0\uFE0F  Composant inconnu : ${c}`));
+        return false;
+      }
+      return true;
+    });
+    if (selectedComponents.length === 0) {
+      console.log(chalk2.red("\u274C Aucun composant valide"));
+      console.log(
+        chalk2.dim(`Composants disponibles : ${Object.keys(AVAILABLE_COMPONENTS).join(", ")}`)
+      );
+      process.exit(1);
+    }
+  }
+  const componentsPath = await detectComponentsPath();
+  for (const componentName of selectedComponents) {
+    const spinner = ora2(`Ajout de ${AVAILABLE_COMPONENTS[componentName].name}...`).start();
+    try {
+      await copyComponent(componentName, componentsPath);
+      spinner.succeed(`${AVAILABLE_COMPONENTS[componentName].name} ajout\xE9`);
+      if (componentName === "themetoggle") {
+        spinner.text = "T\xE9l\xE9chargement des Artworks DSFR requis pour ThemeToggle...";
+        try {
+          await fetchArtworks();
+        } catch (_e) {
+          spinner.warn(
+            "Les artworks n'ont pas pu \xEAtre t\xE9l\xE9charg\xE9s. Ex\xE9cutez `dsfrkit fetch-artworks`."
+          );
+        }
+      }
+    } catch (error) {
+      spinner.fail(`Erreur lors de l'ajout de ${AVAILABLE_COMPONENTS[componentName].name}`);
+      console.error(error);
+    }
+  }
+  console.log(chalk2.green("\n\u2705 Composants ajout\xE9s avec succ\xE8s !\n"));
+  console.log(chalk2.dim("Vous pouvez maintenant les utiliser :"));
+  for (const name of selectedComponents) {
+    console.log(
+      chalk2.dim(`  import { ${AVAILABLE_COMPONENTS[name].name} } from '@/components/ui/${name}'`)
+    );
+  }
+  console.log();
+}
+async function detectComponentsPath() {
+  const possiblePaths = ["src/components/ui", "components/ui", "app/components/ui"];
+  for (const p of possiblePaths) {
+    if (await fs2.pathExists(path2.join(process.cwd(), p))) {
+      return p;
+    }
+  }
+  const defaultPath = "src/components/ui";
+  await fs2.ensureDir(path2.join(process.cwd(), defaultPath));
+  return defaultPath;
+}
+async function copyComponent(name, targetPath) {
+  const component = AVAILABLE_COMPONENTS[name];
+  for (const file of component.files) {
+    const targetFile = path2.join(process.cwd(), targetPath, file);
+    const templateKey = file.replace(".tsx", "");
+    const template = componentTemplates[templateKey];
+    if (template) {
+      await fs2.writeFile(targetFile, template);
+    }
+  }
+}
+
+// src/commands/init.ts
+import path3 from "path";
+import { fileURLToPath as fileURLToPath2 } from "url";
+import chalk3 from "chalk";
+import { execa as execa2 } from "execa";
+import fs3 from "fs-extra";
+import ora3 from "ora";
+import prompts2 from "prompts";
+var __dirname3 = path3.dirname(fileURLToPath2(import.meta.url));
+async function init() {
+  console.log(chalk3.bold.blue("\n\u{1F1EB}\u{1F1F7} Initialisation du projet DSFRKit\n"));
+  const packageManager = await detectPackageManager();
+  const response = await prompts2([
+    {
+      type: "text",
+      name: "componentsPath",
+      message: "O\xF9 voulez-vous stocker les composants ?",
+      initial: "src/components/ui"
+    },
+    {
+      type: "confirm",
+      name: "installDeps",
+      message: "Installer les d\xE9pendances n\xE9cessaires ?",
+      initial: true
+    },
+    {
+      type: "confirm",
+      name: "fetchArtworks",
+      message: "T\xE9l\xE9charger les ic\xF4nes et SVG officiels DSFR (recommand\xE9) ?",
+      initial: true
+    },
+    {
+      type: "multiselect",
+      name: "llmTools",
+      message: "Quels outils d'assistance IA utilisez-vous ? (Optionnel)",
+      choices: [
+        { title: "GitHub Copilot", value: "copilot" },
+        { title: "Claude Code", value: "claude" },
+        { title: "Cursor", value: "cursor" },
+        { title: "Windsurf", value: "windsurf" },
+        { title: "OpenAI Codex", value: "codex" },
+        { title: "Autre (AGENTS.md)", value: "agents" }
+      ],
+      instructions: false,
+      hint: "- Espace pour s\xE9lectionner. Entr\xE9e pour valider (vide pour ignorer)."
+    }
+  ]);
+  if (!response.componentsPath) {
+    console.log(chalk3.yellow("\u274C Initialisation annul\xE9e"));
+    process.exit(0);
+  }
+  const spinner = ora3("Configuration en cours...").start();
+  try {
+    const componentsDir = path3.join(process.cwd(), response.componentsPath);
+    await fs3.ensureDir(componentsDir);
+    const libDir = path3.join(process.cwd(), "src/lib");
+    await fs3.ensureDir(libDir);
+    const utilsContent = `import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+`;
+    await fs3.writeFile(path3.join(libDir, "utils.ts"), utilsContent);
+    await createTailwindConfig();
+    spinner.succeed("Configuration cr\xE9\xE9e avec succ\xE8s");
+    if (response.installDeps) {
+      const depsSpinner = ora3("Installation des d\xE9pendances...").start();
+      try {
+        await execa2(packageManager, [
+          packageManager === "npm" ? "install" : "add",
+          "-D",
+          "@dsfrkit/config",
+          "tailwindcss",
+          "class-variance-authority",
+          "clsx",
+          "tailwind-merge"
+        ]);
+        depsSpinner.succeed("D\xE9pendances de d\xE9veloppement install\xE9es");
+      } catch (error) {
+        depsSpinner.fail("Erreur lors de l'installation des d\xE9pendances de d\xE9veloppement");
+        console.error(error);
+      }
+      async function findMonorepoRoot() {
+        let dir = process.cwd();
+        while (true) {
+          if (await fs3.pathExists(path3.join(dir, "pnpm-workspace.yaml"))) return dir;
+          const pkgPath = path3.join(dir, "package.json");
+          if (await fs3.pathExists(pkgPath)) {
+            try {
+              const pkg = await fs3.readJSON(pkgPath);
+              if (pkg.workspaces) return dir;
+            } catch {
+            }
+          }
+          const parent = path3.dirname(dir);
+          if (parent === dir) break;
+          dir = parent;
+        }
+        return null;
+      }
+      const monorepoRoot = await findMonorepoRoot();
+      const tokensSpecifier = packageManager === "pnpm" && monorepoRoot ? "@dsfrkit/tokens@workspace:*" : "@dsfrkit/tokens";
+      const tokensSpinner = ora3(`Installation de ${tokensSpecifier}...`).start();
+      try {
+        await execa2(packageManager, [packageManager === "npm" ? "install" : "add", tokensSpecifier]);
+        tokensSpinner.succeed(`${tokensSpecifier} install\xE9`);
+      } catch (error) {
+        tokensSpinner.fail("Erreur lors de l'installation de @dsfrkit/tokens");
+        console.error(error);
+      }
+    }
+    if (response.fetchArtworks) {
+      try {
+        await fetchArtworks();
+      } catch (_e) {
+        console.log(
+          chalk3.yellow(
+            "\n\u26A0\uFE0F  Le t\xE9l\xE9chargement des artworks a \xE9chou\xE9. Vous pourrez r\xE9essayer avec la commande: dsfrkit fetch-artworks\n"
+          )
+        );
+      }
+    }
+    if (response.llmTools && response.llmTools.length > 0) {
+      const llmSpinner = ora3("Cr\xE9ation des instructions IA...").start();
+      try {
+        const aiRulesContent = `# R\xC8GLES DSFRKIT POUR LES IA
+Tu utilises la librairie @dsfrkit/react. N'\xE9cris JAMAIS de composants d'UI en HTML brut ou classes Tailwind.
+Pour la documentation compl\xE8te et \xE0 jour de tous les composants (props, exemples, layouts), r\xE9f\xE8re-toi toujours \xE0 ce fichier :
+https://ra-nouvelle-aquitaine.github.io/dsfrkit/llms.txt
+`;
+        const tools = response.llmTools;
+        for (const tool of tools) {
+          if (tool === "copilot") {
+            const githubDir = path3.join(process.cwd(), ".github");
+            await fs3.ensureDir(githubDir);
+            await fs3.writeFile(path3.join(githubDir, "copilot-instructions.md"), aiRulesContent);
+          } else if (tool === "claude") {
+            await fs3.writeFile(path3.join(process.cwd(), "clauderc.md"), aiRulesContent);
+          } else if (tool === "cursor") {
+            await fs3.writeFile(path3.join(process.cwd(), ".cursorrules"), aiRulesContent);
+          } else if (tool === "windsurf") {
+            await fs3.writeFile(path3.join(process.cwd(), ".windsurfrules"), aiRulesContent);
+          } else if (tool === "agents" || tool === "codex") {
+            await fs3.writeFile(path3.join(process.cwd(), "AGENTS.md"), aiRulesContent);
+          }
+        }
+        const list = tools.join(", ");
+        llmSpinner.succeed(`Fichiers d'instructions IA g\xE9n\xE9r\xE9s pour : ${list}`);
+      } catch (_error) {
+        llmSpinner.fail("Erreur lors de la cr\xE9ation des fichiers d'instructions IA");
+      }
+    }
+    console.log(chalk3.green("\n\u2705 Projet initialis\xE9 avec succ\xE8s !\n"));
+    console.log(chalk3.dim("Prochaines \xE9tapes :"));
+    console.log(chalk3.dim(`  1. V\xE9rifiez votre ${chalk3.bold("tailwind.config.js")}`));
+    console.log(
+      chalk3.dim(`  2. Ajoutez des composants : ${chalk3.bold("dsfrkit add button alert")}`)
+    );
+    console.log();
+  } catch (error) {
+    spinner.fail("Erreur lors de la configuration");
+    console.error(error);
+    process.exit(1);
+  }
+}
+async function detectPackageManager() {
+  if (await fs3.pathExists("pnpm-lock.yaml")) return "pnpm";
+  if (await fs3.pathExists("yarn.lock")) return "yarn";
+  if (await fs3.pathExists("bun.lockb")) return "bun";
+  return "npm";
+}
+async function createTailwindConfig() {
+  const configPath = path3.join(process.cwd(), "tailwind.config.js");
+  const configContent = `import dsfrPreset from '@dsfrkit/config'
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  presets: [dsfrPreset],
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+`;
+  if (await fs3.pathExists(configPath)) {
+    console.log(chalk3.yellow("\n\u26A0\uFE0F  tailwind.config.js existe d\xE9j\xE0"));
+    console.log(chalk3.dim("Ajoutez manuellement le preset :"));
+    console.log(chalk3.dim("  presets: [dsfrPreset]"));
+  } else {
+    await fs3.writeFile(configPath, configContent);
+  }
+}
+
+// src/index.ts
+var program = new Command();
+program.name("dsfrkit").description("CLI pour le Syst\xE8me de Design de l'\xC9tat fran\xE7ais (DSFR)").version("0.1.0");
+program.command("init").description("Initialiser le projet avec la configuration DSFR").action(init);
+program.command("add").description("Ajouter des composants au projet").argument("[components...]", "Composants \xE0 ajouter (ex: button alert)").action(add);
+program.command("fetch-artworks").description("T\xE9l\xE9charge les SVG officiels DSFR dans le dossier public/dist/artwork").action(fetchArtworks);
+program.parse();

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@dsfrkit/cli",
+  "version": "0.1.0",
+  "description": "CLI pour installer et copier les composants DSFR",
+  "bin": {
+    "dsfrkit": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "type": "module",
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "keywords": [
+    "dsfr",
+    "cli",
+    "components",
+    "tailwindcss"
+  ],
+  "license": "ETALAB-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^12.1.0",
+    "execa": "^9.5.2",
+    "fs-extra": "^11.2.0",
+    "ora": "^8.1.1",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/prompts": "^2.4.9",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  }
+}