@uibit/carousel 0.1.1 → 0.2.0

package/custom-elements.json

@@ -710,6 +710,14 @@
             "module": "./carousel"
           }
         },
+        {
+          "kind": "js",
+          "name": "UIBitCarousel",
+          "declaration": {
+            "name": "UIBitCarousel",
+            "module": "./carousel"
+          }
+        },
         {
           "kind": "js",
           "name": "CarouselConfig",

package/dist/frameworks/angular/index.ts

@@ -1,86 +1,98 @@
-import { Component, ChangeDetectionStrategy, ElementRef, input, effect, output, booleanAttribute, numberAttribute } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ElementRef, model, input, effect, output, booleanAttribute, numberAttribute } from '@angular/core';
 import '@uibit/carousel';
 import type { UIBitCarousel as HTMLElementClass } from '@uibit/carousel';
-
 @Component({
-  selector: 'uibit-carousel',
-  template: '<ng-content></ng-content>',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  host: {
-    '(slide-change)': 'slideChange.emit($event)'
-  }
+    selector: 'uibit-carousel',
+    template: '<ng-content></ng-content>',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    host: {
+        '(slide-change)': 'slideChange.emit($event); totalSlides.set($event.detail?.totalSlides !== undefined ? $event.detail.totalSlides : $event.target.totalSlides)'
+    }
 })
 export class NgxUIBitCarousel {
-  constructor(private el: ElementRef<HTMLElementClass>) {
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.autoPlay = this.autoPlay();
-      }
+    constructor(private el: ElementRef<HTMLElementClass>){
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.autoPlay = this.autoPlay();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.autoPlayInterval = this.autoPlayInterval();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.loop = this.loop();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.content = this.content();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.viewport = this.viewport();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.slotElement = this.slotElement();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.currentIndex = this.currentIndex();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.totalSlides = this.totalSlides();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.canPrev = this.canPrev();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.canNext = this.canNext();
+            }
+        });
+        effect(()=>{
+            if (this.el.nativeElement) {
+                this.el.nativeElement.locale = this.locale();
+            }
+        });
+    }
+    readonly autoPlay = input<boolean, any>(false, {
+        transform: booleanAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.autoPlayInterval = this.autoPlayInterval();
-      }
+    readonly autoPlayInterval = input<number, any>(5000, {
+        transform: numberAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.loop = this.loop();
-      }
+    readonly loop = input<boolean, any>(true, {
+        transform: booleanAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.content = this.content();
-      }
+    readonly content = input<HTMLElement | undefined>(undefined);
+    readonly viewport = input<HTMLElement | undefined>(undefined);
+    readonly slotElement = input<HTMLSlotElement | undefined>(undefined);
+    readonly currentIndex = input<number, any>(0, {
+        transform: numberAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.viewport = this.viewport();
-      }
+    readonly totalSlides = model<number>(0);
+    readonly canPrev = input<boolean, any>(false, {
+        transform: booleanAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.slotElement = this.slotElement();
-      }
+    readonly canNext = input<boolean, any>(true, {
+        transform: booleanAttribute
     });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.currentIndex = this.currentIndex();
-      }
-    });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.totalSlides = this.totalSlides();
-      }
-    });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.canPrev = this.canPrev();
-      }
-    });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.canNext = this.canNext();
-      }
-    });
-    effect(() => {
-      if (this.el.nativeElement) {
-        this.el.nativeElement.locale = this.locale();
-      }
-    });
-  }
-
-  readonly autoPlay = input<boolean, any>(false, { transform: booleanAttribute });
-  readonly autoPlayInterval = input<number, any>(5000, { transform: numberAttribute });
-  readonly loop = input<boolean, any>(true, { transform: booleanAttribute });
-  readonly content = input<HTMLElement | undefined, any>(undefined);
-  readonly viewport = input<HTMLElement | undefined, any>(undefined);
-  readonly slotElement = input<HTMLSlotElement | undefined, any>(undefined);
-  readonly currentIndex = input<number, any>(0, { transform: numberAttribute });
-  readonly totalSlides = input<number, any>(0, { transform: numberAttribute });
-  readonly canPrev = input<boolean, any>(false, { transform: booleanAttribute });
-  readonly canNext = input<boolean, any>(true, { transform: booleanAttribute });
-  readonly locale = input<string, any>('');
-
-  readonly slideChange = output<CustomEvent<{ index: number, totalSlides: number }>>();
+    readonly locale = input<string>('');
+    readonly slideChange = output<CustomEvent<{
+        index: number;
+        totalSlides: number;
+    }>>();
 }

