@ehmetlabs/webf-react-carousel-slider 0.1.0

package/README.md

@@ -0,0 +1,157 @@
+# WebF React Carousel Slider
+
+React wrapper for the WebF `<carousel-slider>` custom element. It is intended for WebF environments where the Flutter custom element is registered.
+
+## Requirements
+
+- React >= 16.8
+- react-dom >= 16.8
+- @openwebf/react-core-ui ^0.24.2
+- Flutter-side registration via `webf_carousel_slider` (see `native_uis/webf_carousel_slider`)
+
+## Installation
+
+```bash
+npm install @ehmetlabs/webf-react-carousel-slider
+```
+
+## Usage
+
+```tsx
+import React, { useRef } from 'react';
+import {
+  CarouselSlider,
+  CarouselSliderElement,
+  Axis,
+  Curve,
+} from '@ehmetlabs/webf-react-carousel-slider';
+
+export function App() {
+  const ref = useRef<CarouselSliderElement>(null);
+
+  return (
+    <CarouselSlider
+      ref={ref}
+      autoplay
+      autoplayInterval={4}
+      aspectRatio={16 / 9}
+      viewportFraction={0.8}
+      enlargeCenterPage
+      scrollDirection={Axis.horizontal}
+      autoPlayCurve={Curve.fastOutSlowIn}
+      onChange={(event) => {
+        console.log(event.detail.index, event.detail.reason);
+      }}
+    >
+      <img src="https://example.com/1.jpg" />
+      <img src="https://example.com/2.jpg" />
+    </CarouselSlider>
+  );
+}
+```
+
+## Options JSON (batch config + items)
+
+If you prefer a single JSON string, use `options`. Keys are camelCase.
+
+```tsx
+<CarouselSlider
+  options={JSON.stringify({
+    autoplay: true,
+    autoplayInterval: 3,
+    items: [
+      { id: 1, url: 'https://example.com/1.jpg' },
+      { id: 2, url: 'https://example.com/2.jpg' },
+    ],
+  })}
+  onItemclick={(event) => {
+    console.log('Clicked:', event.detail.id);
+  }}
+/>;
+```
+
+Notes:
+
+- `items` is used only when there are no children.
+- Invalid JSON triggers an `error` event on the underlying element.
+
+## Props
+
+All props map to kebab-case attributes on `<carousel-slider>` unless noted.
+
+| Prop | Type | Default | Attribute |
+| --- | --- | --- | --- |
+| `currentIndex` | number | 0 | `current-index` |
+| `options` | string (JSON) | - | `options` |
+| `height` | string | - | `height` |
+| `aspectRatio` | number | 16/9 | `aspect-ratio` |
+| `viewportFraction` | number | 0.8 | `viewport-fraction` |
+| `initialPage` | number | 0 | `initial-page` |
+| `padEnds` | boolean | true | `pad-ends` |
+| `disableCenter` | boolean | false | `disable-center` |
+| `enableInfiniteScroll` | boolean | true | `enable-infinite-scroll` |
+| `animateToClosest` | boolean | true | `animate-to-closest` |
+| `reverse` | boolean | false | `reverse` |
+| `scrollDirection` | Axis | Axis.horizontal | `scroll-direction` |
+| `pageSnapping` | boolean | true | `page-snapping` |
+| `scrollPhysics` | string | - | `scroll-physics` |
+| `autoplay` | boolean | false | `autoplay` |
+| `autoplayInterval` | number (seconds) | 4.0 | `autoplay-interval` |
+| `autoPlayAnimationDuration` | number (ms) | 800 | `auto-play-animation-duration` |
+| `autoPlayCurve` | Curve | Curves.fastOutSlowIn | `auto-play-curve` |
+| `pauseAutoPlayOnTouch` | boolean | true | `pause-auto-play-on-touch` |
+| `pauseAutoPlayOnManualNavigate` | boolean | true | `pause-auto-play-on-manual-navigate` |
+| `pauseAutoPlayInFiniteScroll` | boolean | false | `pause-auto-play-in-finite-scroll` |
+| `enlargeCenterPage` | boolean | false | `enlarge-center-page` |
+| `enlargeStrategy` | CenterPageEnlargeStrategy | scale | `enlarge-strategy` |
+| `enlargeFactor` | number | 0.3 | `enlarge-factor` |
+| `id` | string | - | `id` |
+| `className` | string | - | `class` |
+| `style` | React.CSSProperties | - | - |
+| `children` | React.ReactNode | - | - |
+
+Value notes:
+
+- `scrollDirection`: use `Axis.horizontal` or `Axis.vertical` (strings like `horizontal` are also accepted).
+- `autoPlayCurve`: use `Curve` enum values such as `Curves.fastOutSlowIn`.
+- `enlargeStrategy`: `CenterPageEnlargeStrategy.scale`, `height`, or `zoom`.
+- `scrollPhysics`: `clamping`, `bouncing`, or `fixed`.
+
+### Event props
+
+| Prop | DOM event | Detail |
+| --- | --- | --- |
+| `onChange` | `change` | `{ index, reason }` |
+| `onSlidestart` | `slidestart` | - |
+| `onSlideend` | `slideend` | - |
+| `onPageanimationstart` | `pageanimationstart` | `{ from, to }` |
+| `onPageanimationend` | `pageanimationend` | `{ index }` |
+| `onAutoplaypause` | `autoplaypause` | - |
+| `onAutoplayresume` | `autoplayresume` | - |
+| `onScrolled` | `scrolled` | `number` |
+| `onItemclick` | `itemclick` | `{ id }` |
+
+If you need events not exposed as props (for example, `error`), attach a listener via `ref.current?.addEventListener(...)`.
+
+## Ref methods
+
+Use a ref to call imperative APIs on the element:
+
+- `next()` - next page (fixed 300ms ease animation)
+- `previous()` - previous page (fixed 300ms ease animation)
+- `jumpToPage(page: number)` - jump without animation
+- `pause()` / `resume()` - pause or resume autoplay
+- `startAutoPlay()` / `stopAutoPlay()` - explicit autoplay control
+
+## Build
+
+```bash
+npm run build
+```
+
+## Generated files
+
+The following files are generated. Do not edit them manually:
+
+- `src/index.ts`
+- `src/types.ts`

package/dist/index.d.mts

