@contractspec/lib.ui-kit 1.56.1 → 1.58.0

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

@@ -0,0 +1,784 @@
+// ui/icons/iconWithClassName.ts
+import { styled } from "nativewind";
+function iconWithClassName(icon) {
+  styled(icon, {
+    className: {
+      target: "style",
+      nativeStyleMapping: {
+        color: true,
+        opacity: true
+      }
+    }
+  });
+}
+
+// ui/icons/ChevronDown.tsx
+import { ChevronDown } from "lucide-react-native";
+iconWithClassName(ChevronDown);
+// ui/text.tsx
+import * as Slot from "@rn-primitives/slot";
+import * as React from "react";
+import { Text as RNText } from "react-native";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var TextClassContext = React.createContext(undefined);
+function Text2({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const textClass = React.useContext(TextClassContext);
+  const Component = asChild ? Slot.Text : RNText;
+  return /* @__PURE__ */ jsxDEV(Component, {
+    className: cn("text-foreground web:select-text text-base", textClass, className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/button.tsx
+import { cva } from "class-variance-authority";
+import { Pressable } from "react-native";
+import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+var buttonVariants = cva("group flex items-center justify-center rounded-md web:ring-offset-background web:transition-colors web:focus-visible:outline-hidden web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2", {
+  variants: {
+    variant: {
+      default: "bg-primary web:hover:opacity-90 active:opacity-90",
+      destructive: "bg-destructive web:hover:opacity-90 active:opacity-90",
+      outline: "border border-input bg-background web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent",
+      secondary: "bg-secondary web:hover:opacity-80 active:opacity-80",
+      ghost: "web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent",
+      link: "web:underline-offset-4 web:hover:underline web:focus:underline"
+    },
+    size: {
+      default: "h-10 px-4 py-2 native:h-12 native:px-5 native:py-3",
+      sm: "h-9 rounded-md px-3",
+      lg: "h-11 rounded-md px-8 native:h-14",
+      icon: "h-10 w-10"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+var buttonTextVariants = cva("web:whitespace-nowrap text-sm native:text-base font-medium text-foreground web:transition-colors", {
+  variants: {
+    variant: {
+      default: "text-primary-foreground",
+      destructive: "text-destructive-foreground",
+      outline: "group-active:text-accent-foreground",
+      secondary: "text-secondary-foreground group-active:text-secondary-foreground",
+      ghost: "group-active:text-accent-foreground",
+      link: "text-primary group-active:underline"
+    },
+    size: {
+      default: "",
+      sm: "",
+      lg: "native:text-lg",
+      icon: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+function Button({ ref, className, variant, size, ...props }) {
+  return /* @__PURE__ */ jsxDEV2(TextClassContext.Provider, {
+    value: buttonTextVariants({
+      variant,
+      size,
+      className: "web:pointer-events-none"
+    }),
+    children: /* @__PURE__ */ jsxDEV2(Pressable, {
+      className: cn2(props.disabled && "web:pointer-events-none opacity-50", buttonVariants({ variant, size, className })),
+      ref,
+      role: "button",
+      ...props
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+// ui/icons/Check.tsx
+import { Check } from "lucide-react-native";
+iconWithClassName(Check);
+// ui/icons/ChevronUp.tsx
+import { ChevronUp } from "lucide-react-native";
+iconWithClassName(ChevronUp);
+// ui/select.tsx
+import * as SelectPrimitive from "@rn-primitives/select";
+import { Platform, StyleSheet, View } from "react-native";
+import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+import { cn as cn3 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+function SelectTrigger({
+  ref,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(SelectPrimitive.Trigger, {
+    ref,
+    className: cn3("native:h-12 border-input bg-background text-muted-foreground web:ring-offset-background web:focus:outline-hidden web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2 flex h-10 flex-row items-center justify-between rounded-md border px-3 py-2 text-sm [&>span]:line-clamp-1", props.disabled && "web:cursor-not-allowed opacity-50", className),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsxDEV3(ChevronDown, {
+        size: 16,
+        "aria-hidden": true,
+        className: "text-foreground opacity-50"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  if (Platform.OS !== "web") {
+    return null;
+  }
+  return /* @__PURE__ */ jsxDEV3(SelectPrimitive.ScrollUpButton, {
+    className: cn3("web:cursor-default flex items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsxDEV3(ChevronUp, {
+      size: 14,
+      className: "text-foreground"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  if (Platform.OS !== "web") {
+    return null;
+  }
+  return /* @__PURE__ */ jsxDEV3(SelectPrimitive.ScrollDownButton, {
+    className: cn3("web:cursor-default flex items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsxDEV3(ChevronDown, {
+      size: 14,
+      className: "text-foreground"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  portalHost,
+  ...props
+}) {
+  const { open } = SelectPrimitive.useRootContext();
+  return /* @__PURE__ */ jsxDEV3(SelectPrimitive.Portal, {
+    hostName: portalHost,
+    children: /* @__PURE__ */ jsxDEV3(SelectPrimitive.Overlay, {
+      style: Platform.OS !== "web" ? StyleSheet.absoluteFill : undefined,
+      children: /* @__PURE__ */ jsxDEV3(Animated.View, {
+        className: "z-50",
+        entering: FadeIn,
+        exiting: FadeOut,
+        children: /* @__PURE__ */ jsxDEV3(SelectPrimitive.Content, {
+          className: cn3("border-border bg-popover shadow-foreground/10 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-96 min-w-32 rounded-md border px-1 py-2 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", open ? "web:animate-in web:fade-in-0 web:zoom-in-95" : "web:animate-out web:fade-out-0 web:zoom-out-95", className),
+          position,
+          ...props,
+          children: [
+            /* @__PURE__ */ jsxDEV3(SelectScrollUpButton, {}, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV3(SelectPrimitive.Viewport, {
+              className: cn3("p-1", position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"),
+              children
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV3(SelectScrollDownButton, {}, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function SelectLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(SelectPrimitive.Label, {
+    className: cn3("native:pb-2 native:pl-10 native:text-base text-popover-foreground py-1.5 pr-2 pl-8 text-sm font-semibold", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(SelectPrimitive.Item, {
+    className: cn3("web:group native:py-2 native:pl-10 active:bg-accent web:cursor-default web:select-none web:outline-hidden web:hover:bg-accent/50 web:focus:bg-accent relative flex w-full flex-row items-center rounded-xs py-1.5 pr-2 pl-8", props.disabled && "web:pointer-events-none opacity-50", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxDEV3(View, {
+        className: "native:left-3.5 native:pt-px absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
+        children: /* @__PURE__ */ jsxDEV3(SelectPrimitive.ItemIndicator, {
+          children: /* @__PURE__ */ jsxDEV3(Check, {
+            size: 16,
+            strokeWidth: 3,
+            className: "text-popover-foreground"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3(SelectPrimitive.ItemText, {
+        className: "native:text-lg native:text-base text-popover-foreground web:group-focus:text-accent-foreground text-sm"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function SelectSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(SelectPrimitive.Separator, {
+    className: cn3("bg-muted -mx-1 my-1 h-px", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/label.tsx
+import { cn as cn4 } from "@contractspec/lib.ui-kit-core/utils";
+import * as LabelPrimitive from "@rn-primitives/label";
+import { Platform as Platform2 } from "react-native";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+function Label2({
+  className,
+  onPress,
+  onLongPress,
+  onPressIn,
+  onPressOut,
+  disabled,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV4(LabelPrimitive.Root, {
+    className: cn4("flex flex-row items-center gap-2 select-none", Platform2.select({
+      web: "cursor-default leading-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+    }), disabled && "opacity-50"),
+    onPress,
+    onLongPress,
+    onPressIn,
+    onPressOut,
+    disabled,
+    children: /* @__PURE__ */ jsxDEV4(LabelPrimitive.Text, {
+      className: cn4("text-foreground text-sm font-medium", Platform2.select({ web: "leading-none" }), className),
+      ...props
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+// ui/stack.tsx
+import { View as View2 } from "react-native";
+import { cn as cn5 } from "@contractspec/lib.ui-kit-core/utils";
+import { cva as cva2 } from "class-variance-authority";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+var baseStyle = "flex";
+var vStackVariants = cva2([baseStyle, "flex-col"], {
+  variants: {
+    spacing: {
+      none: "",
+      xs: "gap-y-1",
+      sm: "gap-y-2",
+      md: "gap-y-4",
+      lg: "gap-y-6",
+      xl: "gap-y-8",
+      "2xl": "gap-y-12"
+    },
+    align: {
+      stretch: "items-stretch",
+      start: "items-start",
+      center: "items-center",
+      end: "items-end"
+    },
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly"
+    },
+    width: {
+      auto: "w-auto",
+      full: "w-full",
+      screen: "w-screen",
+      fit: "w-fit"
+    },
+    padding: {
+      none: "",
+      xs: "p-1",
+      sm: "p-2",
+      md: "p-4",
+      lg: "p-6",
+      xl: "p-8"
+    },
+    gap: {
+      none: "",
+      xs: "gap-1",
+      sm: "gap-2",
+      md: "gap-4",
+      lg: "gap-6",
+      xl: "gap-8"
+    }
+  },
+  defaultVariants: {
+    spacing: "md",
+    align: "stretch",
+    justify: "start",
+    width: "auto",
+    padding: "none",
+    gap: "none"
+  }
+});
+var hStackVariants = cva2([baseStyle, "flex-row"], {
+  variants: {
+    spacing: {
+      none: "",
+      xs: "gap-x-1",
+      sm: "gap-x-2",
+      md: "gap-x-4",
+      lg: "gap-x-6",
+      xl: "gap-x-8",
+      "2xl": "gap-x-12"
+    },
+    align: {
+      stretch: "items-stretch",
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      baseline: "items-baseline"
+    },
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly"
+    },
+    width: {
+      auto: "w-auto",
+      full: "w-full",
+      screen: "w-screen",
+      fit: "w-fit"
+    },
+    padding: {
+      none: "",
+      xs: "p-1",
+      sm: "p-2",
+      md: "p-4",
+      lg: "p-6",
+      xl: "p-8"
+    },
+    gap: {
+      none: "",
+      xs: "gap-1",
+      sm: "gap-2",
+      md: "gap-4",
+      lg: "gap-6",
+      xl: "gap-8"
+    },
+    wrap: {
+      nowrap: "flex-nowrap",
+      wrap: "flex-wrap",
+      reverse: "flex-wrap-reverse"
+    }
+  },
+  defaultVariants: {
+    spacing: "md",
+    align: "center",
+    justify: "start",
+    width: "auto",
+    padding: "none",
+    gap: "none",
+    wrap: "wrap"
+  }
+});
+var boxVariants = cva2([baseStyle, "flex-row"], {
+  variants: {
+    spacing: {
+      none: "",
+      xs: "gap-x-1",
+      sm: "gap-x-2",
+      md: "gap-x-4",
+      lg: "gap-x-6",
+      xl: "gap-x-8",
+      "2xl": "gap-x-12"
+    },
+    align: {
+      stretch: "items-stretch",
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      baseline: "items-baseline"
+    },
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly"
+    },
+    width: {
+      auto: "w-auto",
+      full: "w-full",
+      screen: "w-screen",
+      fit: "w-fit"
+    },
+    padding: {
+      none: "",
+      xs: "p-1",
+      sm: "p-2",
+      md: "p-4",
+      lg: "p-6",
+      xl: "p-8"
+    },
+    gap: {
+      none: "",
+      xs: "gap-1",
+      sm: "gap-2",
+      md: "gap-4",
+      lg: "gap-6",
+      xl: "gap-8"
+    },
+    wrap: {
+      nowrap: "flex-nowrap",
+      wrap: "flex-wrap",
+      reverse: "flex-wrap-reverse"
+    }
+  },
+  defaultVariants: {
+    spacing: "md",
+    align: "center",
+    justify: "center",
+    width: "auto",
+    padding: "none",
+    gap: "none",
+    wrap: "wrap"
+  }
+});
+function Box({
+  className,
+  spacing,
+  align,
+  justify,
+  width,
+  padding,
+  gap,
+  wrap,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV5(View2, {
+    className: cn5(boxVariants({ spacing, align, justify, width, padding, gap, wrap }), className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function HStack({
+  className,
+  spacing,
+  align,
+  justify,
+  width,
+  padding,
+  gap,
+  wrap,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV5(View2, {
+    className: cn5(hStackVariants({ spacing, align, justify, width, padding, gap, wrap }), className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function VStack({
+  className,
+  spacing,
+  align,
+  justify,
+  width,
+  padding,
+  gap,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV5(View2, {
+    className: cn5(vStackVariants({ spacing, align, justify, width, padding, gap }), className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/atoms/FilterSelect/FilterSelect.tsx
+import { View as View3 } from "react-native";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+var FilterSelect = ({
+  value,
+  options,
+  onChange,
+  placeholder = "Sélectionner...",
+  label,
+  disabled = false,
+  className = "",
+  showCounts = false
+}) => {
+  return /* @__PURE__ */ jsxDEV6(HStack, {
+    className: `space-y-2 ${className}`,
+    children: [
+      label && /* @__PURE__ */ jsxDEV6(Label2, {
+        className: "text-foreground text-base font-medium",
+        children: label
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV6(Select, {
+        value,
+        onValueChange: onChange,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsxDEV6(SelectTrigger, {
+            className: "w-full",
+            children: /* @__PURE__ */ jsxDEV6(SelectValue, {
+              placeholder
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6(SelectContent, {
+            className: "bg-background",
+            children: [
+              /* @__PURE__ */ jsxDEV6(SelectItem, {
+                value: "all",
+                label: "Tous",
+                children: [
+                  /* @__PURE__ */ jsxDEV6(Text2, {
+                    children: "Tous"
+                  }, undefined, false, undefined, this),
+                  showCounts && /* @__PURE__ */ jsxDEV6(View3, {
+                    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__ */ jsxDEV6(SelectItem, {
+                value: option.value,
+                label: option.label,
+                children: /* @__PURE__ */ jsxDEV6(HStack, {
+                  className: "flex w-full items-center justify-between",
+                  children: [
+                    /* @__PURE__ */ jsxDEV6(Text2, {
+                      children: option.label
+                    }, undefined, false, undefined, this),
+                    showCounts && option.count !== undefined && /* @__PURE__ */ jsxDEV6(Text2, {
+                      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 { TextInput } from "react-native";
+import { cn as cn6 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+function Input({
+  className,
+  placeholderClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV7(TextInput, {
+    className: cn6("native:h-12 native:text-lg native:leading-tight border-input bg-background text-foreground placeholder:text-muted-foreground web:flex web:w-full web:py-2 web:ring-offset-background web:focus-visible:outline-hidden web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 h-10 rounded-md border px-3 text-base file:border-0 file:bg-transparent file:font-medium lg:text-sm", props.editable === false && "web:cursor-not-allowed opacity-50", className),
+    placeholderClassName: cn6("text-muted-foreground", placeholderClassName),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/atoms/SearchInput/SearchInput.tsx
+import { Search, X } from "lucide-react";
+import { View as View4 } from "react-native";
+import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
+var SearchInput = ({
+  value,
+  onChange,
+  placeholder = "Rechercher...",
+  onClear,
+  disabled = false,
+  className = ""
+}) => {
+  const handleClear = () => {
+    onChange("");
+    onClear?.();
+  };
+  return /* @__PURE__ */ jsxDEV8(View4, {
+    className: `relative w-full ${className}`,
+    children: [
+      /* @__PURE__ */ jsxDEV8(View4, {
+        className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3",
+        children: /* @__PURE__ */ jsxDEV8(Search, {
+          className: "text-muted-foreground h-4 w-4"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV8(Input, {
+        value,
+        onChange: (e) => onChange(e.nativeEvent.text),
+        placeholder,
+        editable: !disabled,
+        className: "pr-10 pl-10"
+      }, undefined, false, undefined, this),
+      value && /* @__PURE__ */ jsxDEV8(View4, {
+        className: "absolute inset-y-0 right-0 flex items-center pr-3",
+        children: /* @__PURE__ */ jsxDEV8(Button, {
+          variant: "ghost",
+          size: "sm",
+          onPress: handleClear,
+          disabled,
+          className: "h-6 w-6 p-0 hover:bg-transparent",
+          children: [
+            /* @__PURE__ */ jsxDEV8(X, {
+              className: "text-muted-foreground hover:text-foreground h-4 w-4"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV8(Text2, {
+              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 "@rn-primitives/collapsible";
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+var CollapsibleContent = CollapsiblePrimitive.Content;
+// ui/molecules/SearchAndFilter/SearchAndFilter.tsx
+import { useState } from "react";
+import { ChevronDown as ChevronDown2, ChevronUp as ChevronUp2, Filter } from "lucide-react";
+import { jsxDEV as jsxDEV9 } 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__ */ jsxDEV9("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__ */ jsxDEV9(FilterSelect, {
+      value: { value: filter.value, label: 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__ */ jsxDEV9("div", {
+    className: `space-y-4 ${className}`,
+    children: [
+      /* @__PURE__ */ jsxDEV9("div", {
+        className: "flex flex-col gap-4 sm:flex-row",
+        children: [
+          /* @__PURE__ */ jsxDEV9("div", {
+            className: "flex-1",
+            children: /* @__PURE__ */ jsxDEV9(SearchInput, {
+              value: searchValue,
+              onChange: onSearchChange,
+              placeholder: searchPlaceholder,
+              disabled: disabled || isLoading,
+              className: "w-full"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          shouldUseCollapsible && /* @__PURE__ */ jsxDEV9(Collapsible, {
+            open: !isCollapsed,
+            onOpenChange: setIsCollapsed,
+            className: "sm:hidden",
+            children: [
+              /* @__PURE__ */ jsxDEV9(CollapsibleTrigger, {
+                asChild: true,
+                children: /* @__PURE__ */ jsxDEV9(Button, {
+                  variant: "outline",
+                  className: "sm:hidden",
+                  disabled: disabled || isLoading,
+                  children: [
+                    /* @__PURE__ */ jsxDEV9(Filter, {
+                      className: "mr-2 h-4 w-4"
+                    }, undefined, false, undefined, this),
+                    "Filtres",
+                    activeFiltersCount > 0 && /* @__PURE__ */ jsxDEV9("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__ */ jsxDEV9(ChevronDown2, {
+                      className: "ml-2 h-4 w-4"
+                    }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV9(ChevronUp2, {
+                      className: "ml-2 h-4 w-4"
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV9(CollapsibleContent, {
+                className: "mt-4 space-y-4",
+                children: /* @__PURE__ */ jsxDEV9(FilterComponents, {}, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      hasFilters && /* @__PURE__ */ jsxDEV9("div", {
+        className: "hidden sm:block",
+        children: /* @__PURE__ */ jsxDEV9(FilterComponents, {}, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      activeFiltersCount > 0 && /* @__PURE__ */ jsxDEV9("div", {
+        className: "flex flex-wrap items-center gap-2",
+        children: [
+          /* @__PURE__ */ jsxDEV9("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__ */ jsxDEV9(Button, {
+              variant: "secondary",
+              size: "sm",
+              onPress: () => filter.onChange(undefined),
+              disabled: disabled || isLoading,
+              className: "h-7 px-2 text-sm",
+              children: [
+                filter.label,
+                ": ",
+                selectedOption?.label,
+                /* @__PURE__ */ jsxDEV9("span", {
+                  className: "ml-1",
+                  children: "×"
+                }, undefined, false, undefined, this)
+              ]
+            }, filter.key, true, undefined, this);
+          })
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+export {
+  SearchAndFilter
+};