@windstream/react-shared-components 0.1.26 → 0.1.28

package/dist/core.d.ts

@@ -433,6 +433,99 @@ declare const ViewCartButton: React.FC<ViewCartButtonProps>;
  */
 declare function useBodyScrollLock(isOpen: boolean, hideScrollOnIsOpenFalse: boolean): void;
 
+/**
+ * Configuration options for the carousel swipe behavior
+ */
+interface CarouselSwipeConfig {
+    /** Total number of items in the carousel */
+    itemCount: number;
+    /** Percentage of card width to offset each slide (default: 105) */
+    cardOffsetPercentage?: number;
+    /** Percentage of container width needed to trigger slide change (default: 0.15) */
+    swipeThreshold?: number;
+    /** Mobile breakpoint in pixels (default: 768) */
+    mobileBreakpoint?: number;
+    /** Auto-scroll interval in milliseconds (default: 8000). Set to 0 to disable. */
+    autoScrollInterval?: number;
+    /** Enable auto-scroll (default: true) */
+    enableAutoScroll?: boolean;
+}
+/**
+ * Return value from the useCarouselSwipe hook
+ */
+interface CarouselSwipeReturn {
+    /** Current active slide index */
+    currentIndex: number;
+    /** Current swipe offset in pixels */
+    swipeOffset: number;
+    /** Whether user is currently swiping */
+    isSwiping: boolean;
+    /** Whether viewport is mobile size */
+    isMobile: boolean;
+    /** Memoized container width */
+    containerWidth: number;
+    /** Ref to attach to the carousel container element */
+    containerRef: React__default.RefObject<HTMLDivElement>;
+    /** Navigate to next slide */
+    nextSlide: () => void;
+    /** Navigate to previous slide */
+    prevSlide: () => void;
+    /** Navigate to specific slide index */
+    goToSlide: (index: number) => void;
+    /** Touch start handler */
+    handleTouchStart: (e: React__default.TouchEvent) => void;
+    /** Touch move handler */
+    handleTouchMove: (e: React__default.TouchEvent) => void;
+    /** Touch end handler */
+    handleTouchEnd: () => void;
+    /** Constants used for calculations */
+    constants: {
+        CARD_OFFSET_PERCENTAGE: number;
+        SWIPE_THRESHOLD: number;
+        MOBILE_BREAKPOINT: number;
+        AUTO_SCROLL_INTERVAL: number;
+    };
+}
+/**
+ * Custom hook for implementing swipe/touch gestures in carousels
+ *
+ * Features:
+ * - Touch/swipe support with smooth finger-following
+ * - Auto-scroll with pause on interaction
+ * - Responsive mobile detection with resize listener
+ * - Performance optimized with memoization
+ * - Configurable thresholds and behavior
+ *
+ * @example
+ * ```tsx
+ * const carousel = useCarouselSwipe({
+ *   itemCount: items.length,
+ *   autoScrollInterval: 5000,
+ * });
+ *
+ * return (
+ *   <div
+ *     ref={carousel.containerRef}
+ *     onTouchStart={carousel.handleTouchStart}
+ *     onTouchMove={carousel.handleTouchMove}
+ *     onTouchEnd={carousel.handleTouchEnd}
+ *   >
+ *     {items.map((item, index) => (
+ *       <div
+ *         key={index}
+ *         style={{
+ *           transform: `translateX(${calculateTransform(index, carousel)})`,
+ *         }}
+ *       >
+ *         {item}
+ *       </div>
+ *     ))}
+ *   </div>
+ * );
+ * ```
+ */
+declare function useCarouselSwipe(config: CarouselSwipeConfig): CarouselSwipeReturn;
+
 /**
  * Utility function to combine class names using clsx
  * @param inputs - Class values to combine
@@ -440,5 +533,5 @@ declare function useBodyScrollLock(isOpen: boolean, hideScrollOnIsOpenFalse: boo
  */
 declare const cx: (...val: ClassValue[]) => string;
 