package/dist/frameworks/astro/index.d.ts

@@ -4,7 +4,20 @@ import '@uibit/carousel';
 declare global {
   namespace astroHTML.JSX {
     interface IntrinsicElements {
-      'uibit-carousel': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+      'uibit-carousel': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes & {
+      autoPlay?: boolean;
+      autoPlayInterval?: number;
+      loop?: boolean;
+      content?: HTMLElement | undefined;
+      viewport?: HTMLElement | undefined;
+      slotElement?: HTMLSlotElement | undefined;
+      currentIndex?: number;
+      totalSlides?: number;
+      canPrev?: boolean;
+      canNext?: boolean;
+      locale?: string;
+      "on:slide-change"?: (event: CustomEvent<{ index: number, totalSlides: number }>) => void;
+      };
     }
   }
 }

package/dist/frameworks/preact/index.d.ts

@@ -17,6 +17,8 @@ declare module 'preact' {
       canPrev?: boolean;
       canNext?: boolean;
       locale?: string;
+      onSlideChange?: (event: CustomEvent<{ index: number, totalSlides: number }>) => void;
+      "on:slide-change"?: (event: CustomEvent<{ index: number, totalSlides: number }>) => void;
       };
     }
   }

package/dist/frameworks/react/index.ts

@@ -0,0 +1,182 @@
+import React, { useRef, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
+import type { UIBitCarousel as HTMLElementClass } from '@uibit/carousel';
+import '@uibit/carousel';
+const useTypeOfLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+export interface UIBitCarouselProps extends Omit<React.HTMLAttributes<HTMLElementClass>, 'autoPlay' | 'autoPlayInterval' | 'loop' | 'content' | 'viewport' | 'slotElement' | 'currentIndex' | 'totalSlides' | 'canPrev' | 'canNext' | 'locale' | 'onSlideChange'> {
+    children?: React.ReactNode;
+    autoPlay?: boolean;
+    autoPlayInterval?: number;
+    loop?: boolean;
+    content?: HTMLElement | undefined;
+    viewport?: HTMLElement | undefined;
+    slotElement?: HTMLSlotElement | undefined;
+    currentIndex?: number;
+    totalSlides?: number;
+    canPrev?: boolean;
+    canNext?: boolean;
+    locale?: string;
+    onSlideChange?: (event: CustomEvent<{
+        index: number;
+        totalSlides: number;
+    }>) => void;
+}
+export const UIBitCarousel = ({ ref, children, ...props }: UIBitCarouselProps & {
+    ref?: React.Ref<HTMLElementClass>;
+})=>{
+    const innerRef = useRef<HTMLElementClass>(null);
+    const propsRef = useRef(props);
+    propsRef.current = props;
+    useImperativeHandle(ref, ()=>innerRef.current!);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.autoPlay !== undefined) {
+            (element as any).autoPlay = props.autoPlay;
+        }
+    }, [
+        props.autoPlay
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.autoPlayInterval !== undefined) {
+            (element as any).autoPlayInterval = props.autoPlayInterval;
+        }
+    }, [
+        props.autoPlayInterval
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.loop !== undefined) {
+            (element as any).loop = props.loop;
+        }
+    }, [
+        props.loop
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.content !== undefined) {
+            (element as any).content = props.content;
+        }
+    }, [
+        props.content
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.viewport !== undefined) {
+            (element as any).viewport = props.viewport;
+        }
+    }, [
+        props.viewport
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.slotElement !== undefined) {
+            (element as any).slotElement = props.slotElement;
+        }
+    }, [
+        props.slotElement
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.currentIndex !== undefined) {
+            (element as any).currentIndex = props.currentIndex;
+        }
+    }, [
+        props.currentIndex
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.totalSlides !== undefined) {
+            (element as any).totalSlides = props.totalSlides;
+        }
+    }, [
+        props.totalSlides
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.canPrev !== undefined) {
+            (element as any).canPrev = props.canPrev;
+        }
+    }, [
+        props.canPrev
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.canNext !== undefined) {
+            (element as any).canNext = props.canNext;
+        }
+    }, [
+        props.canNext
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (element && props.locale !== undefined) {
+            (element as any).locale = props.locale;
+        }
+    }, [
+        props.locale
+    ]);
+    useTypeOfLayoutEffect(()=>{
+        const element = innerRef.current;
+        if (!element) return;
+        const handleEvent = (event: Event)=>{
+            if (propsRef.current.onSlideChange) {
+                propsRef.current.onSlideChange(event as any);
+            }
+        };
+        element.addEventListener('slide-change', handleEvent);
+        return ()=>{
+            element.removeEventListener('slide-change', handleEvent);
+        };
+    }, []);
+    const domProps = {
+        ...props
+    };
+    const customPropNames = [
+        'autoPlay',
+        'autoPlayInterval',
+        'loop',
+        'content',
+        'viewport',
+        'slotElement',
+        'currentIndex',
+        'totalSlides',
+        'canPrev',
+        'canNext',
+        'locale',
+        'onSlideChange'
+    ];
+    for (const key of customPropNames){
+        delete (domProps as any)[key];
+    }
+    return React.createElement('uibit-carousel', {
+        ref: innerRef,
+        ...domProps
+    }, children);
+};
+declare global {
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                'uibit-carousel': React.ClassAttributes<HTMLElementClass> & React.HTMLAttributes<HTMLElementClass> & {
+                    children?: React.ReactNode;
+                    class?: string;
+                    autoPlay?: boolean;
+                    autoPlayInterval?: number;
+                    loop?: boolean;
+                    content?: HTMLElement | undefined;
+                    viewport?: HTMLElement | undefined;
+                    slotElement?: HTMLSlotElement | undefined;
+                    currentIndex?: number;
+                    totalSlides?: number;
+                    canPrev?: boolean;
+                    canNext?: boolean;
+                    locale?: string;
+                    onSlideChange?: (event: CustomEvent<{
+                        index: number;
+                        totalSlides: number;
+                    }>) => void;
+                };
+            }
+        }
+    }
+}

