@contractspec/lib.ui-kit 1.57.0 → 1.58.0

package/dist/browser/ui/atoms/FilterSelect/FilterSelect.js

@@ -0,0 +1,527 @@
+// 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/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 cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV2 } 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__ */ jsxDEV2(SelectPrimitive.Trigger, {
+    ref,
+    className: cn2("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__ */ jsxDEV2(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__ */ jsxDEV2(SelectPrimitive.ScrollUpButton, {
+    className: cn2("web:cursor-default flex items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsxDEV2(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__ */ jsxDEV2(SelectPrimitive.ScrollDownButton, {
+    className: cn2("web:cursor-default flex items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsxDEV2(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__ */ jsxDEV2(SelectPrimitive.Portal, {
+    hostName: portalHost,
+    children: /* @__PURE__ */ jsxDEV2(SelectPrimitive.Overlay, {
+      style: Platform.OS !== "web" ? StyleSheet.absoluteFill : undefined,
+      children: /* @__PURE__ */ jsxDEV2(Animated.View, {
+        className: "z-50",
+        entering: FadeIn,
+        exiting: FadeOut,
+        children: /* @__PURE__ */ jsxDEV2(SelectPrimitive.Content, {
+          className: cn2("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__ */ 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)"),
+              children
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2(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__ */ jsxDEV2(SelectPrimitive.Label, {
+    className: cn2("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__ */ jsxDEV2(SelectPrimitive.Item, {
+    className: cn2("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__ */ jsxDEV2(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__ */ jsxDEV2(SelectPrimitive.ItemIndicator, {
+          children: /* @__PURE__ */ jsxDEV2(Check, {
+            size: 16,
+            strokeWidth: 3,
+            className: "text-popover-foreground"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2(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__ */ jsxDEV2(SelectPrimitive.Separator, {
+    className: cn2("bg-muted -mx-1 my-1 h-px", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/label.tsx
+import { cn as cn3 } from "@contractspec/lib.ui-kit-core/utils";
+import * as LabelPrimitive from "@rn-primitives/label";
+import { Platform as Platform2 } from "react-native";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function Label2({
+  className,
+  onPress,
+  onLongPress,
+  onPressIn,
+  onPressOut,
+  disabled,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(LabelPrimitive.Root, {
+    className: cn3("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__ */ jsxDEV3(LabelPrimitive.Text, {
+      className: cn3("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 cn4 } from "@contractspec/lib.ui-kit-core/utils";
+import { cva } from "class-variance-authority";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+var baseStyle = "flex";
+var vStackVariants = cva([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 = cva([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 = cva([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__ */ jsxDEV4(View2, {
+    className: cn4(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__ */ jsxDEV4(View2, {
+    className: cn4(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__ */ jsxDEV4(View2, {
+    className: cn4(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 jsxDEV5 } from "react/jsx-dev-runtime";
+var FilterSelect = ({
+  value,
+  options,
+  onChange,
+  placeholder = "Sélectionner...",
+  label,
+  disabled = false,
+  className = "",
+  showCounts = false
+}) => {
+  return /* @__PURE__ */ jsxDEV5(HStack, {
+    className: `space-y-2 ${className}`,
+    children: [
+      label && /* @__PURE__ */ jsxDEV5(Label2, {
+        className: "text-foreground text-base font-medium",
+        children: label
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV5(Select, {
+        value,
+        onValueChange: onChange,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsxDEV5(SelectTrigger, {
+            className: "w-full",
+            children: /* @__PURE__ */ jsxDEV5(SelectValue, {
+              placeholder
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV5(SelectContent, {
+            className: "bg-background",
+            children: [
+              /* @__PURE__ */ jsxDEV5(SelectItem, {
+                value: "all",
+                label: "Tous",
+                children: [
+                  /* @__PURE__ */ jsxDEV5(Text2, {
+                    children: "Tous"
+                  }, undefined, false, undefined, this),
+                  showCounts && /* @__PURE__ */ jsxDEV5(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__ */ jsxDEV5(SelectItem, {
+                value: option.value,
+                label: option.label,
+                children: /* @__PURE__ */ jsxDEV5(HStack, {
+                  className: "flex w-full items-center justify-between",
+                  children: [
+                    /* @__PURE__ */ jsxDEV5(Text2, {
+                      children: option.label
+                    }, undefined, false, undefined, this),
+                    showCounts && option.count !== undefined && /* @__PURE__ */ jsxDEV5(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);
+};
+export {
+  FilterSelect
+};