-export { Accordion, AlertCard, BrandButton, Button, CallButton, Checkbox, Checklist, Collapse, Divider, Image, Input, InputField, Link, List, ListItem, MaterialIcon, Modal, NextImage, PageSkeleton, RadioButton, SeeMore, Select, SelectPlanButton, Skeleton, Spinner, Text, Input as TextInput, Tooltip, ViewCartButton, cx, useBodyScrollLock };
-export type { AlertCardProps, Animation, ButtonProps as BrandButtonProps, ButtonSizeT, ButtonVariantsT, CheckboxProps, CollapsibleProps, DividerProps, FilterOptions, IconName, IconProps, ImageComponentProps, ImageProps, InputFieldProps, InputProps, LinkProps, ListItemProps, ListProps, ModalProps, NextImageComponentProps, RadioButtonProps, ResponsiveSize, SelectOption, SelectPlanButtonProps, SelectProps, Shape, Size, SkeletonProps, SpinnerProps, TextProps, TextVariant, ToolTipProps, ViewCartButtonProps };
+export { Accordion, AlertCard, BrandButton, Button, CallButton, Checkbox, Checklist, Collapse, Divider, Image, Input, InputField, Link, List, ListItem, MaterialIcon, Modal, NextImage, PageSkeleton, RadioButton, SeeMore, Select, SelectPlanButton, Skeleton, Spinner, Text, Input as TextInput, Tooltip, ViewCartButton, cx, useBodyScrollLock, useCarouselSwipe };
+export type { AlertCardProps, Animation, ButtonProps as BrandButtonProps, ButtonSizeT, ButtonVariantsT, CarouselSwipeConfig, CarouselSwipeReturn, CheckboxProps, CollapsibleProps, DividerProps, FilterOptions, IconName, IconProps, ImageComponentProps, ImageProps, InputFieldProps, InputProps, LinkProps, ListItemProps, ListProps, ModalProps, NextImageComponentProps, RadioButtonProps, ResponsiveSize, SelectOption, SelectPlanButtonProps, SelectProps, Shape, Size, SkeletonProps, SpinnerProps, TextProps, TextVariant, ToolTipProps, ViewCartButtonProps };

package/dist/index.d.ts

