trepur_components 2.3.8 → 2.3.10

package/lib/components/CarouselThumbnail/CarouselThumbnail.stories.d.ts

@@ -1,543 +1,19 @@
-import { CarouselThumbnail } from '.';
 import { StoryObj } from '@storybook/react';
+import { CarouselThumbnail } from './';
 
 declare const meta: {
     title: string;
-    component: ({ id, className, slideWrapperClassName, title, description, bgColour, breakpoints, defaultAnimation, disabled, drag, dragSpeed, initial, loop, mode, range, renderMode, rtl, rubberband, slides, vertical, animationStarted, animationStopped, animationEnded, created, destroyed, detailsChanged, dragged, dragStarted, dragChecked, dragEnded, beforeOptionsChanged, optionsChanged, slideChanged, updated, spacing, number, origin, }: import('.').CarouselProps) => import("react/jsx-runtime").JSX.Element;
-    parameters: {};
-    argTypes: {
-        breakpoints: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        defaultAnimation: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        drag: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        dragSpeed: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        initial: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        loop: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        mode: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        range: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        renderMode: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        rtl: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        rubberband: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        slides: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        vertical: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        animationStarted: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        animationStopped: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        animationEnded: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        destroyed: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        detailsChanged: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        dragged: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        dragStarted: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        dragChecked: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        dragEnded: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        beforeOptionsChanged: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        optionsChanged: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        updated: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        perView: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        spacing: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        number: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        origin: {
-            type: {
-                name: string;
-                required: boolean;
-            };
-            description: string;
-            table: {
-                category: string;
-                subcategory: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        id: {
-            description: string;
-            control: {
-                type: string;
-                default: boolean;
-            };
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-        className: {
-            description: string;
-            control: {
-                type: string;
-                default: boolean;
-            };
-            table: {
-                category: string;
-                type: {
-                    summary: string;
-                };
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
+    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('./').CarouselThumbnailContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+        Slides: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+        Slide: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLImageElement> & {
+            src: string;
+        } & import('react').RefAttributes<HTMLImageElement>>;
     };
     args: {
-        title: string;
-        description: string;
-        loop: boolean;
-        drag: boolean;
-        slides: import("react/jsx-runtime").JSX.Element[];
+        children: import("react/jsx-runtime").JSX.Element[];
+        loop: true;
+        drag: true;
+        rubberband: true;
         spacing: number;
     };
 };

package/lib/components/CarouselThumbnail/const.d.ts

@@ -0,0 +1 @@
+export declare const breakpointsToRender: any;

package/lib/components/CarouselThumbnail/const.js

@@ -0,0 +1,20 @@
+const i = {
+  "(min-width: 320px)": {
+    slides: { perView: 1, spacing: 25 }
+  },
+  "(max-width: 500px)": {
+    slides: { perView: 1, spacing: 25 }
+  },
+  "(min-width: 768px)": {
+    slides: { perView: 1, spacing: 25 }
+  },
+  "(min-width: 1024px)": {
+    slides: { perView: 2, spacing: 20 }
+  },
+  "(min-width: 1280px)": {
+    slides: { perView: 2, spacing: 10 }
+  }
+};
+export {
+  i as breakpointsToRender
+};

package/lib/components/CarouselThumbnail/index.d.ts

@@ -1,19 +1,14 @@
 import { KeenSliderInstance, KeenSliderHooks, KeenSliderOptions } from 'keen-slider/react';
-import { Colours } from '../../utils/controls';
+import { HTMLAttributes } from 'react';
 
-export interface CarouselProps {
-    id?: string;
-    className?: string;
+export interface CarouselThumbnailContextProps {
     slideWrapperClassName?: string;
-    title?: string;
-    description?: string;
-    bgColour?: Colours;
     breakpoints?: Record<string, Omit<KeenSliderOptions<{}, {}, KeenSliderHooks>, 'breakpoints'>>;
     defaultAnimation?: {
         duration?: number;
         easing?: (t: number) => number;
     };
-    disabled: boolean;
+    disabled?: boolean;
     drag?: boolean;
     dragSpeed?: number;
     initial?: number;
@@ -47,4 +42,10 @@ export interface CarouselProps {
     number?: number;
     origin?: number | 'auto' | 'center';
 }
-export declare const CarouselThumbnail: ({ id, className, slideWrapperClassName, title, description, bgColour, breakpoints, defaultAnimation, disabled, drag, dragSpeed, initial, loop, mode, range, renderMode, rtl, rubberband, slides, vertical, animationStarted, animationStopped, animationEnded, created, destroyed, detailsChanged, dragged, dragStarted, dragChecked, dragEnded, beforeOptionsChanged, optionsChanged, slideChanged, updated, spacing, number, origin, }: CarouselProps) => import("react/jsx-runtime").JSX.Element;
+declare const CarouselThumbnail: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & CarouselThumbnailContextProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Slides: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+    Slide: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLImageElement> & {
+        src: string;
+    } & import('react').RefAttributes<HTMLImageElement>>;
+};
+export { CarouselThumbnail };