@contractspec/lib.ui-kit 1.57.0 → 1.58.0

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

@@ -0,0 +1,442 @@
+// 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/atoms/Pagination/Pagination.tsx
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight
+} from "lucide-react";
+import { View as View2 } from "react-native";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+var Pagination = ({
+  currentPage,
+  totalPages,
+  totalItems,
+  itemsPerPage,
+  onPageChange,
+  onItemsPerPageChange,
+  disabled = false,
+  className = "",
+  showItemsPerPage = true,
+  itemsPerPageOptions = [10, 25, 50, 100]
+}) => {
+  const startItem = (currentPage - 1) * itemsPerPage + 1;
+  const endItem = Math.min(currentPage * itemsPerPage, totalItems);
+  const canGoPrevious = currentPage > 1 && !disabled;
+  const canGoNext = currentPage < totalPages && !disabled;
+  const getVisiblePageNumbers = () => {
+    if (totalPages <= 7) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    if (currentPage <= 3) {
+      return [1, 2, 3, 4, 5, -1, totalPages];
+    }
+    if (currentPage >= totalPages - 2) {
+      return [
+        1,
+        -1,
+        totalPages - 4,
+        totalPages - 3,
+        totalPages - 2,
+        totalPages - 1,
+        totalPages
+      ];
+    }
+    return [
+      1,
+      -1,
+      currentPage - 1,
+      currentPage,
+      currentPage + 1,
+      -1,
+      totalPages
+    ];
+  };
+  if (totalPages === 0)
+    return null;
+  return /* @__PURE__ */ jsxDEV4(View2, {
+    className: `flex flex-col items-center justify-between gap-4 sm:flex-row ${className}`,
+    children: [
+      /* @__PURE__ */ jsxDEV4(View2, {
+        className: "text-muted-foreground order-2 text-base sm:order-1",
+        children: [
+          "Affichage de ",
+          startItem,
+          " à ",
+          endItem,
+          " sur ",
+          totalItems,
+          " résultats"
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV4(View2, {
+        className: "order-1 flex items-center gap-2 sm:order-2",
+        children: [
+          /* @__PURE__ */ jsxDEV4(Button, {
+            variant: "outline",
+            size: "sm",
+            onPress: () => onPageChange(1),
+            disabled: !canGoPrevious,
+            className: "hidden h-8 w-8 p-0 sm:flex",
+            children: [
+              /* @__PURE__ */ jsxDEV4(ChevronsLeft, {
+                className: "h-4 w-4"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4(Text2, {
+                className: "sr-only",
+                children: "Première page"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV4(Button, {
+            variant: "outline",
+            size: "sm",
+            onPress: () => onPageChange(currentPage - 1),
+            disabled: !canGoPrevious,
+            className: "h-8 w-8 p-0",
+            children: [
+              /* @__PURE__ */ jsxDEV4(ChevronLeft, {
+                className: "h-4 w-4"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4(Text2, {
+                className: "sr-only",
+                children: "Page précédente"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV4(View2, {
+            className: "flex items-center gap-1",
+            children: getVisiblePageNumbers().map((page, index) => {
+              if (page === -1) {
+                return /* @__PURE__ */ jsxDEV4(View2, {
+                  className: "text-muted-foreground px-2 py-1",
+                  children: "..."
+                }, `ellipsis-${index}`, false, undefined, this);
+              }
+              return /* @__PURE__ */ jsxDEV4(Button, {
+                variant: page === currentPage ? "default" : "outline",
+                size: "sm",
+                onPress: () => onPageChange(page),
+                disabled,
+                className: "h-8 min-w-8 px-2",
+                children: /* @__PURE__ */ jsxDEV4(Text2, {
+                  children: page
+                }, undefined, false, undefined, this)
+              }, page, false, undefined, this);
+            })
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4(Button, {
+            variant: "outline",
+            size: "sm",
+            onPress: () => onPageChange(currentPage + 1),
+            disabled: !canGoNext,
+            className: "h-8 w-8 p-0",
+            children: [
+              /* @__PURE__ */ jsxDEV4(ChevronRight, {
+                className: "h-4 w-4"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4(Text2, {
+                className: "sr-only",
+                children: "Page suivante"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV4(Button, {
+            variant: "outline",
+            size: "sm",
+            onPress: () => onPageChange(totalPages),
+            disabled: !canGoNext,
+            className: "hidden h-8 w-8 p-0 sm:flex",
+            children: [
+              /* @__PURE__ */ jsxDEV4(ChevronsRight, {
+                className: "h-4 w-4"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4(Text2, {
+                className: "sr-only",
+                children: "Dernière page"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      showItemsPerPage && onItemsPerPageChange && /* @__PURE__ */ jsxDEV4(View2, {
+        className: "order-3 flex items-center gap-2 text-base",
+        children: [
+          /* @__PURE__ */ jsxDEV4(Text2, {
+            className: "text-muted-foreground",
+            children: "Afficher:"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4(Select, {
+            value: {
+              value: itemsPerPage.toString(),
+              label: itemsPerPage.toString()
+            },
+            onValueChange: (value) => onItemsPerPageChange(parseInt(value?.value || "")),
+            disabled,
+            children: [
+              /* @__PURE__ */ jsxDEV4(SelectTrigger, {
+                className: "h-8 w-16",
+                children: /* @__PURE__ */ jsxDEV4(SelectValue, {
+                  placeholder: "Afficher:"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV4(SelectContent, {
+                className: "bg-background",
+                children: itemsPerPageOptions.map((option) => /* @__PURE__ */ jsxDEV4(SelectItem, {
+                  value: option.toString(),
+                  label: option.toString(),
+                  children: option
+                }, option, false, undefined, this))
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+};
+export {
+  Pagination
+};