@contractspec/lib.ui-kit-web 1.57.0 → 1.58.0

package/dist/ui/molecules/SearchAndFilter/SearchAndFilter.js

@@ -1,103 +1,498 @@
-import { Button } from "../../button.js";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../collapsible.js";
-import { FilterSelect } from "../../atoms/FilterSelect/FilterSelect.js";
-import { SearchInput } from "../../atoms/SearchInput/SearchInput.js";
-import React, { useState } from "react";
-import { ChevronDown, ChevronUp, Filter } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+// @bun
+var __require = import.meta.require;
 
-//#region ui/molecules/SearchAndFilter/SearchAndFilter.tsx
-const SearchAndFilter = ({ searchValue, onSearchChange, searchPlaceholder, filters = [], isLoading = false, disabled = false, className = "", collapsible = true, defaultCollapsed = false }) => {
-	const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
-	const hasFilters = filters.length > 0;
-	const activeFiltersCount = filters.filter((f) => f.value).length;
-	const shouldUseCollapsible = collapsible && hasFilters;
-	console.log("SearchAndFilter", { filters });
-	const FilterComponents = () => /* @__PURE__ */ jsx("div", {
-		className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
-		children: filters.map((filter) => /* @__PURE__ */ jsx(FilterSelect, {
-			value: filter.value,
-			options: filter.options,
-			onChange: filter.onChange,
-			label: filter.label,
-			disabled: disabled || isLoading,
-			showCounts: filter.showCounts,
-			className: "min-w-0"
-		}, filter.key))
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: `space-y-4 ${className}`,
-		children: [
-			/* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col gap-4 sm:flex-row",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "flex-1",
-					children: /* @__PURE__ */ jsx(SearchInput, {
-						value: searchValue,
-						onChange: onSearchChange,
-						placeholder: searchPlaceholder,
-						disabled: disabled || isLoading,
-						className: "w-full"
-					})
-				}), shouldUseCollapsible && /* @__PURE__ */ jsxs(Collapsible, {
-					open: !isCollapsed,
-					onOpenChange: setIsCollapsed,
-					className: "sm:hidden",
-					children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
-						asChild: true,
-						children: /* @__PURE__ */ jsxs(Button, {
-							variant: "outline",
-							className: "sm:hidden",
-							disabled: disabled || isLoading,
-							children: [
-								/* @__PURE__ */ jsx(Filter, { className: "mr-2 h-4 w-4" }),
-								"Filtres",
-								activeFiltersCount > 0 && /* @__PURE__ */ jsx("span", {
-									className: "bg-primary text-primary-foreground ml-2 flex h-5 w-5 items-center justify-center rounded-full text-sm",
-									children: activeFiltersCount
-								}),
-								isCollapsed ? /* @__PURE__ */ jsx(ChevronDown, { className: "ml-2 h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronUp, { className: "ml-2 h-4 w-4" })
-							]
-						})
-					}), /* @__PURE__ */ jsx(CollapsibleContent, {
-						className: "mt-4 space-y-4",
-						children: /* @__PURE__ */ jsx(FilterComponents, {})
-					})]
-				})]
-			}),
-			hasFilters && /* @__PURE__ */ jsx("div", {
-				className: "hidden sm:block",
-				children: /* @__PURE__ */ jsx(FilterComponents, {})
-			}),
-			activeFiltersCount > 0 && /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-wrap items-center gap-2",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "text-muted-foreground text-base",
-					children: "Filtres actifs:"
-				}), filters.filter((f) => f.value).map((filter) => {
-					const selectedOption = filter.options.find((opt) => opt.value === filter.value);
-					return /* @__PURE__ */ jsxs(Button, {
-						variant: "secondary",
-						size: "sm",
-						onClick: () => filter.onChange(""),
-						disabled: disabled || isLoading,
-						className: "h-7 px-2 text-sm",
-						children: [
-							filter.label,
-							": ",
-							selectedOption?.label,
-							/* @__PURE__ */ jsx("span", {
-								className: "ml-1",
-								children: "×"
-							})
-						]
-					}, filter.key);
-				})]
-			})
-		]
-	});
+// ui/button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground hover:bg-primary/90",
+      destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+      outline: "border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+      link: "text-primary underline-offset-4 hover:underline"
+    },
+    size: {
+      default: "h-9 px-4 py-2 has-[>svg]:px-3",
+      sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+      lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+      icon: "size-9"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+var Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+  if (asChild) {
+    return /* @__PURE__ */ jsxDEV(Slot, {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV("button", {
+    ref,
+    "data-slot": "button",
+    className: cn(buttonVariants({ variant, size, className })),
+    ...props
+  }, undefined, false, undefined, this);
+});
+Button.displayName = "Button";
+// ui/select.tsx
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+function Select({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(SelectPrimitive.Root, {
+    "data-slot": "select",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function SelectGroup({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(SelectPrimitive.Group, {
+    "data-slot": "select-group",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function SelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(SelectPrimitive.Value, {
+    "data-slot": "select-value",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(SelectPrimitive.Trigger, {
+    "data-slot": "select-trigger",
+    "data-size": size,
+    className: cn2("aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border-input focus-visible:border-ring focus-visible:ring-ring/50 data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-2xs outline-hidden transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsxDEV2(SelectPrimitive.Icon, {
+        asChild: true,
+        children: /* @__PURE__ */ jsxDEV2(ChevronDownIcon, {
+          className: "size-4 opacity-50"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(SelectPrimitive.Portal, {
+    children: /* @__PURE__ */ jsxDEV2(SelectPrimitive.Content, {
+      "data-slot": "select-content",
+      className: cn2("bg-popover text-popover-foreground 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
+      position,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxDEV2(SelectScrollUpButton, {}, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV2(SelectPrimitive.Viewport, {
+          className: cn2("p-1", position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"),
+          children
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV2(SelectScrollDownButton, {}, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function SelectLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(SelectPrimitive.Label, {
+    "data-slot": "select-label",
+    className: cn2("text-muted-foreground px-2 py-1.5 text-xs", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(SelectPrimitive.Item, {
+    "data-slot": "select-item",
+    className: cn2("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-xs py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxDEV2("span", {
+        className: "absolute right-2 flex size-3.5 items-center justify-center",
+        children: /* @__PURE__ */ jsxDEV2(SelectPrimitive.ItemIndicator, {
+          children: /* @__PURE__ */ jsxDEV2(CheckIcon, {
+            className: "size-4"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2(SelectPrimitive.ItemText, {
+        children
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function SelectSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(SelectPrimitive.Separator, {
+    "data-slot": "select-separator",
+    className: cn2("bg-border pointer-events-none -mx-1 my-1 h-px", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(SelectPrimitive.ScrollUpButton, {
+    "data-slot": "select-scroll-up-button",
+    className: cn2("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsxDEV2(ChevronUpIcon, {
+      className: "size-4"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(SelectPrimitive.ScrollDownButton, {
+    "data-slot": "select-scroll-down-button",
+    className: cn2("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsxDEV2(ChevronDownIcon, {
+      className: "size-4"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+// ui/label.tsx
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn as cn3 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+"use client";
+function Label2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(LabelPrimitive.Root, {
+    "data-slot": "label",
+    className: cn3("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/atoms/FilterSelect/FilterSelect.tsx
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+var FilterSelect = ({
+  value,
+  options,
+  onChange,
+  placeholder = "S\xE9lectionner...",
+  label,
+  disabled = false,
+  className = "",
+  showCounts = false
+}) => {
+  return /* @__PURE__ */ jsxDEV4("div", {
+    className: `space-y-2 ${className}`,
+    children: [
+      label && /* @__PURE__ */ jsxDEV4(Label2, {
+        className: "text-foreground text-base font-medium",
+        children: label
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4(Select, {
+        value,
+        onValueChange: onChange,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsxDEV4(SelectTrigger, {
+            className: "w-full",
+            children: /* @__PURE__ */ jsxDEV4(SelectValue, {
+              placeholder
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4(SelectContent, {
+            className: "bg-background",
+            children: [
+              /* @__PURE__ */ jsxDEV4(SelectItem, {
+                value: "all",
+                children: [
+                  "Tous",
+                  showCounts && /* @__PURE__ */ jsxDEV4("span", {
+                    className: "text-muted-foreground ml-2 text-sm",
+                    children: [
+                      "(",
+                      options.reduce((sum, option) => sum + (option.count || 0), 0),
+                      ")"
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              options.map((option) => /* @__PURE__ */ jsxDEV4(SelectItem, {
+                value: option.value,
+                children: /* @__PURE__ */ jsxDEV4("div", {
+                  className: "flex w-full items-center justify-between",
+                  children: [
+                    /* @__PURE__ */ jsxDEV4("span", {
+                      children: option.label
+                    }, undefined, false, undefined, this),
+                    showCounts && option.count !== undefined && /* @__PURE__ */ jsxDEV4("span", {
+                      className: "text-muted-foreground ml-2 text-sm",
+                      children: [
+                        "(",
+                        option.count,
+                        ")"
+                      ]
+                    }, undefined, true, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              }, option.value, false, undefined, this))
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+// ui/input.tsx
+import { cn as cn4 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsxDEV5("input", {
+    type,
+    "data-slot": "input",
+    className: cn4("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/atoms/SearchInput/SearchInput.tsx
+import { Search, X } from "lucide-react";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+var SearchInput = ({
+  value,
+  onChange,
+  placeholder = "Rechercher...",
+  onClear,
+  disabled = false,
+  className = "",
+  autoFocus = false
+}) => {
+  const handleClear = () => {
+    onChange("");
+    onClear?.();
+  };
+  return /* @__PURE__ */ jsxDEV6("div", {
+    className: `relative w-full ${className}`,
+    children: [
+      /* @__PURE__ */ jsxDEV6("div", {
+        className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3",
+        children: /* @__PURE__ */ jsxDEV6(Search, {
+          className: "text-muted-foreground h-4 w-4"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6(Input, {
+        type: "text",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        placeholder,
+        disabled,
+        autoFocus,
+        className: "pr-10 pl-10"
+      }, undefined, false, undefined, this),
+      value && /* @__PURE__ */ jsxDEV6("div", {
+        className: "absolute inset-y-0 right-0 flex items-center pr-3",
+        children: /* @__PURE__ */ jsxDEV6(Button, {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          onClick: handleClear,
+          disabled,
+          className: "h-6 w-6 p-0 hover:bg-transparent",
+          children: [
+            /* @__PURE__ */ jsxDEV6(X, {
+              className: "text-muted-foreground hover:text-foreground h-4 w-4"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV6("span", {
+              className: "sr-only",
+              children: "Effacer la recherche"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+// ui/collapsible.tsx
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+"use client";
+function Collapsible({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV7(CollapsiblePrimitive.Root, {
+    "data-slot": "collapsible",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CollapsibleTrigger2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV7(CollapsiblePrimitive.CollapsibleTrigger, {
+    "data-slot": "collapsible-trigger",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CollapsibleContent2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV7(CollapsiblePrimitive.CollapsibleContent, {
+    "data-slot": "collapsible-content",
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/molecules/SearchAndFilter/SearchAndFilter.tsx
+import { useState } from "react";
+import { ChevronDown, ChevronUp, Filter } from "lucide-react";
+import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
+var SearchAndFilter = ({
+  searchValue,
+  onSearchChange,
+  searchPlaceholder,
+  filters = [],
+  isLoading = false,
+  disabled = false,
+  className = "",
+  collapsible = true,
+  defaultCollapsed = false
+}) => {
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+  const hasFilters = filters.length > 0;
+  const activeFiltersCount = filters.filter((f) => f.value).length;
+  const shouldUseCollapsible = collapsible && hasFilters;
+  console.log("SearchAndFilter", { filters });
+  const FilterComponents = () => /* @__PURE__ */ jsxDEV8("div", {
+    className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+    children: filters.map((filter) => /* @__PURE__ */ jsxDEV8(FilterSelect, {
+      value: filter.value,
+      options: filter.options,
+      onChange: filter.onChange,
+      label: filter.label,
+      disabled: disabled || isLoading,
+      showCounts: filter.showCounts,
+      className: "min-w-0"
+    }, filter.key, false, undefined, this))
+  }, undefined, false, undefined, this);
+  return /* @__PURE__ */ jsxDEV8("div", {
+    className: `space-y-4 ${className}`,
+    children: [
+      /* @__PURE__ */ jsxDEV8("div", {
+        className: "flex flex-col gap-4 sm:flex-row",
+        children: [
+          /* @__PURE__ */ jsxDEV8("div", {
+            className: "flex-1",
+            children: /* @__PURE__ */ jsxDEV8(SearchInput, {
+              value: searchValue,
+              onChange: onSearchChange,
+              placeholder: searchPlaceholder,
+              disabled: disabled || isLoading,
+              className: "w-full"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          shouldUseCollapsible && /* @__PURE__ */ jsxDEV8(Collapsible, {
+            open: !isCollapsed,
+            onOpenChange: setIsCollapsed,
+            className: "sm:hidden",
+            children: [
+              /* @__PURE__ */ jsxDEV8(CollapsibleTrigger2, {
+                asChild: true,
+                children: /* @__PURE__ */ jsxDEV8(Button, {
+                  variant: "outline",
+                  className: "sm:hidden",
+                  disabled: disabled || isLoading,
+                  children: [
+                    /* @__PURE__ */ jsxDEV8(Filter, {
+                      className: "mr-2 h-4 w-4"
+                    }, undefined, false, undefined, this),
+                    "Filtres",
+                    activeFiltersCount > 0 && /* @__PURE__ */ jsxDEV8("span", {
+                      className: "bg-primary text-primary-foreground ml-2 flex h-5 w-5 items-center justify-center rounded-full text-sm",
+                      children: activeFiltersCount
+                    }, undefined, false, undefined, this),
+                    isCollapsed ? /* @__PURE__ */ jsxDEV8(ChevronDown, {
+                      className: "ml-2 h-4 w-4"
+                    }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV8(ChevronUp, {
+                      className: "ml-2 h-4 w-4"
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV8(CollapsibleContent2, {
+                className: "mt-4 space-y-4",
+                children: /* @__PURE__ */ jsxDEV8(FilterComponents, {}, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      hasFilters && /* @__PURE__ */ jsxDEV8("div", {
+        className: "hidden sm:block",
+        children: /* @__PURE__ */ jsxDEV8(FilterComponents, {}, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      activeFiltersCount > 0 && /* @__PURE__ */ jsxDEV8("div", {
+        className: "flex flex-wrap items-center gap-2",
+        children: [
+          /* @__PURE__ */ jsxDEV8("span", {
+            className: "text-muted-foreground text-base",
+            children: "Filtres actifs:"
+          }, undefined, false, undefined, this),
+          filters.filter((f) => f.value).map((filter) => {
+            const selectedOption = filter.options.find((opt) => opt.value === filter.value);
+            return /* @__PURE__ */ jsxDEV8(Button, {
+              variant: "secondary",
+              size: "sm",
+              onClick: () => filter.onChange(""),
+              disabled: disabled || isLoading,
+              className: "h-7 px-2 text-sm",
+              children: [
+                filter.label,
+                ": ",
+                selectedOption?.label,
+                /* @__PURE__ */ jsxDEV8("span", {
+                  className: "ml-1",
+                  children: "\xD7"
+                }, undefined, false, undefined, this)
+              ]
+            }, filter.key, true, undefined, this);
+          })
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+export {
+  SearchAndFilter
 };
-
-//#endregion
-export { SearchAndFilter };
-//# sourceMappingURL=SearchAndFilter.js.map

package/dist/ui/molecules/SearchAndFilter/index.d.ts

@@ -1,3 +1,3 @@
-import { SearchAndFilterProps } from "./types.js";
-import { SearchAndFilter } from "./SearchAndFilter.js";
-export { SearchAndFilter, type SearchAndFilterProps };
+export { SearchAndFilter } from './SearchAndFilter';
+export type { SearchAndFilterProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/molecules/SearchAndFilter/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../ui/molecules/SearchAndFilter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC"}