kelt-ui-kit-react 1.8.0 → 1.8.2

package/dist/tabs/Tabs.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+
+export type TabItem = {
+    key: string;
+    title: React.ReactNode;
+    panel: React.ReactNode;
+    disabled?: boolean;
+};
+export type TabsProps = {
+    items: TabItem[];
+    defaultIndex?: number;
+    index?: number;
+    onChange?: (nextIndex: number) => void;
+    className?: string;
+    tabClassName?: string;
+    panelClassName?: string;
+};
+export declare const Tabs: ({ items, defaultIndex, index, onChange, className, tabClassName, panelClassName, }: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/tabs/Tabs.view.d.ts

@@ -0,0 +1 @@
+export declare const TabsView: () => import("react/jsx-runtime").JSX.Element;

package/dist/toaster/Toaster.d.ts

@@ -0,0 +1,2 @@
+
+export declare const Toaster: () => import('react').ReactPortal | null;

package/dist/toaster/Toaster.view.d.ts

@@ -0,0 +1 @@
+export declare const ToasterView: () => JSX.Element;

package/dist/toaster/store/useToasterStore.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+type ToasterState = {
+    title: string;
+    description?: string;
+    severity?: "info" | "success" | "error" | "warning";
+    children?: React.ReactNode;
+    visible: boolean;
+    duration: number;
+    close?: boolean;
+    showToast: (title: string, options?: {
+        description?: string;
+        severity?: "info" | "success" | "error" | "warning";
+        duration?: number;
+        children?: React.ReactNode;
+    }) => void;
+    hideToast: () => void;
+};
+export declare const useToasterStore: import('zustand').UseBoundStore<import('zustand').StoreApi<ToasterState>>;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kelt-ui-kit-react",
   "type": "module",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/sidebar/Sidebar.tsx

@@ -15,6 +15,9 @@ export interface SidebarProps {
   onClose?: (close: boolean) => void;
 }
 
+const SWIPE_CLOSE_THRESHOLD = 60; // px à parcourir pour fermer
+const SWIPE_AXIS_LOCK_THRESHOLD = 10; // px pour déterminer l'axe du geste
+
 export const Sidebar = ({
   open,
   children,
@@ -27,10 +30,13 @@ export const Sidebar = ({
   displayOverlay = true,
 }: SidebarProps): JSX.Element => {
   const [isOpen, setIsOpen] = useState(open || false);
+  const [dragX, setDragX] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
   const sidebarRef = useRef<HTMLDivElement | null>(null);
   const rootRef = useRef<HTMLDivElement | null>(null);
   const touchStartX = useRef(0);
   const touchStartY = useRef(0);
+  const axisLocked = useRef<"x" | "y" | null>(null);
 
   // Créer le conteneur une seule fois
   useEffect(() => {
@@ -78,20 +84,61 @@ export const Sidebar = ({
     const touch = event.touches[0];
     touchStartX.current = touch.clientX;
     touchStartY.current = touch.clientY;
+    axisLocked.current = null;
+    setIsDragging(false);
+    setDragX(0);
   }, []);
 
-  const handleTouchEnd = useCallback(
+  const handleTouchMove = useCallback(
     (event: React.TouchEvent) => {
       if (!isOpen) return;
 
-      const touch = event.changedTouches[0];
+      const touch = event.touches[0];
       const deltaX = touch.clientX - touchStartX.current;
-      const deltaY = Math.abs(touch.clientY - touchStartY.current);
+      const deltaY = touch.clientY - touchStartY.current;
+
+      // Détermine l'axe du geste une seule fois, dès qu'on a un déplacement suffisant
+      if (!axisLocked.current) {
+        if (
+          Math.abs(deltaX) < SWIPE_AXIS_LOCK_THRESHOLD &&
+          Math.abs(deltaY) < SWIPE_AXIS_LOCK_THRESHOLD
+        ) {
+          return; // pas encore assez de mouvement pour trancher
+        }
+        axisLocked.current = Math.abs(deltaX) > Math.abs(deltaY) ? "x" : "y";
+      }
 
-      // Ferme seulement sur un vrai swipe horizontal gauche -> droite.
-      if (deltaX > 60 && deltaY < 40) {
-        toggleSidebar();
+      if (axisLocked.current !== "x") return; // c'est un scroll vertical, on laisse faire
+
+      // On gère le swipe horizontal nous-mêmes : on empêche le scroll natif
+      // et on bloque le bounce/scroll de la page pendant le drag
+      event.preventDefault();
+
+      setIsDragging(true);
+      // On ne permet que le swipe vers la droite (fermeture), pas de drag négatif
+      setDragX(Math.max(0, deltaX));
+    },
+    [isOpen],
+  );
+
+  const handleTouchEnd = useCallback(
+    (event: React.TouchEvent) => {
+      if (!isOpen) {
+        return;
       }
+
+      if (axisLocked.current === "x") {
+        const touch = event.changedTouches[0];
+        const deltaX = touch.clientX - touchStartX.current;
+
+        if (deltaX > SWIPE_CLOSE_THRESHOLD) {
+          toggleSidebar();
+        }
+      }
+
+      setIsDragging(false);
+      setDragX(0);
+      axisLocked.current = null;
     },
     [isOpen, toggleSidebar],
   );
@@ -136,9 +183,14 @@ export const Sidebar = ({
       )}
       <div
         ref={sidebarRef}
-        style={width ? { width: width } : {}}
+        style={{
+          ...(width ? { width } : {}),
+          transform: dragX ? `translateX(${dragX}px)` : undefined,
+          transition: isDragging ? "none" : undefined,
+        }}
         className={`sidebar ${isOpen ? "open" : "closed"} ${className ?? ""}`}
         onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
         onTouchEnd={handleTouchEnd}
       >
         <div className="sidebar-header">

package/src/sidebar/sidebar.css

@@ -1,3 +1,9 @@
+.sidebar {
+  touch-action: pan-y;
+  /* laisse le scroll vertical natif, gère le X nous-même */
+  will-change: transform;
+}
+
 .overlay {
   touch-action: none;
 }