Merge pull request #42 from T-DAT-902-Homepedia/feat/carte-control-panel

feat(webapp): redesign price map control panel

Author: glopez-dev

src/components/ui/checkbox.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import { Check } from "lucide-react"
+import { Checkbox as CheckboxPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+/** Case à cocher du design system : accent à l'état coché. */
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "flex size-4 shrink-0 items-center justify-center rounded border border-input bg-background outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-accent data-[state=checked]:bg-accent",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator>
+        <Check className="size-3 text-accent-foreground" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

src/components/ui/segmented-control.tsx

@@ -0,0 +1,63 @@
+import * as React from "react"
+import { ToggleGroup } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+export interface SegmentedItem<T extends string> {
+  value: T
+  label: string
+  /** Icône optionnelle (dimensionnée par le contrôle, ~14px). */
+  icon?: React.ReactNode
+  /** Info-bulle native — utile pour expliquer un terme (« Choroplèthe »). */
+  title?: string
+}
+
+/**
+ * Contrôle segmenté (choix exclusif, toujours une option active) basé sur
+ * Radix ToggleGroup type="single" : sémantique radio (role, aria-checked)
+ * et navigation clavier fournies par Radix.
+ */
+export function SegmentedControl<T extends string>({
+  value,
+  onValueChange,
+  items,
+  className,
+  ...props
+}: {
+  value: T
+  onValueChange: (value: T) => void
+  items: SegmentedItem<T>[]
+  /** Libellé accessible du groupe. */
+  "aria-label": string
+  className?: string
+}) {
+  return (
+    <ToggleGroup.Root
+      type="single"
+      value={value}
+      // Piège Radix : re-cliquer l'option active émet "" (désélection).
+      // On l'ignore pour garantir qu'une option reste toujours sélectionnée.
+      onValueChange={(v) => {
+        if (v) onValueChange(v as T)
+      }}
+      data-slot="segmented-control"
+      className={cn(
+        "flex w-full items-center gap-0.5 rounded-lg border border-input bg-muted/60 p-0.5",
+        className
+      )}
+      {...props}
+    >
+      {items.map((item) => (
+        <ToggleGroup.Item
+          key={item.value}
+          value={item.value}
+          title={item.title}
+          className="inline-flex h-6 flex-1 items-center justify-center gap-1 rounded-md px-1.5 text-xs font-medium whitespace-nowrap text-muted-foreground transition-colors outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:size-3.5 [&_svg]:shrink-0"
+        >
+          {item.icon}
+          {item.label}
+        </ToggleGroup.Item>
+      ))}
+    </ToggleGroup.Root>
+  )
+}