@@ -59,15 +59,15 @@ type InputFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
 
 declare const InputField: ForwardRefRenderFunction<HTMLInputElement, InputFieldProps>;
 declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> & {
-    state?: "default" | "focus" | "active" | "hover" | "filled" | "error" | undefined;
-    size?: "slim" | "medium" | "large" | undefined;
+    state?: "default" | "error" | "filled" | "active" | "focus" | "hover" | undefined;
+    size?: "medium" | "large" | "slim" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
     prefixIconName?: "search" | "location_on" | undefined;
     prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
     prefixIconFill?: boolean | undefined;
     suffixIconFill?: boolean | undefined;
-    suffixIconName?: "visibility" | "visibility_off" | "lock" | undefined;
+    suffixIconName?: "visibility" | "lock" | "visibility_off" | undefined;
     suffixIconSize?: 20 | 24 | 40 | 48 | undefined;
     containerClassName?: string | undefined;
     prefixIconClassName?: string | undefined;
@@ -433,6 +433,99 @@ declare const ViewCartButton: React.FC<ViewCartButtonProps>;
  */
 declare function useBodyScrollLock(isOpen: boolean, hideScrollOnIsOpenFalse: boolean): void;
 
+/**
+ * Configuration options for the carousel swipe behavior
+ */
+interface CarouselSwipeConfig {
+    /** Total number of items in the carousel */
+    itemCount: number;
+    /** Percentage of card width to offset each slide (default: 105) */
+    cardOffsetPercentage?: number;
+    /** Percentage of container width needed to trigger slide change (default: 0.15) */
+    swipeThreshold?: number;
+    /** Mobile breakpoint in pixels (default: 768) */
+    mobileBreakpoint?: number;
+    /** Auto-scroll interval in milliseconds (default: 8000). Set to 0 to disable. */
+    autoScrollInterval?: number;
+    /** Enable auto-scroll (default: true) */
+    enableAutoScroll?: boolean;
+}
+/**
+ * Return value from the useCarouselSwipe hook
+ */
+interface CarouselSwipeReturn {
+    /** Current active slide index */
+    currentIndex: number;
+    /** Current swipe offset in pixels */
+    swipeOffset: number;
+    /** Whether user is currently swiping */
+    isSwiping: boolean;
+    /** Whether viewport is mobile size */
+    isMobile: boolean;
+    /** Memoized container width */
+    containerWidth: number;
+    /** Ref to attach to the carousel container element */
+    containerRef: React__default.RefObject<HTMLDivElement>;
+    /** Navigate to next slide */
+    nextSlide: () => void;
+    /** Navigate to previous slide */
+    prevSlide: () => void;
+    /** Navigate to specific slide index */
+    goToSlide: (index: number) => void;
+    /** Touch start handler */
+    handleTouchStart: (e: React__default.TouchEvent) => void;
+    /** Touch move handler */
+    handleTouchMove: (e: React__default.TouchEvent) => void;
+    /** Touch end handler */
+    handleTouchEnd: () => void;
+    /** Constants used for calculations */
+    constants: {
+        CARD_OFFSET_PERCENTAGE: number;
+        SWIPE_THRESHOLD: number;
+        MOBILE_BREAKPOINT: number;
+        AUTO_SCROLL_INTERVAL: number;
+    };
+}
+/**
+ * Custom hook for implementing swipe/touch gestures in carousels
+ *
+ * Features:
+ * - Touch/swipe support with smooth finger-following
+ * - Auto-scroll with pause on interaction
+ * - Responsive mobile detection with resize listener
+ * - Performance optimized with memoization
+ * - Configurable thresholds and behavior
+ *
+ * @example
+ * ```tsx
+ * const carousel = useCarouselSwipe({
+ *   itemCount: items.length,
+ *   autoScrollInterval: 5000,
+ * });
+ *
+ * return (
+ *   <div
+ *     ref={carousel.containerRef}
+ *     onTouchStart={carousel.handleTouchStart}
+ *     onTouchMove={carousel.handleTouchMove}
+ *     onTouchEnd={carousel.handleTouchEnd}
+ *   >
+ *     {items.map((item, index) => (
+ *       <div
+ *         key={index}
+ *         style={{
+ *           transform: `translateX(${calculateTransform(index, carousel)})`,
+ *         }}
+ *       >
+ *         {item}
+ *       </div>
+ *     ))}
+ *   </div>
+ * );
+ * ```
+ */
+declare function useCarouselSwipe(config: CarouselSwipeConfig): CarouselSwipeReturn;
+
 /**
  * Utility function to combine class names using clsx
  * @param inputs - Class values to combine
@@ -440,5 +533,5 @@ declare function useBodyScrollLock(isOpen: boolean, hideScrollOnIsOpenFalse: boo
  */
 declare const cx: (...val: ClassValue[]) => string;
 
-export { Accordion, AlertCard, BrandButton, Button, CallButton, Checkbox, Checklist, Collapse, Divider, Image, Input, InputField, Link, List, ListItem, MaterialIcon, Modal, NextImage, PageSkeleton, RadioButton, SeeMore, Select, SelectPlanButton, Skeleton, Spinner, Text, Input as TextInput, Tooltip, ViewCartButton, cx, useBodyScrollLock };
-export type { AlertCardProps, Animation, ButtonProps as BrandButtonProps, ButtonSizeT, ButtonVariantsT, CheckboxProps, CollapsibleProps, DividerProps, FilterOptions, IconName, IconProps, ImageComponentProps, ImageProps, InputFieldProps, InputProps, LinkProps, ListItemProps, ListProps, ModalProps, NextImageComponentProps, RadioButtonProps, ResponsiveSize, SelectOption, SelectPlanButtonProps, SelectProps, Shape, Size, SkeletonProps, SpinnerProps, TextProps, TextVariant, ToolTipProps, ViewCartButtonProps };
+export { Accordion, AlertCard, BrandButton, Button, CallButton, Checkbox, Checklist, Collapse, Divider, Image, Input, InputField, Link, List, ListItem, MaterialIcon, Modal, NextImage, PageSkeleton, RadioButton, SeeMore, Select, SelectPlanButton, Skeleton, Spinner, Text, Input as TextInput, Tooltip, ViewCartButton, cx, useBodyScrollLock, useCarouselSwipe };
+export type { AlertCardProps, Animation, ButtonProps as BrandButtonProps, ButtonSizeT, ButtonVariantsT, CarouselSwipeConfig, CarouselSwipeReturn, CheckboxProps, CollapsibleProps, DividerProps, FilterOptions, IconName, IconProps, ImageComponentProps, ImageProps, InputFieldProps, InputProps, LinkProps, ListItemProps, ListProps, ModalProps, NextImageComponentProps, RadioButtonProps, ResponsiveSize, SelectOption, SelectPlanButtonProps, SelectProps, Shape, Size, SkeletonProps, SpinnerProps, TextProps, TextVariant, ToolTipProps, ViewCartButtonProps };