@@ -0,0 +1,297 @@
+import React from 'react';
+import { WebFElementWithMethods } from '@openwebf/react-core-ui';
+
+interface CarouselSliderProps {
+    /**
+     * Set carousel height. Overrides aspectRatio if provided.
+     */
+    height?: number;
+    /**
+     * Aspect ratio when height is not set.
+     * Default: 16 / 9
+     */
+    aspectRatio?: number;
+    /**
+     * The fraction of the viewport that each page should occupy.
+     * Default: 0.8 (carousel_slider_plus default)
+     */
+    viewportFraction?: number;
+    /**
+     * The initial page to show.
+     * Default: 0
+     */
+    initialPage?: number;
+    /**
+     * Determines if carousel should loop infinitely.
+     * Default: true
+     */
+    enableInfiniteScroll?: boolean;
+    /**
+     * Loop to the closest occurrence of requested page.
+     * Default: true
+     */
+    animateToClosest?: boolean;
+    /**
+     * Reverse the order of items.
+     * Default: false
+     */
+    reverse?: boolean;
+    /**
+     * Enables auto play.
+     * Default: false
+     */
+    autoPlay?: boolean;
+    /**
+     * Frequency of slides in milliseconds.
+     * Default: 4000
+     */
+    autoPlayInterval?: number;
+    /**
+     * Animation duration between pages in milliseconds.
+     * Default: 800
+     */
+    autoPlayAnimationDuration?: number;
+    /**
+     * Animation curve name.
+     * Default: 'fast-out-slow-in'
+     */
+    autoPlayCurve?: string;
+    /**
+     * Whether current page should be larger than side images.
+     * Default: false
+     */
+    enlargeCenterPage?: boolean;
+    /**
+     * Called whenever the page in the center changes.
+     */
+    onPageChanged?: any;
+    /**
+     * Called whenever the carousel is scrolled.
+     */
+    onScrolled?: any;
+    /**
+     * Scroll physics identifier.
+     */
+    scrollPhysics?: string;
+    /**
+     * Set to false to disable page snapping.
+     * Default: true
+     */
+    pageSnapping?: boolean;
+    /**
+     * Axis along which the page view scrolls.
+     * Default: 'horizontal'
+     */
+    scrollDirection?: 'horizontal' | 'vertical';
+    /**
+     * Pause auto play on touch.
+     * Default: true
+     */
+    pauseAutoPlayOnTouch?: boolean;
+    /**
+     * Pause auto play on manual navigation.
+     * Default: true
+     */
+    pauseAutoPlayOnManualNavigate?: boolean;
+    /**
+     * When finite scroll, decide whether auto play loops to first item.
+     * Default: false
+     */
+    pauseAutoPlayInFiniteScroll?: boolean;
+    /**
+     * PageStorageKey identifier.
+     */
+    pageViewKey?: string;
+    /**
+     * Determine which method to enlarge the center page.
+     * Default: 'scale'
+     */
+    enlargeStrategy?: 'scale' | 'height' | 'zoom';
+    /**
+     * How much the pages next to the center page will be scaled down.
+     * Default: 0.3
+     */
+    enlargeFactor?: number;
+    /**
+     * Whether to disable the Center widget for each slide.
+     * Default: false
+     */
+    disableCenter?: boolean;
+    /**
+     * Whether to add padding to both ends of the list.
+     * Default: true
+     */
+    padEnds?: boolean;
+    /**
+     * Clip behavior name.
+     * Default: 'hardEdge'
+     */
+    clipBehavior?: string;
+    /**
+     * Whether to disable touch gestures.
+     * Default: false
+     */
+    disableGesture?: boolean;
+    /**
+     * Current real page index (read-only).
+     */
+    realPage?: number;
+    /**
+     * HTML id attribute
+     */
+    id?: string;
+    /**
+     * Additional CSS styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Children elements
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Element interface with methods/properties accessible via ref
+ * @example
+ * ```tsx
+ * const ref = useRef<CarouselSliderElement>(null);
+ * // Call methods on the element
+ * ref.current?.finishRefresh('success');
+ * // Access properties
+ * console.log(ref.current?.height);
+ * ```
+ */
+interface CarouselSliderElement extends WebFElementWithMethods<{
+    /**
+     * Animates to the next page.
+     */
+    nextPage(duration: number, curve: string): void;
+    /**
+     * Animates to the previous page.
+     */
+    previousPage(duration: number, curve: string): void;
+    /**
+     * Jumps to a specific page without animation.
+     */
+    jumpToPage(page: number): void;
+    /**
+     * Animates to a specific page.
+     */
+    animateToPage(page: number, duration: number, curve: string): void;
+    /**
+     * Starts auto play.
+     */
+    startAutoPlay(): void;
+    /**
+     * Stops auto play.
+     */
+    stopAutoPlay(): void;
+}> {
+    /** Set carousel height. Overrides aspectRatio if provided. */
+    height?: number;
+    /** Aspect ratio when height is not set. */
+    aspectRatio?: number;
+    /** The fraction of the viewport that each page should occupy. */
+    viewportFraction?: number;
+    /** The initial page to show. */
+    initialPage?: number;
+    /** Determines if carousel should loop infinitely. */
+    enableInfiniteScroll?: boolean;
+    /** Loop to the closest occurrence of requested page. */
+    animateToClosest?: boolean;
+    /** Reverse the order of items. */
+    reverse?: boolean;
+    /** Enables auto play. */
+    autoPlay?: boolean;
+    /** Frequency of slides in milliseconds. */
+    autoPlayInterval?: number;
+    /** Animation duration between pages in milliseconds. */
+    autoPlayAnimationDuration?: number;
+    /** Animation curve name. */
+    autoPlayCurve?: string;
+    /** Whether current page should be larger than side images. */
+    enlargeCenterPage?: boolean;
+    /** Called whenever the page in the center changes. */
+    onPageChanged?: any;
+    /** Called whenever the carousel is scrolled. */
+    onScrolled?: any;
+    /** Scroll physics identifier. */
+    scrollPhysics?: string;
+    /** Set to false to disable page snapping. */
+    pageSnapping?: boolean;
+    /** Axis along which the page view scrolls. */
+    scrollDirection?: 'horizontal' | 'vertical';
+    /** Pause auto play on touch. */
+    pauseAutoPlayOnTouch?: boolean;
+    /** Pause auto play on manual navigation. */
+    pauseAutoPlayOnManualNavigate?: boolean;
+    /** When finite scroll, decide whether auto play loops to first item. */
+    pauseAutoPlayInFiniteScroll?: boolean;
+    /** PageStorageKey identifier. */
+    pageViewKey?: string;
+    /** Determine which method to enlarge the center page. */
+    enlargeStrategy?: 'scale' | 'height' | 'zoom';
+    /** How much the pages next to the center page will be scaled down. */
+    enlargeFactor?: number;
+    /** Whether to disable the Center widget for each slide. */
+    disableCenter?: boolean;
+    /** Whether to add padding to both ends of the list. */
+    padEnds?: boolean;
+    /** Clip behavior name. */
+    clipBehavior?: string;
+    /** Whether to disable touch gestures. */
+    disableGesture?: boolean;
+    /** Current real page index (read-only). */
+    readonly realPage?: number;
+}
+/**
+ * Properties for <webf-carousel-slider>.
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<CarouselSliderElement>(null);
+ *
+ * <CarouselSlider
+ *   ref={ref}
+ *   // Add props here
+ * >
+ *   Content
+ * </CarouselSlider>
+ *
+ * // Call methods on the element
+ * ref.current?.finishRefresh('success');
+ * ```
+ */
+declare const CarouselSlider: React.ForwardRefExoticComponent<CarouselSliderProps & {
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+} & React.RefAttributes<CarouselSliderElement>>;
+
+declare enum CarouselPageChangedReason {
+    timed = "timed",
+    manual = "manual",
+    controller = "controller"
+}
+declare enum CenterPageEnlargeStrategy {
+    scale = "scale",
+    height = "height",
+    zoom = "zoom"
+}
+declare enum Axis {
+    horizontal = "Axis.horizontal",
+    vertical = "Axis.vertical"
+}
+declare enum Curve {
+    ease = "Curves.ease",
+    easeIn = "Curves.easeIn",
+    easeOut = "Curves.easeOut",
+    easeInOut = "Curves.easeInOut",
+    fastOutSlowIn = "Curves.fastOutSlowIn",
+    linear = "Curves.linear"
+}
+
+export { Axis, CarouselPageChangedReason, CarouselSlider, type CarouselSliderElement, CenterPageEnlargeStrategy, Curve };

package/dist/index.d.ts

@@ -0,0 +1,297 @@
+import React from 'react';
+import { WebFElementWithMethods } from '@openwebf/react-core-ui';
+
+interface CarouselSliderProps {
+    /**
+     * Set carousel height. Overrides aspectRatio if provided.
+     */
+    height?: number;
+    /**
+     * Aspect ratio when height is not set.
+     * Default: 16 / 9
+     */
+    aspectRatio?: number;
+    /**
+     * The fraction of the viewport that each page should occupy.
+     * Default: 0.8 (carousel_slider_plus default)
+     */
+    viewportFraction?: number;
+    /**
+     * The initial page to show.
+     * Default: 0
+     */
+    initialPage?: number;
+    /**
+     * Determines if carousel should loop infinitely.
+     * Default: true
+     */
+    enableInfiniteScroll?: boolean;
+    /**
+     * Loop to the closest occurrence of requested page.
+     * Default: true
+     */
+    animateToClosest?: boolean;
+    /**
+     * Reverse the order of items.
+     * Default: false
+     */
+    reverse?: boolean;
+    /**
+     * Enables auto play.
+     * Default: false
+     */
+    autoPlay?: boolean;
+    /**
+     * Frequency of slides in milliseconds.
+     * Default: 4000
+     */
+    autoPlayInterval?: number;
+    /**
+     * Animation duration between pages in milliseconds.
+     * Default: 800
+     */
+    autoPlayAnimationDuration?: number;
+    /**
+     * Animation curve name.
+     * Default: 'fast-out-slow-in'
+     */
+    autoPlayCurve?: string;
+    /**
+     * Whether current page should be larger than side images.
+     * Default: false
+     */
+    enlargeCenterPage?: boolean;
+    /**
+     * Called whenever the page in the center changes.
+     */
+    onPageChanged?: any;
+    /**
+     * Called whenever the carousel is scrolled.
+     */
+    onScrolled?: any;
+    /**
+     * Scroll physics identifier.
+     */
+    scrollPhysics?: string;
+    /**
+     * Set to false to disable page snapping.
+     * Default: true
+     */
+    pageSnapping?: boolean;
+    /**
+     * Axis along which the page view scrolls.
+     * Default: 'horizontal'
+     */
+    scrollDirection?: 'horizontal' | 'vertical';
+    /**
+     * Pause auto play on touch.
+     * Default: true
+     */
+    pauseAutoPlayOnTouch?: boolean;
+    /**
+     * Pause auto play on manual navigation.
+     * Default: true
+     */
+    pauseAutoPlayOnManualNavigate?: boolean;
+    /**
+     * When finite scroll, decide whether auto play loops to first item.
+     * Default: false
+     */
+    pauseAutoPlayInFiniteScroll?: boolean;
+    /**
+     * PageStorageKey identifier.
+     */
+    pageViewKey?: string;
+    /**
+     * Determine which method to enlarge the center page.
+     * Default: 'scale'
+     */
+    enlargeStrategy?: 'scale' | 'height' | 'zoom';
+    /**
+     * How much the pages next to the center page will be scaled down.
+     * Default: 0.3
+     */
+    enlargeFactor?: number;
+    /**
+     * Whether to disable the Center widget for each slide.
+     * Default: false
+     */
+    disableCenter?: boolean;
+    /**
+     * Whether to add padding to both ends of the list.
+     * Default: true
+     */
+    padEnds?: boolean;
+    /**
+     * Clip behavior name.
+     * Default: 'hardEdge'
+     */
+    clipBehavior?: string;
+    /**
+     * Whether to disable touch gestures.
+     * Default: false
+     */
+    disableGesture?: boolean;
+    /**
+     * Current real page index (read-only).
+     */
+    realPage?: number;
+    /**
+     * HTML id attribute
+     */
+    id?: string;
+    /**
+     * Additional CSS styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Children elements
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Element interface with methods/properties accessible via ref
+ * @example
+ * ```tsx
+ * const ref = useRef<CarouselSliderElement>(null);
+ * // Call methods on the element
+ * ref.current?.finishRefresh('success');
+ * // Access properties
+ * console.log(ref.current?.height);
+ * ```
+ */
+interface CarouselSliderElement extends WebFElementWithMethods<{
+    /**
+     * Animates to the next page.
+     */
+    nextPage(duration: number, curve: string): void;
+    /**
+     * Animates to the previous page.
+     */
+    previousPage(duration: number, curve: string): void;
+    /**
+     * Jumps to a specific page without animation.
+     */
+    jumpToPage(page: number): void;
+    /**
+     * Animates to a specific page.
+     */
+    animateToPage(page: number, duration: number, curve: string): void;
+    /**
+     * Starts auto play.
+     */
+    startAutoPlay(): void;
+    /**
+     * Stops auto play.
+     */
+    stopAutoPlay(): void;
+}> {
+    /** Set carousel height. Overrides aspectRatio if provided. */
+    height?: number;
+    /** Aspect ratio when height is not set. */
+    aspectRatio?: number;
+    /** The fraction of the viewport that each page should occupy. */
+    viewportFraction?: number;
+    /** The initial page to show. */
+    initialPage?: number;
+    /** Determines if carousel should loop infinitely. */
+    enableInfiniteScroll?: boolean;
+    /** Loop to the closest occurrence of requested page. */
+    animateToClosest?: boolean;
+    /** Reverse the order of items. */
+    reverse?: boolean;
+    /** Enables auto play. */
+    autoPlay?: boolean;
+    /** Frequency of slides in milliseconds. */
+    autoPlayInterval?: number;
+    /** Animation duration between pages in milliseconds. */
+    autoPlayAnimationDuration?: number;
+    /** Animation curve name. */
+    autoPlayCurve?: string;
+    /** Whether current page should be larger than side images. */
+    enlargeCenterPage?: boolean;
+    /** Called whenever the page in the center changes. */
+    onPageChanged?: any;
+    /** Called whenever the carousel is scrolled. */
+    onScrolled?: any;
+    /** Scroll physics identifier. */
+    scrollPhysics?: string;
+    /** Set to false to disable page snapping. */
+    pageSnapping?: boolean;
+    /** Axis along which the page view scrolls. */
+    scrollDirection?: 'horizontal' | 'vertical';
+    /** Pause auto play on touch. */
+    pauseAutoPlayOnTouch?: boolean;
+    /** Pause auto play on manual navigation. */
+    pauseAutoPlayOnManualNavigate?: boolean;
+    /** When finite scroll, decide whether auto play loops to first item. */
+    pauseAutoPlayInFiniteScroll?: boolean;
+    /** PageStorageKey identifier. */
+    pageViewKey?: string;
+    /** Determine which method to enlarge the center page. */
+    enlargeStrategy?: 'scale' | 'height' | 'zoom';
+    /** How much the pages next to the center page will be scaled down. */
+    enlargeFactor?: number;
+    /** Whether to disable the Center widget for each slide. */
+    disableCenter?: boolean;
+    /** Whether to add padding to both ends of the list. */
+    padEnds?: boolean;
+    /** Clip behavior name. */
+    clipBehavior?: string;
+    /** Whether to disable touch gestures. */
+    disableGesture?: boolean;
+    /** Current real page index (read-only). */
+    readonly realPage?: number;
+}
+/**
+ * Properties for <webf-carousel-slider>.
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<CarouselSliderElement>(null);
+ *
+ * <CarouselSlider
+ *   ref={ref}
+ *   // Add props here
+ * >
+ *   Content
+ * </CarouselSlider>
+ *
+ * // Call methods on the element
+ * ref.current?.finishRefresh('success');
+ * ```
+ */
+declare const CarouselSlider: React.ForwardRefExoticComponent<CarouselSliderProps & {
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+} & React.RefAttributes<CarouselSliderElement>>;
+
+declare enum CarouselPageChangedReason {
+    timed = "timed",
+    manual = "manual",
+    controller = "controller"
+}
+declare enum CenterPageEnlargeStrategy {
+    scale = "scale",
+    height = "height",
+    zoom = "zoom"
+}
+declare enum Axis {
+    horizontal = "Axis.horizontal",
+    vertical = "Axis.vertical"
+}
+declare enum Curve {
+    ease = "Curves.ease",
+    easeIn = "Curves.easeIn",
+    easeOut = "Curves.easeOut",
+    easeInOut = "Curves.easeInOut",
+    fastOutSlowIn = "Curves.fastOutSlowIn",
+    linear = "Curves.linear"
+}
+
+export { Axis, CarouselPageChangedReason, CarouselSlider, type CarouselSliderElement, CenterPageEnlargeStrategy, Curve };

package/dist/index.js

@@ -0,0 +1,139 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Axis: () => Axis,
+  CarouselPageChangedReason: () => CarouselPageChangedReason,
+  CarouselSlider: () => CarouselSlider,
+  CenterPageEnlargeStrategy: () => CenterPageEnlargeStrategy,
+  Curve: () => Curve
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/lib/src/carousel_slider.tsx
+var import_react_core_ui = require("@openwebf/react-core-ui");
+var CarouselSlider = (0, import_react_core_ui.createWebFComponent)({
+  tagName: "carousel-slider",
+  displayName: "CarouselSlider",
+  // Map props to attributes
+  attributeProps: [
+    "height",
+    "aspectRatio",
+    "viewportFraction",
+    "initialPage",
+    "enableInfiniteScroll",
+    "animateToClosest",
+    "reverse",
+    "autoPlay",
+    "autoPlayInterval",
+    "autoPlayAnimationDuration",
+    "autoPlayCurve",
+    "enlargeCenterPage",
+    "onPageChanged",
+    "onScrolled",
+    "scrollPhysics",
+    "pageSnapping",
+    "scrollDirection",
+    "pauseAutoPlayOnTouch",
+    "pauseAutoPlayOnManualNavigate",
+    "pauseAutoPlayInFiniteScroll",
+    "pageViewKey",
+    "enlargeStrategy",
+    "enlargeFactor",
+    "disableCenter",
+    "padEnds",
+    "clipBehavior",
+    "disableGesture",
+    "realPage"
+  ],
+  // Convert prop names to attribute names if needed
+  attributeMap: {
+    aspectRatio: "aspect-ratio",
+    viewportFraction: "viewport-fraction",
+    initialPage: "initial-page",
+    enableInfiniteScroll: "enable-infinite-scroll",
+    animateToClosest: "animate-to-closest",
+    autoPlay: "auto-play",
+    autoPlayInterval: "auto-play-interval",
+    autoPlayAnimationDuration: "auto-play-animation-duration",
+    autoPlayCurve: "auto-play-curve",
+    enlargeCenterPage: "enlarge-center-page",
+    onPageChanged: "on-page-changed",
+    onScrolled: "on-scrolled",
+    scrollPhysics: "scroll-physics",
+    pageSnapping: "page-snapping",
+    scrollDirection: "scroll-direction",
+    pauseAutoPlayOnTouch: "pause-auto-play-on-touch",
+    pauseAutoPlayOnManualNavigate: "pause-auto-play-on-manual-navigate",
+    pauseAutoPlayInFiniteScroll: "pause-auto-play-in-finite-scroll",
+    pageViewKey: "page-view-key",
+    enlargeStrategy: "enlarge-strategy",
+    enlargeFactor: "enlarge-factor",
+    disableCenter: "disable-center",
+    padEnds: "pad-ends",
+    clipBehavior: "clip-behavior",
+    disableGesture: "disable-gesture",
+    realPage: "real-page"
+  },
+  // Event handlers
+  events: [],
+  // Default prop values
+  defaultProps: {
+    // Add default values here
+  }
+});
+
+// src/types.ts
+var CarouselPageChangedReason = /* @__PURE__ */ ((CarouselPageChangedReason2) => {
+  CarouselPageChangedReason2["timed"] = "timed";
+  CarouselPageChangedReason2["manual"] = "manual";
+  CarouselPageChangedReason2["controller"] = "controller";
+  return CarouselPageChangedReason2;
+})(CarouselPageChangedReason || {});
+var CenterPageEnlargeStrategy = /* @__PURE__ */ ((CenterPageEnlargeStrategy2) => {
+  CenterPageEnlargeStrategy2["scale"] = "scale";
+  CenterPageEnlargeStrategy2["height"] = "height";
+  CenterPageEnlargeStrategy2["zoom"] = "zoom";
+  return CenterPageEnlargeStrategy2;
+})(CenterPageEnlargeStrategy || {});
+var Axis = /* @__PURE__ */ ((Axis2) => {
+  Axis2["horizontal"] = "Axis.horizontal";
+  Axis2["vertical"] = "Axis.vertical";
+  return Axis2;
+})(Axis || {});
+var Curve = /* @__PURE__ */ ((Curve2) => {
+  Curve2["ease"] = "Curves.ease";
+  Curve2["easeIn"] = "Curves.easeIn";
+  Curve2["easeOut"] = "Curves.easeOut";
+  Curve2["easeInOut"] = "Curves.easeInOut";
+  Curve2["fastOutSlowIn"] = "Curves.fastOutSlowIn";
+  Curve2["linear"] = "Curves.linear";
+  return Curve2;
+})(Curve || {});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Axis,
+  CarouselPageChangedReason,
+  CarouselSlider,
+  CenterPageEnlargeStrategy,
+  Curve
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/lib/src/carousel_slider.tsx","../src/types.ts"],"sourcesContent":["/*\n * Generated by TSDL, don't edit this file directly.\n */\n\n\nexport { CarouselSlider, CarouselSliderElement } from \"./lib/src/carousel_slider\";\nexport * from './types';\n","import React from \"react\";\nimport { createWebFComponent, WebFElementWithMethods } from \"@openwebf/react-core-ui\";\nimport * as __webfTypes from \"../../types\";\ntype CarouselPageChangedReason = \"timed\" | \"manual\" | \"controller\";\ntype CenterPageEnlargeStrategy = \"scale\" | \"height\" | \"zoom\";\n/**\n * Methods for <webf-carousel-slider>.\n */\ninterface CarouselSliderMethods {\n  /**\n   * Animates to the next page.\n   */\n  nextPage(duration: number, curve: string): void;\n  /**\n   * Animates to the previous page.\n   */\n  previousPage(duration: number, curve: string): void;\n  /**\n   * Jumps to a specific page without animation.\n   */\n  jumpToPage(page: number): void;\n  /**\n   * Animates to a specific page.\n   */\n  animateToPage(page: number, duration: number, curve: string): void;\n  /**\n   * Starts auto play.\n   */\n  startAutoPlay(): void;\n  /**\n   * Stops auto play.\n   */\n  stopAutoPlay(): void;\n}\nexport interface CarouselSliderProps {\n  /**\n   * Set carousel height. Overrides aspectRatio if provided.\n   */\n  height?: number;\n  /**\n   * Aspect ratio when height is not set.\n   * Default: 16 / 9\n   */\n  aspectRatio?: number;\n  /**\n   * The fraction of the viewport that each page should occupy.\n   * Default: 0.8 (carousel_slider_plus default)\n   */\n  viewportFraction?: number;\n  /**\n   * The initial page to show.\n   * Default: 0\n   */\n  initialPage?: number;\n  /**\n   * Determines if carousel should loop infinitely.\n   * Default: true\n   */\n  enableInfiniteScroll?: boolean;\n  /**\n   * Loop to the closest occurrence of requested page.\n   * Default: true\n   */\n  animateToClosest?: boolean;\n  /**\n   * Reverse the order of items.\n   * Default: false\n   */\n  reverse?: boolean;\n  /**\n   * Enables auto play.\n   * Default: false\n   */\n  autoPlay?: boolean;\n  /**\n   * Frequency of slides in milliseconds.\n   * Default: 4000\n   */\n  autoPlayInterval?: number;\n  /**\n   * Animation duration between pages in milliseconds.\n   * Default: 800\n   */\n  autoPlayAnimationDuration?: number;\n  /**\n   * Animation curve name.\n   * Default: 'fast-out-slow-in'\n   */\n  autoPlayCurve?: string;\n  /**\n   * Whether current page should be larger than side images.\n   * Default: false\n   */\n  enlargeCenterPage?: boolean;\n  /**\n   * Called whenever the page in the center changes.\n   */\n  onPageChanged?: any;\n  /**\n   * Called whenever the carousel is scrolled.\n   */\n  onScrolled?: any;\n  /**\n   * Scroll physics identifier.\n   */\n  scrollPhysics?: string;\n  /**\n   * Set to false to disable page snapping.\n   * Default: true\n   */\n  pageSnapping?: boolean;\n  /**\n   * Axis along which the page view scrolls.\n   * Default: 'horizontal'\n   */\n  scrollDirection?: 'horizontal' | 'vertical';\n  /**\n   * Pause auto play on touch.\n   * Default: true\n   */\n  pauseAutoPlayOnTouch?: boolean;\n  /**\n   * Pause auto play on manual navigation.\n   * Default: true\n   */\n  pauseAutoPlayOnManualNavigate?: boolean;\n  /**\n   * When finite scroll, decide whether auto play loops to first item.\n   * Default: false\n   */\n  pauseAutoPlayInFiniteScroll?: boolean;\n  /**\n   * PageStorageKey identifier.\n   */\n  pageViewKey?: string;\n  /**\n   * Determine which method to enlarge the center page.\n   * Default: 'scale'\n   */\n  enlargeStrategy?: 'scale' | 'height' | 'zoom';\n  /**\n   * How much the pages next to the center page will be scaled down.\n   * Default: 0.3\n   */\n  enlargeFactor?: number;\n  /**\n   * Whether to disable the Center widget for each slide.\n   * Default: false\n   */\n  disableCenter?: boolean;\n  /**\n   * Whether to add padding to both ends of the list.\n   * Default: true\n   */\n  padEnds?: boolean;\n  /**\n   * Clip behavior name.\n   * Default: 'hardEdge'\n   */\n  clipBehavior?: string;\n  /**\n   * Whether to disable touch gestures.\n   * Default: false\n   */\n  disableGesture?: boolean;\n  /**\n   * Current real page index (read-only).\n   */\n  realPage?: number;\n  /**\n   * HTML id attribute\n   */\n  id?: string;\n  /**\n   * Additional CSS styles\n   */\n  style?: React.CSSProperties;\n  /**\n   * Children elements\n   */\n  children?: React.ReactNode;\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n/**\n * Element interface with methods/properties accessible via ref\n * @example\n * ```tsx\n * const ref = useRef<CarouselSliderElement>(null);\n * // Call methods on the element\n * ref.current?.finishRefresh('success');\n * // Access properties\n * console.log(ref.current?.height);\n * ```\n */\nexport interface CarouselSliderElement extends WebFElementWithMethods<{\n  /**\n   * Animates to the next page.\n   */\n  nextPage(duration: number, curve: string): void;\n  /**\n   * Animates to the previous page.\n   */\n  previousPage(duration: number, curve: string): void;\n  /**\n   * Jumps to a specific page without animation.\n   */\n  jumpToPage(page: number): void;\n  /**\n   * Animates to a specific page.\n   */\n  animateToPage(page: number, duration: number, curve: string): void;\n  /**\n   * Starts auto play.\n   */\n  startAutoPlay(): void;\n  /**\n   * Stops auto play.\n   */\n  stopAutoPlay(): void;\n}> {\n  /** Set carousel height. Overrides aspectRatio if provided. */\n  height?: number;\n  /** Aspect ratio when height is not set. */\n  aspectRatio?: number;\n  /** The fraction of the viewport that each page should occupy. */\n  viewportFraction?: number;\n  /** The initial page to show. */\n  initialPage?: number;\n  /** Determines if carousel should loop infinitely. */\n  enableInfiniteScroll?: boolean;\n  /** Loop to the closest occurrence of requested page. */\n  animateToClosest?: boolean;\n  /** Reverse the order of items. */\n  reverse?: boolean;\n  /** Enables auto play. */\n  autoPlay?: boolean;\n  /** Frequency of slides in milliseconds. */\n  autoPlayInterval?: number;\n  /** Animation duration between pages in milliseconds. */\n  autoPlayAnimationDuration?: number;\n  /** Animation curve name. */\n  autoPlayCurve?: string;\n  /** Whether current page should be larger than side images. */\n  enlargeCenterPage?: boolean;\n  /** Called whenever the page in the center changes. */\n  onPageChanged?: any;\n  /** Called whenever the carousel is scrolled. */\n  onScrolled?: any;\n  /** Scroll physics identifier. */\n  scrollPhysics?: string;\n  /** Set to false to disable page snapping. */\n  pageSnapping?: boolean;\n  /** Axis along which the page view scrolls. */\n  scrollDirection?: 'horizontal' | 'vertical';\n  /** Pause auto play on touch. */\n  pauseAutoPlayOnTouch?: boolean;\n  /** Pause auto play on manual navigation. */\n  pauseAutoPlayOnManualNavigate?: boolean;\n  /** When finite scroll, decide whether auto play loops to first item. */\n  pauseAutoPlayInFiniteScroll?: boolean;\n  /** PageStorageKey identifier. */\n  pageViewKey?: string;\n  /** Determine which method to enlarge the center page. */\n  enlargeStrategy?: 'scale' | 'height' | 'zoom';\n  /** How much the pages next to the center page will be scaled down. */\n  enlargeFactor?: number;\n  /** Whether to disable the Center widget for each slide. */\n  disableCenter?: boolean;\n  /** Whether to add padding to both ends of the list. */\n  padEnds?: boolean;\n  /** Clip behavior name. */\n  clipBehavior?: string;\n  /** Whether to disable touch gestures. */\n  disableGesture?: boolean;\n  /** Current real page index (read-only). */\n  readonly realPage?: number;\n}\n/**\n * Properties for <webf-carousel-slider>.\n * \n * @example\n * ```tsx\n * const ref = useRef<CarouselSliderElement>(null);\n * \n * <CarouselSlider\n *   ref={ref}\n *   // Add props here\n * >\n *   Content\n * </CarouselSlider>\n * \n * // Call methods on the element\n * ref.current?.finishRefresh('success');\n * ```\n */\nexport const CarouselSlider = createWebFComponent<CarouselSliderElement, CarouselSliderProps>({\n  tagName: 'carousel-slider',\n  displayName: 'CarouselSlider',\n  // Map props to attributes\n  attributeProps: [\n    'height',\n    'aspectRatio',\n    'viewportFraction',\n    'initialPage',\n    'enableInfiniteScroll',\n    'animateToClosest',\n    'reverse',\n    'autoPlay',\n    'autoPlayInterval',\n    'autoPlayAnimationDuration',\n    'autoPlayCurve',\n    'enlargeCenterPage',\n    'onPageChanged',\n    'onScrolled',\n    'scrollPhysics',\n    'pageSnapping',\n    'scrollDirection',\n    'pauseAutoPlayOnTouch',\n    'pauseAutoPlayOnManualNavigate',\n    'pauseAutoPlayInFiniteScroll',\n    'pageViewKey',\n    'enlargeStrategy',\n    'enlargeFactor',\n    'disableCenter',\n    'padEnds',\n    'clipBehavior',\n    'disableGesture',\n    'realPage',\n  ],\n  // Convert prop names to attribute names if needed\n  attributeMap: {\n    aspectRatio: 'aspect-ratio',\n    viewportFraction: 'viewport-fraction',\n    initialPage: 'initial-page',\n    enableInfiniteScroll: 'enable-infinite-scroll',\n    animateToClosest: 'animate-to-closest',\n    autoPlay: 'auto-play',\n    autoPlayInterval: 'auto-play-interval',\n    autoPlayAnimationDuration: 'auto-play-animation-duration',\n    autoPlayCurve: 'auto-play-curve',\n    enlargeCenterPage: 'enlarge-center-page',\n    onPageChanged: 'on-page-changed',\n    onScrolled: 'on-scrolled',\n    scrollPhysics: 'scroll-physics',\n    pageSnapping: 'page-snapping',\n    scrollDirection: 'scroll-direction',\n    pauseAutoPlayOnTouch: 'pause-auto-play-on-touch',\n    pauseAutoPlayOnManualNavigate: 'pause-auto-play-on-manual-navigate',\n    pauseAutoPlayInFiniteScroll: 'pause-auto-play-in-finite-scroll',\n    pageViewKey: 'page-view-key',\n    enlargeStrategy: 'enlarge-strategy',\n    enlargeFactor: 'enlarge-factor',\n    disableCenter: 'disable-center',\n    padEnds: 'pad-ends',\n    clipBehavior: 'clip-behavior',\n    disableGesture: 'disable-gesture',\n    realPage: 'real-page',\n  },\n  // Event handlers\n  events: [\n  ],\n  // Default prop values\n  defaultProps: {\n    // Add default values here\n  },\n});","/* Generated by WebF CLI - aggregated type declarations */\nexport enum CarouselPageChangedReason { timed = 'timed', manual = 'manual', controller = 'controller' }\nexport enum CenterPageEnlargeStrategy { scale = 'scale', height = 'height', zoom = 'zoom' }\nexport enum Axis { horizontal = 'Axis.horizontal', vertical = 'Axis.vertical' }\nexport enum Curve { ease = 'Curves.ease', easeIn = 'Curves.easeIn', easeOut = 'Curves.easeOut', easeInOut = 'Curves.easeInOut', fastOutSlowIn = 'Curves.fastOutSlowIn', linear = 'Curves.linear' }"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,2BAA4D;AAySrD,IAAM,qBAAiB,0CAAgE;AAAA,EAC5F,SAAS;AAAA,EACT,aAAa;AAAA;AAAA,EAEb,gBAAgB;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA;AAAA,EAEA,cAAc;AAAA,IACZ,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,aAAa;AAAA,IACb,sBAAsB;AAAA,IACtB,kBAAkB;AAAA,IAClB,UAAU;AAAA,IACV,kBAAkB;AAAA,IAClB,2BAA2B;AAAA,IAC3B,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,sBAAsB;AAAA,IACtB,+BAA+B;AAAA,IAC/B,6BAA6B;AAAA,IAC7B,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf,eAAe;AAAA,IACf,SAAS;AAAA,IACT,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,UAAU;AAAA,EACZ;AAAA;AAAA,EAEA,QAAQ,CACR;AAAA;AAAA,EAEA,cAAc;AAAA;AAAA,EAEd;AACF,CAAC;;;AC/WM,IAAK,4BAAL,kBAAKA,+BAAL;AAAiC,EAAAA,2BAAA,WAAQ;AAAS,EAAAA,2BAAA,YAAS;AAAU,EAAAA,2BAAA,gBAAa;AAA7E,SAAAA;AAAA,GAAA;AACL,IAAK,4BAAL,kBAAKC,+BAAL;AAAiC,EAAAA,2BAAA,WAAQ;AAAS,EAAAA,2BAAA,YAAS;AAAU,EAAAA,2BAAA,UAAO;AAAvE,SAAAA;AAAA,GAAA;AACL,IAAK,OAAL,kBAAKC,UAAL;AAAY,EAAAA,MAAA,gBAAa;AAAmB,EAAAA,MAAA,cAAW;AAAlD,SAAAA;AAAA,GAAA;AACL,IAAK,QAAL,kBAAKC,WAAL;AAAa,EAAAA,OAAA,UAAO;AAAe,EAAAA,OAAA,YAAS;AAAiB,EAAAA,OAAA,aAAU;AAAkB,EAAAA,OAAA,eAAY;AAAoB,EAAAA,OAAA,mBAAgB;AAAwB,EAAAA,OAAA,YAAS;AAArK,SAAAA;AAAA,GAAA;","names":["CarouselPageChangedReason","CenterPageEnlargeStrategy","Axis","Curve"]}

package/dist/index.mjs

@@ -0,0 +1,108 @@
+// src/lib/src/carousel_slider.tsx
+import { createWebFComponent } from "@openwebf/react-core-ui";
+var CarouselSlider = createWebFComponent({
+  tagName: "carousel-slider",
+  displayName: "CarouselSlider",
+  // Map props to attributes
+  attributeProps: [
+    "height",
+    "aspectRatio",
+    "viewportFraction",
+    "initialPage",
+    "enableInfiniteScroll",
+    "animateToClosest",
+    "reverse",
+    "autoPlay",
+    "autoPlayInterval",
+    "autoPlayAnimationDuration",
+    "autoPlayCurve",
+    "enlargeCenterPage",
+    "onPageChanged",
+    "onScrolled",
+    "scrollPhysics",
+    "pageSnapping",
+    "scrollDirection",
+    "pauseAutoPlayOnTouch",
+    "pauseAutoPlayOnManualNavigate",
+    "pauseAutoPlayInFiniteScroll",
+    "pageViewKey",
+    "enlargeStrategy",
+    "enlargeFactor",
+    "disableCenter",
+    "padEnds",
+    "clipBehavior",
+    "disableGesture",
+    "realPage"
+  ],
+  // Convert prop names to attribute names if needed
+  attributeMap: {
+    aspectRatio: "aspect-ratio",
+    viewportFraction: "viewport-fraction",
+    initialPage: "initial-page",
+    enableInfiniteScroll: "enable-infinite-scroll",
+    animateToClosest: "animate-to-closest",
+    autoPlay: "auto-play",
+    autoPlayInterval: "auto-play-interval",
+    autoPlayAnimationDuration: "auto-play-animation-duration",
+    autoPlayCurve: "auto-play-curve",
+    enlargeCenterPage: "enlarge-center-page",
+    onPageChanged: "on-page-changed",
+    onScrolled: "on-scrolled",
+    scrollPhysics: "scroll-physics",
+    pageSnapping: "page-snapping",
+    scrollDirection: "scroll-direction",
+    pauseAutoPlayOnTouch: "pause-auto-play-on-touch",
+    pauseAutoPlayOnManualNavigate: "pause-auto-play-on-manual-navigate",
+    pauseAutoPlayInFiniteScroll: "pause-auto-play-in-finite-scroll",
+    pageViewKey: "page-view-key",
+    enlargeStrategy: "enlarge-strategy",
+    enlargeFactor: "enlarge-factor",
+    disableCenter: "disable-center",
+    padEnds: "pad-ends",
+    clipBehavior: "clip-behavior",
+    disableGesture: "disable-gesture",
+    realPage: "real-page"
+  },
+  // Event handlers
+  events: [],
+  // Default prop values
+  defaultProps: {
+    // Add default values here
+  }
+});
+
+// src/types.ts
+var CarouselPageChangedReason = /* @__PURE__ */ ((CarouselPageChangedReason2) => {
+  CarouselPageChangedReason2["timed"] = "timed";
+  CarouselPageChangedReason2["manual"] = "manual";
+  CarouselPageChangedReason2["controller"] = "controller";
+  return CarouselPageChangedReason2;
+})(CarouselPageChangedReason || {});
+var CenterPageEnlargeStrategy = /* @__PURE__ */ ((CenterPageEnlargeStrategy2) => {
+  CenterPageEnlargeStrategy2["scale"] = "scale";
+  CenterPageEnlargeStrategy2["height"] = "height";
+  CenterPageEnlargeStrategy2["zoom"] = "zoom";
+  return CenterPageEnlargeStrategy2;
+})(CenterPageEnlargeStrategy || {});
+var Axis = /* @__PURE__ */ ((Axis2) => {
+  Axis2["horizontal"] = "Axis.horizontal";
+  Axis2["vertical"] = "Axis.vertical";
+  return Axis2;
+})(Axis || {});
+var Curve = /* @__PURE__ */ ((Curve2) => {
+  Curve2["ease"] = "Curves.ease";
+  Curve2["easeIn"] = "Curves.easeIn";
+  Curve2["easeOut"] = "Curves.easeOut";
+  Curve2["easeInOut"] = "Curves.easeInOut";
+  Curve2["fastOutSlowIn"] = "Curves.fastOutSlowIn";
+  Curve2["linear"] = "Curves.linear";
+  return Curve2;
+})(Curve || {});
+export {
+  Axis,
+  CarouselPageChangedReason,
+  CarouselSlider,
+  CenterPageEnlargeStrategy,
+  Curve
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/src/carousel_slider.tsx","../src/types.ts"],"sourcesContent":["import React from \"react\";\nimport { createWebFComponent, WebFElementWithMethods } from \"@openwebf/react-core-ui\";\nimport * as __webfTypes from \"../../types\";\ntype CarouselPageChangedReason = \"timed\" | \"manual\" | \"controller\";\ntype CenterPageEnlargeStrategy = \"scale\" | \"height\" | \"zoom\";\n/**\n * Methods for <webf-carousel-slider>.\n */\ninterface CarouselSliderMethods {\n  /**\n   * Animates to the next page.\n   */\n  nextPage(duration: number, curve: string): void;\n  /**\n   * Animates to the previous page.\n   */\n  previousPage(duration: number, curve: string): void;\n  /**\n   * Jumps to a specific page without animation.\n   */\n  jumpToPage(page: number): void;\n  /**\n   * Animates to a specific page.\n   */\n  animateToPage(page: number, duration: number, curve: string): void;\n  /**\n   * Starts auto play.\n   */\n  startAutoPlay(): void;\n  /**\n   * Stops auto play.\n   */\n  stopAutoPlay(): void;\n}\nexport interface CarouselSliderProps {\n  /**\n   * Set carousel height. Overrides aspectRatio if provided.\n   */\n  height?: number;\n  /**\n   * Aspect ratio when height is not set.\n   * Default: 16 / 9\n   */\n  aspectRatio?: number;\n  /**\n   * The fraction of the viewport that each page should occupy.\n   * Default: 0.8 (carousel_slider_plus default)\n   */\n  viewportFraction?: number;\n  /**\n   * The initial page to show.\n   * Default: 0\n   */\n  initialPage?: number;\n  /**\n   * Determines if carousel should loop infinitely.\n   * Default: true\n   */\n  enableInfiniteScroll?: boolean;\n  /**\n   * Loop to the closest occurrence of requested page.\n   * Default: true\n   */\n  animateToClosest?: boolean;\n  /**\n   * Reverse the order of items.\n   * Default: false\n   */\n  reverse?: boolean;\n  /**\n   * Enables auto play.\n   * Default: false\n   */\n  autoPlay?: boolean;\n  /**\n   * Frequency of slides in milliseconds.\n   * Default: 4000\n   */\n  autoPlayInterval?: number;\n  /**\n   * Animation duration between pages in milliseconds.\n   * Default: 800\n   */\n  autoPlayAnimationDuration?: number;\n  /**\n   * Animation curve name.\n   * Default: 'fast-out-slow-in'\n   */\n  autoPlayCurve?: string;\n  /**\n   * Whether current page should be larger than side images.\n   * Default: false\n   */\n  enlargeCenterPage?: boolean;\n  /**\n   * Called whenever the page in the center changes.\n   */\n  onPageChanged?: any;\n  /**\n   * Called whenever the carousel is scrolled.\n   */\n  onScrolled?: any;\n  /**\n   * Scroll physics identifier.\n   */\n  scrollPhysics?: string;\n  /**\n   * Set to false to disable page snapping.\n   * Default: true\n   */\n  pageSnapping?: boolean;\n  /**\n   * Axis along which the page view scrolls.\n   * Default: 'horizontal'\n   */\n  scrollDirection?: 'horizontal' | 'vertical';\n  /**\n   * Pause auto play on touch.\n   * Default: true\n   */\n  pauseAutoPlayOnTouch?: boolean;\n  /**\n   * Pause auto play on manual navigation.\n   * Default: true\n   */\n  pauseAutoPlayOnManualNavigate?: boolean;\n  /**\n   * When finite scroll, decide whether auto play loops to first item.\n   * Default: false\n   */\n  pauseAutoPlayInFiniteScroll?: boolean;\n  /**\n   * PageStorageKey identifier.\n   */\n  pageViewKey?: string;\n  /**\n   * Determine which method to enlarge the center page.\n   * Default: 'scale'\n   */\n  enlargeStrategy?: 'scale' | 'height' | 'zoom';\n  /**\n   * How much the pages next to the center page will be scaled down.\n   * Default: 0.3\n   */\n  enlargeFactor?: number;\n  /**\n   * Whether to disable the Center widget for each slide.\n   * Default: false\n   */\n  disableCenter?: boolean;\n  /**\n   * Whether to add padding to both ends of the list.\n   * Default: true\n   */\n  padEnds?: boolean;\n  /**\n   * Clip behavior name.\n   * Default: 'hardEdge'\n   */\n  clipBehavior?: string;\n  /**\n   * Whether to disable touch gestures.\n   * Default: false\n   */\n  disableGesture?: boolean;\n  /**\n   * Current real page index (read-only).\n   */\n  realPage?: number;\n  /**\n   * HTML id attribute\n   */\n  id?: string;\n  /**\n   * Additional CSS styles\n   */\n  style?: React.CSSProperties;\n  /**\n   * Children elements\n   */\n  children?: React.ReactNode;\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n/**\n * Element interface with methods/properties accessible via ref\n * @example\n * ```tsx\n * const ref = useRef<CarouselSliderElement>(null);\n * // Call methods on the element\n * ref.current?.finishRefresh('success');\n * // Access properties\n * console.log(ref.current?.height);\n * ```\n */\nexport interface CarouselSliderElement extends WebFElementWithMethods<{\n  /**\n   * Animates to the next page.\n   */\n  nextPage(duration: number, curve: string): void;\n  /**\n   * Animates to the previous page.\n   */\n  previousPage(duration: number, curve: string): void;\n  /**\n   * Jumps to a specific page without animation.\n   */\n  jumpToPage(page: number): void;\n  /**\n   * Animates to a specific page.\n   */\n  animateToPage(page: number, duration: number, curve: string): void;\n  /**\n   * Starts auto play.\n   */\n  startAutoPlay(): void;\n  /**\n   * Stops auto play.\n   */\n  stopAutoPlay(): void;\n}> {\n  /** Set carousel height. Overrides aspectRatio if provided. */\n  height?: number;\n  /** Aspect ratio when height is not set. */\n  aspectRatio?: number;\n  /** The fraction of the viewport that each page should occupy. */\n  viewportFraction?: number;\n  /** The initial page to show. */\n  initialPage?: number;\n  /** Determines if carousel should loop infinitely. */\n  enableInfiniteScroll?: boolean;\n  /** Loop to the closest occurrence of requested page. */\n  animateToClosest?: boolean;\n  /** Reverse the order of items. */\n  reverse?: boolean;\n  /** Enables auto play. */\n  autoPlay?: boolean;\n  /** Frequency of slides in milliseconds. */\n  autoPlayInterval?: number;\n  /** Animation duration between pages in milliseconds. */\n  autoPlayAnimationDuration?: number;\n  /** Animation curve name. */\n  autoPlayCurve?: string;\n  /** Whether current page should be larger than side images. */\n  enlargeCenterPage?: boolean;\n  /** Called whenever the page in the center changes. */\n  onPageChanged?: any;\n  /** Called whenever the carousel is scrolled. */\n  onScrolled?: any;\n  /** Scroll physics identifier. */\n  scrollPhysics?: string;\n  /** Set to false to disable page snapping. */\n  pageSnapping?: boolean;\n  /** Axis along which the page view scrolls. */\n  scrollDirection?: 'horizontal' | 'vertical';\n  /** Pause auto play on touch. */\n  pauseAutoPlayOnTouch?: boolean;\n  /** Pause auto play on manual navigation. */\n  pauseAutoPlayOnManualNavigate?: boolean;\n  /** When finite scroll, decide whether auto play loops to first item. */\n  pauseAutoPlayInFiniteScroll?: boolean;\n  /** PageStorageKey identifier. */\n  pageViewKey?: string;\n  /** Determine which method to enlarge the center page. */\n  enlargeStrategy?: 'scale' | 'height' | 'zoom';\n  /** How much the pages next to the center page will be scaled down. */\n  enlargeFactor?: number;\n  /** Whether to disable the Center widget for each slide. */\n  disableCenter?: boolean;\n  /** Whether to add padding to both ends of the list. */\n  padEnds?: boolean;\n  /** Clip behavior name. */\n  clipBehavior?: string;\n  /** Whether to disable touch gestures. */\n  disableGesture?: boolean;\n  /** Current real page index (read-only). */\n  readonly realPage?: number;\n}\n/**\n * Properties for <webf-carousel-slider>.\n * \n * @example\n * ```tsx\n * const ref = useRef<CarouselSliderElement>(null);\n * \n * <CarouselSlider\n *   ref={ref}\n *   // Add props here\n * >\n *   Content\n * </CarouselSlider>\n * \n * // Call methods on the element\n * ref.current?.finishRefresh('success');\n * ```\n */\nexport const CarouselSlider = createWebFComponent<CarouselSliderElement, CarouselSliderProps>({\n  tagName: 'carousel-slider',\n  displayName: 'CarouselSlider',\n  // Map props to attributes\n  attributeProps: [\n    'height',\n    'aspectRatio',\n    'viewportFraction',\n    'initialPage',\n    'enableInfiniteScroll',\n    'animateToClosest',\n    'reverse',\n    'autoPlay',\n    'autoPlayInterval',\n    'autoPlayAnimationDuration',\n    'autoPlayCurve',\n    'enlargeCenterPage',\n    'onPageChanged',\n    'onScrolled',\n    'scrollPhysics',\n    'pageSnapping',\n    'scrollDirection',\n    'pauseAutoPlayOnTouch',\n    'pauseAutoPlayOnManualNavigate',\n    'pauseAutoPlayInFiniteScroll',\n    'pageViewKey',\n    'enlargeStrategy',\n    'enlargeFactor',\n    'disableCenter',\n    'padEnds',\n    'clipBehavior',\n    'disableGesture',\n    'realPage',\n  ],\n  // Convert prop names to attribute names if needed\n  attributeMap: {\n    aspectRatio: 'aspect-ratio',\n    viewportFraction: 'viewport-fraction',\n    initialPage: 'initial-page',\n    enableInfiniteScroll: 'enable-infinite-scroll',\n    animateToClosest: 'animate-to-closest',\n    autoPlay: 'auto-play',\n    autoPlayInterval: 'auto-play-interval',\n    autoPlayAnimationDuration: 'auto-play-animation-duration',\n    autoPlayCurve: 'auto-play-curve',\n    enlargeCenterPage: 'enlarge-center-page',\n    onPageChanged: 'on-page-changed',\n    onScrolled: 'on-scrolled',\n    scrollPhysics: 'scroll-physics',\n    pageSnapping: 'page-snapping',\n    scrollDirection: 'scroll-direction',\n    pauseAutoPlayOnTouch: 'pause-auto-play-on-touch',\n    pauseAutoPlayOnManualNavigate: 'pause-auto-play-on-manual-navigate',\n    pauseAutoPlayInFiniteScroll: 'pause-auto-play-in-finite-scroll',\n    pageViewKey: 'page-view-key',\n    enlargeStrategy: 'enlarge-strategy',\n    enlargeFactor: 'enlarge-factor',\n    disableCenter: 'disable-center',\n    padEnds: 'pad-ends',\n    clipBehavior: 'clip-behavior',\n    disableGesture: 'disable-gesture',\n    realPage: 'real-page',\n  },\n  // Event handlers\n  events: [\n  ],\n  // Default prop values\n  defaultProps: {\n    // Add default values here\n  },\n});","/* Generated by WebF CLI - aggregated type declarations */\nexport enum CarouselPageChangedReason { timed = 'timed', manual = 'manual', controller = 'controller' }\nexport enum CenterPageEnlargeStrategy { scale = 'scale', height = 'height', zoom = 'zoom' }\nexport enum Axis { horizontal = 'Axis.horizontal', vertical = 'Axis.vertical' }\nexport enum Curve { ease = 'Curves.ease', easeIn = 'Curves.easeIn', easeOut = 'Curves.easeOut', easeInOut = 'Curves.easeInOut', fastOutSlowIn = 'Curves.fastOutSlowIn', linear = 'Curves.linear' }"],"mappings":";AACA,SAAS,2BAAmD;AAySrD,IAAM,iBAAiB,oBAAgE;AAAA,EAC5F,SAAS;AAAA,EACT,aAAa;AAAA;AAAA,EAEb,gBAAgB;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA;AAAA,EAEA,cAAc;AAAA,IACZ,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,aAAa;AAAA,IACb,sBAAsB;AAAA,IACtB,kBAAkB;AAAA,IAClB,UAAU;AAAA,IACV,kBAAkB;AAAA,IAClB,2BAA2B;AAAA,IAC3B,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB,sBAAsB;AAAA,IACtB,+BAA+B;AAAA,IAC/B,6BAA6B;AAAA,IAC7B,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf,eAAe;AAAA,IACf,SAAS;AAAA,IACT,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,UAAU;AAAA,EACZ;AAAA;AAAA,EAEA,QAAQ,CACR;AAAA;AAAA,EAEA,cAAc;AAAA;AAAA,EAEd;AACF,CAAC;;;AC/WM,IAAK,4BAAL,kBAAKA,+BAAL;AAAiC,EAAAA,2BAAA,WAAQ;AAAS,EAAAA,2BAAA,YAAS;AAAU,EAAAA,2BAAA,gBAAa;AAA7E,SAAAA;AAAA,GAAA;AACL,IAAK,4BAAL,kBAAKC,+BAAL;AAAiC,EAAAA,2BAAA,WAAQ;AAAS,EAAAA,2BAAA,YAAS;AAAU,EAAAA,2BAAA,UAAO;AAAvE,SAAAA;AAAA,GAAA;AACL,IAAK,OAAL,kBAAKC,UAAL;AAAY,EAAAA,MAAA,gBAAa;AAAmB,EAAAA,MAAA,cAAW;AAAlD,SAAAA;AAAA,GAAA;AACL,IAAK,QAAL,kBAAKC,WAAL;AAAa,EAAAA,OAAA,UAAO;AAAe,EAAAA,OAAA,YAAS;AAAiB,EAAAA,OAAA,aAAU;AAAkB,EAAAA,OAAA,eAAY;AAAoB,EAAAA,OAAA,mBAAgB;AAAwB,EAAAA,OAAA,YAAS;AAArK,SAAAA;AAAA,GAAA;","names":["CarouselPageChangedReason","CenterPageEnlargeStrategy","Axis","Curve"]}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@ehmetlabs/webf-react-carousel-slider",
+  "version": "0.1.0",
+  "description": "WebF Custom Element wrapper for carousel_slider_plus. Provides hybrid UI carousel component with Flutter performance and JavaScript API.",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "@openwebf/react-core-ui": "^0.24.2"
+  },
+  "devDependencies": {
+    "@openwebf/react-core-ui": "^0.24.1",
+    "@types/react": ">=16.8.0",
+    "@types/react-dom": ">=16.8.0",
+    "picomatch": "^4.0.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}