package/dist/frameworks/solid/index.d.ts

@@ -17,7 +17,7 @@ declare module 'solid-js' {
       canPrev?: boolean;
       canNext?: boolean;
       locale?: string;
-      "on:slide-change"?: (event: CustomEvent) => void;
+      "on:slide-change"?: (event: CustomEvent<{ index: number, totalSlides: number }>) => void;
       };
     }
   }

package/dist/frameworks/stencil/index.d.ts

@@ -16,6 +16,8 @@ declare module '@stencil/core' {
     canPrev?: boolean;
     canNext?: boolean;
     locale?: string;
+    onSlideChange?: (event: CustomEvent<{ index: number, totalSlides: number }>) => void;
+    "on:slide-change"?: (event: CustomEvent<{ index: number, totalSlides: number }>) => void;
       };
     }
   }

package/dist/frameworks/svelte/index.svelte

@@ -1,23 +1,24 @@
 <script lang="ts">
   import '@uibit/carousel';
   import type { UIBitCarousel as HTMLElementClass } from '@uibit/carousel';
-  
-  let {
-    autoPlay = undefined,
-      autoPlayInterval = undefined,
-      loop = undefined,
-      content = undefined,
-      viewport = undefined,
-      slotElement = undefined,
-      currentIndex = undefined,
-      totalSlides = undefined,
-      canPrev = undefined,
-      canNext = undefined,
-      locale = undefined,
-      item = undefined,
-      children
+
+let {
+    autoPlay = $bindable(),
+    autoPlayInterval = $bindable(),
+    loop = $bindable(),
+    content = $bindable(),
+    viewport = $bindable(),
+    slotElement = $bindable(),
+    currentIndex = $bindable(),
+    totalSlides = $bindable(),
+    canPrev = $bindable(),
+    canNext = $bindable(),
+    locale = $bindable(),
+    item = undefined,
+    children,
+    ...restProps
   } = $props<{
-    children?: any;
+    children?: import('svelte').Snippet;
     autoPlay?: boolean;
     autoPlayInterval?: number;
     loop?: boolean;
@@ -30,49 +31,101 @@
     canNext?: boolean;
     locale?: string;
     item?: import('svelte').Snippet;
+    [key: string]: any;
   }>();
-  
-  let elementRef: HTMLElementClass | null = $state(null);
-  
-  $effect(() => {
-    if (elementRef && autoPlay !== undefined) {
+
+let elementRef: HTMLElementClass | null = $state(null);
+
+$effect(() => {
+    if (elementRef && autoPlay !== undefined && elementRef.autoPlay !== autoPlay) {
       elementRef.autoPlay = autoPlay;
     }
-    if (elementRef && autoPlayInterval !== undefined) {
+    if (elementRef && autoPlayInterval !== undefined && elementRef.autoPlayInterval !== autoPlayInterval) {
       elementRef.autoPlayInterval = autoPlayInterval;
     }
-    if (elementRef && loop !== undefined) {
+    if (elementRef && loop !== undefined && elementRef.loop !== loop) {
       elementRef.loop = loop;
     }
-    if (elementRef && content !== undefined) {
+    if (elementRef && content !== undefined && elementRef.content !== content) {
       elementRef.content = content;
     }
-    if (elementRef && viewport !== undefined) {
+    if (elementRef && viewport !== undefined && elementRef.viewport !== viewport) {
       elementRef.viewport = viewport;
     }
-    if (elementRef && slotElement !== undefined) {
+    if (elementRef && slotElement !== undefined && elementRef.slotElement !== slotElement) {
       elementRef.slotElement = slotElement;
     }
-    if (elementRef && currentIndex !== undefined) {
+    if (elementRef && currentIndex !== undefined && elementRef.currentIndex !== currentIndex) {
       elementRef.currentIndex = currentIndex;
     }
-    if (elementRef && totalSlides !== undefined) {
+    if (elementRef && totalSlides !== undefined && elementRef.totalSlides !== totalSlides) {
       elementRef.totalSlides = totalSlides;
     }
-    if (elementRef && canPrev !== undefined) {
+    if (elementRef && canPrev !== undefined && elementRef.canPrev !== canPrev) {
       elementRef.canPrev = canPrev;
     }
-    if (elementRef && canNext !== undefined) {
+    if (elementRef && canNext !== undefined && elementRef.canNext !== canNext) {
       elementRef.canNext = canNext;
     }
-    if (elementRef && locale !== undefined) {
+    if (elementRef && locale !== undefined && elementRef.locale !== locale) {
       elementRef.locale = locale;
     }
   });
-  
+
+$effect(() => {
+    const element = elementRef;
+    if (!element) return;
+
+    const handleEvent = () => {
+      if (autoPlay !== element.autoPlay) {
+        autoPlay = element.autoPlay as any;
+      }
+      if (autoPlayInterval !== element.autoPlayInterval) {
+        autoPlayInterval = element.autoPlayInterval as any;
+      }
+      if (loop !== element.loop) {
+        loop = element.loop as any;
+      }
+      if (content !== element.content) {
+        content = element.content as any;
+      }
+      if (viewport !== element.viewport) {
+        viewport = element.viewport as any;
+      }
+      if (slotElement !== element.slotElement) {
+        slotElement = element.slotElement as any;
+      }
+      if (currentIndex !== element.currentIndex) {
+        currentIndex = element.currentIndex as any;
+      }
+      if (totalSlides !== element.totalSlides) {
+        totalSlides = element.totalSlides as any;
+      }
+      if (canPrev !== element.canPrev) {
+        canPrev = element.canPrev as any;
+      }
+      if (canNext !== element.canNext) {
+        canNext = element.canNext as any;
+      }
+      if (locale !== element.locale) {
+        locale = element.locale as any;
+      }
+    };
+
+    const events = ['change', 'input', 'slide-change'];
+    for (const event of events) {
+      element.addEventListener(event, handleEvent);
+    }
+    return () => {
+      for (const event of events) {
+        element.removeEventListener(event, handleEvent);
+      }
+    };
+  });
+
 </script>
 
-<uibit-carousel bind:this={elementRef} {...$$restProps}>
+<uibit-carousel bind:this={elementRef} {...restProps}>
   {#if item}
     <div slot="item">
       {@render item()}

package/dist/frameworks/vue/index.ts

@@ -1,34 +1,195 @@
-import { defineComponent, h } from 'vue';
+import { defineComponent, h, ref, watch } from 'vue';
 import type { UIBitCarousel as HTMLElementClass } from '@uibit/carousel';
 import '@uibit/carousel';
-
 export const UIBitCarousel = defineComponent({
-  name: 'UIBitCarousel',
-  props: {
-    autoPlay: { type: [String, Number, Boolean, Array, Object] as any },
-    autoPlayInterval: { type: [String, Number, Boolean, Array, Object] as any },
-    loop: { type: [String, Number, Boolean, Array, Object] as any },
-    content: { type: [String, Number, Boolean, Array, Object] as any },
-    viewport: { type: [String, Number, Boolean, Array, Object] as any },
-    slotElement: { type: [String, Number, Boolean, Array, Object] as any },
-    currentIndex: { type: [String, Number, Boolean, Array, Object] as any },
-    totalSlides: { type: [String, Number, Boolean, Array, Object] as any },
-    canPrev: { type: [String, Number, Boolean, Array, Object] as any },
-    canNext: { type: [String, Number, Boolean, Array, Object] as any },
-    locale: { type: [String, Number, Boolean, Array, Object] as any }
-  },
-  emits: ['slide-change'],
-  setup(props, { slots, emit }) {
-    return () => {
-      const eventListeners: Record<string, any> = {};
-      eventListeners['onSlide-change'] = (event: Event) => {
-        emit('slide-change', event);
-      };
-
-      return h('uibit-carousel', {
-        ...props,
-        ...eventListeners
-      }, slots.default?.());
-    };
-  }
+    name: 'UIBitCarousel',
+    props: {
+        autoPlay: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        autoPlayInterval: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        loop: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        content: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        viewport: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        slotElement: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        currentIndex: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        totalSlides: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        canPrev: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        canNext: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        },
+        locale: {
+            type: [
+                String,
+                Number,
+                Boolean,
+                Array,
+                Object
+            ] as any
+        }
+    },
+    emits: [
+        'slide-change'
+    ],
+    setup (props, { slots, emit }) {
+        const elementRef = ref<HTMLElementClass | null>(null);
+        if (false) {
+            watch(()=>props.modelValue, (newVal)=>{
+                if (elementRef.value && newVal !== undefined && elementRef.value.value !== newVal) {
+                    elementRef.value.value = newVal;
+                }
+            });
+            watch(()=>props.value, (newVal)=>{
+                if (elementRef.value && newVal !== undefined && elementRef.value.value !== newVal) {
+                    elementRef.value.value = newVal;
+                }
+            });
+        }
+        watch(()=>props.autoPlay, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).autoPlay = newVal;
+            }
+        });
+        watch(()=>props.autoPlayInterval, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).autoPlayInterval = newVal;
+            }
+        });
+        watch(()=>props.loop, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).loop = newVal;
+            }
+        });
+        watch(()=>props.content, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).content = newVal;
+            }
+        });
+        watch(()=>props.viewport, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).viewport = newVal;
+            }
+        });
+        watch(()=>props.slotElement, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).slotElement = newVal;
+            }
+        });
+        watch(()=>props.currentIndex, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).currentIndex = newVal;
+            }
+        });
+        watch(()=>props.totalSlides, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).totalSlides = newVal;
+            }
+        });
+        watch(()=>props.canPrev, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).canPrev = newVal;
+            }
+        });
+        watch(()=>props.canNext, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).canNext = newVal;
+            }
+        });
+        watch(()=>props.locale, (newVal)=>{
+            if (elementRef.value && newVal !== undefined) {
+                (elementRef.value as any).locale = newVal;
+            }
+        });
+        return ()=>{
+            const eventListeners: Record<string, any> = {};
+            eventListeners['onSlide-change'] = (event: Event)=>{
+                emit('slide-change', event);
+            };
+            const mergedProps = {
+                ...props,
+                ...eventListeners,
+                ref: elementRef
+            };
+            if (false && props.modelValue !== undefined) {
+                (mergedProps as any).value = props.modelValue;
+            }
+            return h('uibit-carousel', mergedProps, slots.default?.());
+        };
+    }
 });

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { UIBitCarousel as default } from './carousel';
+export { UIBitCarousel as default, UIBitCarousel } from './carousel';
 export type { CarouselConfig, SlideChangeEvent } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC;AACtD,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -1,2 +1,2 @@
-export { UIBitCarousel as default } from './carousel';
+export { UIBitCarousel as default, UIBitCarousel } from './carousel';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uibit/carousel",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Native, accessible carousel using CSS scroll-snap and scroll-driven animations. Perfect for image galleries, testimonials, and product showcases.",
   "type": "module",
   "main": "./dist/index.js",
@@ -12,7 +12,10 @@
     },
     "./carousel.css": "./dist/carousel.css",
     "./custom-elements.json": "./custom-elements.json",
-    "./react": "./dist/frameworks/react/index.d.ts",
+    "./react": {
+      "types": "./dist/frameworks/react/index.ts",
+      "import": "./dist/frameworks/react/index.ts"
+    },
     "./vue": "./dist/frameworks/vue/index.ts",
     "./svelte": "./dist/frameworks/svelte/index.svelte",
     "./angular": "./dist/frameworks/angular/index.ts",
@@ -53,7 +56,7 @@
     "@types/node": "^20.19.43",
     "lit": "^3.3.3",
     "typescript": "7.0.2",
-    "@uibit/codegen": "0.1.0"
+    "@uibit/codegen": "0.2.0"
   },
   "peerDependencies": {
     "lit": "^3.0.0",

package/dist/frameworks/react/index.d.ts

@@ -1,28 +0,0 @@
-import type { HTMLAttributes, ClassAttributes } from 'react';
-import type { UIBitCarousel as HTMLElementClass } from '@uibit/carousel';
-import '@uibit/carousel';
-
-declare global {
-  namespace React {
-    namespace JSX {
-      interface IntrinsicElements {
-        'uibit-carousel': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
-          children?: React.ReactNode;
-          class?: string;
-      autoPlay?: boolean;
-      autoPlayInterval?: number;
-      loop?: boolean;
-      content?: HTMLElement | undefined;
-      viewport?: HTMLElement | undefined;
-      slotElement?: HTMLSlotElement | undefined;
-      currentIndex?: number;
-      totalSlides?: number;
-      canPrev?: boolean;
-      canNext?: boolean;
-      locale?: string;
-      onSlideChange?: (event: any) => void;
-        };
-      }
-    }
-  }
-}