solid-slider 1.3.0 → 1.3.3

package/dist/index/index.module.js

@@ -0,0 +1,163 @@
+import { createSignal, onMount, onCleanup, createEffect, on, createContext, useContext } from 'solid-js';
+import KeenSlider from 'keen-slider';
+import { createComponent, isServer, insert, effect, classList, delegateEvents, template } from 'solid-js/web';
+
+/**
+ * Creates a slider powered by KeenSlider.
+ *
+ * @param {Object} options Values to initialize the slider with
+ * @param {Array} plugins Extensions that enhance KeenSlider options
+ * @returns {[create: Function, helpers: Object]} Returns mount and helper methods
+ * @returns {Function} create Mounts the slider on provided element
+ * @returns {Function} helpers.current Current slide number
+ * @returns {Function} helpers.current Current slide number
+ * @returns {Function} helpers.next Function to trigger the next slide
+ * @returns {Function} helpers.prev Function to trigger the previous slide
+ * @returns {Function<Object>} helpers.details Provides details about the current slider
+ * @returns {Function} helpers.slider Returns the KeenSlider instance
+ * @returns {Function} helpers.destroy Manual destroy function
+ *
+ * @example
+ * ```ts
+ * const [create, { prev, next }] = createSlider();
+ * <div use:slider>...</div>
+ * ```
+ */
+const createSlider = (options, ...plugins) => {
+  let slider;
+
+  const opts = () => typeof options == "function" ? options() : options;
+
+  const [current, setCurrent] = createSignal(opts()?.initial || 0);
+
+  const destroy = () => slider && slider.destroy(); // Slider creation method and directive function
+
+
+  const create = el => {
+    el.classList.add("keen-slider"); // @ts-ignore
+
+    const getOptions = () => ({
+      selector: el.childNodes,
+      ...opts()
+    });
+
+    onMount(() => {
+      slider = new KeenSlider(el, getOptions(), plugins);
+      slider.on("slideChanged", () => setCurrent(slider.track.details.rel));
+    });
+    onCleanup(destroy);
+
+    if (typeof options === "function") {
+      createEffect(on(() => options, () => slider && slider.update(getOptions())));
+    }
+  };
+
+  return [create, {
+    current,
+    next: () => slider && slider.next(),
+    prev: () => slider && slider.prev(),
+    details: () => slider ? slider.track.details : {},
+    slider: () => slider,
+    moveTo: (id, duration = 250, absolute = false, easing) => slider?.moveToIdx(id, absolute, {
+      duration,
+      easing: easing
+    }),
+    destroy
+  }];
+};
+
+const _tmpl$ = /*#__PURE__*/template(`<div></div>`, 2),
+      _tmpl$2 = /*#__PURE__*/template(`<button></button>`, 2);
+
+function returnType(func) {
+  return {};
+}
+// Main context for the slider
+const SliderContext = createContext(createSignal(null));
+/**
+ * A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.
+ *
+ * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.
+ * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.
+ */
+
+const SliderProvider = props => createComponent(SliderContext.Provider, {
+  get value() {
+    return createSignal(null);
+  },
+
+  get children() {
+    return props.children;
+  }
+
+});
+/**
+ * Main Slider component for specifying the Slider on the page.
+ *
+ * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.
+ * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.
+ */
+
+const Slider = props => {
+  if (isServer) return props.children;
+  const [, setHelpers] = useContext(SliderContext);
+  const [slider, helpers] = createSlider(props.options || {}, ...(props.plugins || []));
+  setHelpers(helpers);
+  return (() => {
+    const _el$ = _tmpl$.cloneNode(true);
+
+    slider(_el$, () => true);
+
+    insert(_el$, () => props.children);
+
+    return _el$;
+  })();
+};
+/**
+ * Provides a helpful button with next/prev to pair with your slider.
+ *
+ * @param props {boolean} next - Specify if this should be a next button.
+ * @param props {boolean} prev - Specify if this should be a prev button.
+ * @param props {string} class - Class to override the button.
+ * @param props {object} classList - List of classes to override the button.
+ */
+
+const SliderButton = props => {
+  const context = useContext(SliderContext);
+
+  const changeSlide = () => {
+    if (context == null) return;
+    const [helpers] = context;
+    props.next ? helpers()?.next() : helpers()?.prev();
+  };
+
+  return (() => {
+    const _el$2 = _tmpl$2.cloneNode(true);
+
+    _el$2.$$click = changeSlide;
+
+    insert(_el$2, () => props.children);
+
+    effect(_p$ => {
+      const _v$ = props.disabled || false,
+            _v$2 = props.class,
+            _v$3 = props.classList;
+
+      _v$ !== _p$._v$ && (_el$2.disabled = _p$._v$ = _v$);
+      _v$2 !== _p$._v$2 && (_el$2.className = _p$._v$2 = _v$2);
+      _p$._v$3 = classList(_el$2, _v$3, _p$._v$3);
+      return _p$;
+    }, {
+      _v$: undefined,
+      _v$2: undefined,
+      _v$3: undefined
+    });
+
+    return _el$2;
+  })();
+};
+
+delegateEvents(["click"]);
+
+export { Slider, SliderButton, SliderContext, SliderProvider, createSlider, returnType };
+//# sourceMappingURL=index.module.js.map

package/dist/index/index.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.js","sources":["../../src/primitive.ts","../../src/components.tsx"],"sourcesContent":["import { on, onMount, createSignal, onCleanup, Accessor, createEffect } from \"solid-js\";\nimport KeenSlider, {\n  KeenSliderHooks,\n  KeenSliderInstance,\n  KeenSliderOptions,\n  KeenSliderPlugin,\n  TrackDetails\n} from \"keen-slider\";\n\ndeclare module \"solid-js\" {\n  namespace JSX {\n    interface Directives {\n      slider: {};\n    }\n  }\n}\n\n/**\n * Creates a slider powered by KeenSlider.\n *\n * @param {Object} options Values to initialize the slider with\n * @param {Array} plugins Extensions that enhance KeenSlider options\n * @returns {[create: Function, helpers: Object]} Returns mount and helper methods\n * @returns {Function} create Mounts the slider on provided element\n * @returns {Function} helpers.current Current slide number\n * @returns {Function} helpers.current Current slide number\n * @returns {Function} helpers.next Function to trigger the next slide\n * @returns {Function} helpers.prev Function to trigger the previous slide\n * @returns {Function<Object>} helpers.details Provides details about the current slider\n * @returns {Function} helpers.slider Returns the KeenSlider instance\n * @returns {Function} helpers.destroy Manual destroy function\n *\n * @example\n * ```ts\n * const [create, { prev, next }] = createSlider();\n * <div use:slider>...</div>\n * ```\n */\nexport const createSlider = <O = {}, P = {}, H extends string = KeenSliderHooks>(\n  options?: KeenSliderOptions<O, P, H> | Accessor<KeenSliderOptions<O, P, H>>,\n  ...plugins: KeenSliderPlugin<O, P, H>[]\n): [\n  create: (el: HTMLElement) => void,\n  helpers: {\n    current: Accessor<number>;\n    next: Accessor<void>;\n    prev: Accessor<void>;\n    moveTo: (\n      id: number,\n      duration?: number,\n      absolute?: boolean,\n      easing?: (t: number) => number\n    ) => void;\n    details: Accessor<TrackDetails>;\n    slider: Accessor<KeenSliderInstance<O, P, H> | undefined>;\n    destroy: Accessor<void>;\n  }\n] => {\n  let slider: KeenSliderInstance<O, P, H> | undefined;\n  const opts = () => typeof options == \"function\" ? options() : options;\n  const [current, setCurrent] = createSignal(opts()?.initial || 0);\n  const destroy = () => slider && slider.destroy();\n  // Slider creation method and directive function\n  const create = (el: HTMLElement) => {\n    el.classList.add(\"keen-slider\");\n    // @ts-ignore\n    const getOptions: Accessor<KeenSliderOptions<O, P, H> | undefined> = () => ({\n      selector: el.childNodes,\n      ...(opts())\n    });\n    onMount(() => {\n      slider = new KeenSlider<O, P, H>(el, getOptions(), plugins);\n      slider.on(\"slideChanged\", () => setCurrent(slider!.track.details.rel));\n    });\n    onCleanup(destroy);\n    if (typeof options === \"function\") {\n      createEffect(\n        on(\n          () => options,\n          () => slider && slider.update(getOptions())\n        )\n      );\n    }\n  };\n  return [\n    create,\n    {\n      current,\n      next: () => slider && slider.next(),\n      prev: () => slider && slider.prev(),\n      details: () => (slider ? slider.track.details : ({} as TrackDetails)),\n      slider: () => slider,\n      moveTo: (id: number, duration = 250, absolute = false, easing?: (t: number) => number) =>\n        slider?.moveToIdx(id, absolute, { duration, easing: easing }),\n      destroy\n    }\n  ];\n};\n","import { Component, createContext, useContext, createSignal, createMemo } from \"solid-js\";\nimport { createSlider } from \"./primitive\";\nimport { KeenSliderOptions, KeenSliderPlugin } from \"keen-slider\";\nimport { isServer } from \"solid-js/web\";\n\n// The following is a hacky way of extracting SliderHelpers\ninterface Func<T> {\n  ([...args]: any, args2?: any): T;\n}\nexport function returnType<T>(func: Func<T>) {\n  return {} as T;\n}\nconst sliderValues = returnType(createSlider);\ntype SliderHelpers = typeof sliderValues[1];\n\n// Main context for the slider\nexport const SliderContext = createContext(createSignal<SliderHelpers | null>(null));\n\n/**\n * A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.\n *\n * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.\n * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.\n */\nexport const SliderProvider: Component = props => (\n  <SliderContext.Provider value={createSignal(null)}>{props.children}</SliderContext.Provider>\n);\n\n/**\n * Main Slider component for specifying the Slider on the page.\n *\n * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.\n * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.\n */\nexport const Slider: Component<{\n  options?: KeenSliderOptions;\n  plugins?: KeenSliderPlugin[];\n}> = props => {\n  if (isServer) return props.children;\n  const [, setHelpers] = useContext(SliderContext);\n  const [slider, helpers] = createSlider(props.options || {}, ...(props.plugins || []));\n  setHelpers(helpers);\n  slider;\n  return <div use:slider>{props.children}</div>;\n};\n\n/**\n * Provides a helpful button with next/prev to pair with your slider.\n *\n * @param props {boolean} next - Specify if this should be a next button.\n * @param props {boolean} prev - Specify if this should be a prev button.\n * @param props {string} class - Class to override the button.\n * @param props {object} classList - List of classes to override the button.\n */\nexport const SliderButton: Component<{\n  next?: boolean;\n  prev?: boolean;\n  disabled?: boolean;\n  class?: string;\n  classList?: { [k: string]: boolean | undefined };\n}> = props => {\n  const context = useContext(SliderContext);\n  const changeSlide = () => {\n    if (context == null) return;\n    const [helpers] = context;\n    props.next ? helpers()?.next() : helpers()?.prev();\n  };\n  return (\n    <button\n      disabled={props.disabled || false}\n      class={props.class}\n      classList={props.classList}\n      onClick={changeSlide}\n    >\n      {props.children}\n    </button>\n  );\n};\n"],"names":["createSlider","options","plugins","slider","opts","current","setCurrent","createSignal","initial","destroy","create","el","classList","add","getOptions","selector","childNodes","onMount","KeenSlider","on","track","details","rel","onCleanup","createEffect","update","next","prev","moveTo","id","duration","absolute","easing","moveToIdx","returnType","func","SliderContext","createContext","SliderProvider","props","_$createComponent","children","Slider","isServer","setHelpers","useContext","helpers","SliderButton","context","changeSlide","_$effect","disabled","class","_$classList"],"mappings":"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"}

package/dist/index/primitive.d.ts

@@ -0,0 +1,39 @@
+import { Accessor } from "solid-js";
+import { KeenSliderHooks, KeenSliderInstance, KeenSliderOptions, KeenSliderPlugin, TrackDetails } from "keen-slider";
+declare module "solid-js" {
+    namespace JSX {
+        interface Directives {
+            slider: {};
+        }
+    }
+}
+/**
+ * Creates a slider powered by KeenSlider.
+ *
+ * @param {Object} options Values to initialize the slider with
+ * @param {Array} plugins Extensions that enhance KeenSlider options
+ * @returns {[create: Function, helpers: Object]} Returns mount and helper methods
+ * @returns {Function} create Mounts the slider on provided element
+ * @returns {Function} helpers.current Current slide number
+ * @returns {Function} helpers.current Current slide number
+ * @returns {Function} helpers.next Function to trigger the next slide
+ * @returns {Function} helpers.prev Function to trigger the previous slide
+ * @returns {Function<Object>} helpers.details Provides details about the current slider
+ * @returns {Function} helpers.slider Returns the KeenSlider instance
+ * @returns {Function} helpers.destroy Manual destroy function
+ *
+ * @example
+ * ```ts
+ * const [create, { prev, next }] = createSlider();
+ * <div use:slider>...</div>
+ * ```
+ */
+export declare const createSlider: <O = {}, P = {}, H extends string = KeenSliderHooks>(options?: KeenSliderOptions<O, P, H> | Accessor<KeenSliderOptions<O, P, H>>, ...plugins: KeenSliderPlugin<O, P, H>[]) => [create: (el: HTMLElement) => void, helpers: {
+    current: Accessor<number>;
+    next: Accessor<void>;
+    prev: Accessor<void>;
+    moveTo: (id: number, duration?: number, absolute?: boolean, easing?: (t: number) => number) => void;
+    details: Accessor<TrackDetails>;
+    slider: Accessor<KeenSliderInstance<O, P, H>>;
+    destroy: Accessor<void>;
+}];

package/dist/index/primitive.js

@@ -0,0 +1,58 @@
+import { on, onMount, createSignal, onCleanup, createEffect } from "solid-js";
+import KeenSlider from "keen-slider";
+/**
+ * Creates a slider powered by KeenSlider.
+ *
+ * @param {Object} options Values to initialize the slider with
+ * @param {Array} plugins Extensions that enhance KeenSlider options
+ * @returns {[create: Function, helpers: Object]} Returns mount and helper methods
+ * @returns {Function} create Mounts the slider on provided element
+ * @returns {Function} helpers.current Current slide number
+ * @returns {Function} helpers.current Current slide number
+ * @returns {Function} helpers.next Function to trigger the next slide
+ * @returns {Function} helpers.prev Function to trigger the previous slide
+ * @returns {Function<Object>} helpers.details Provides details about the current slider
+ * @returns {Function} helpers.slider Returns the KeenSlider instance
+ * @returns {Function} helpers.destroy Manual destroy function
+ *
+ * @example
+ * ```ts
+ * const [create, { prev, next }] = createSlider();
+ * <div use:slider>...</div>
+ * ```
+ */
+export const createSlider = (options, ...plugins) => {
+    let slider;
+    const opts = () => typeof options == "function" ? options() : options;
+    const [current, setCurrent] = createSignal(opts()?.initial || 0);
+    const destroy = () => slider && slider.destroy();
+    // Slider creation method and directive function
+    const create = (el) => {
+        el.classList.add("keen-slider");
+        // @ts-ignore
+        const getOptions = () => ({
+            selector: el.childNodes,
+            ...(opts())
+        });
+        onMount(() => {
+            slider = new KeenSlider(el, getOptions(), plugins);
+            slider.on("slideChanged", () => setCurrent(slider.track.details.rel));
+        });
+        onCleanup(destroy);
+        if (typeof options === "function") {
+            createEffect(on(() => options, () => slider && slider.update(getOptions())));
+        }
+    };
+    return [
+        create,
+        {
+            current,
+            next: () => slider && slider.next(),
+            prev: () => slider && slider.prev(),
+            details: () => (slider ? slider.track.details : {}),
+            slider: () => slider,
+            moveTo: (id, duration = 250, absolute = false, easing) => slider?.moveToIdx(id, absolute, { duration, easing: easing }),
+            destroy
+        }
+    ];
+};

package/dist/slider.css

@@ -27,4 +27,4 @@
 }
 .keen-slider:not([data-keen-slider-disabled])[data-keen-slider-moves] * {
   pointer-events: none;
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-slider",
-  "version": "1.3.0",
+  "version": "1.3.3",
   "description": "A slider utility for SolidJS.",
   "author": "David Di Biase",
   "repository": {
@@ -14,16 +14,36 @@
   "homepage": "https://github.com/davedbase/solid-slider#readme",
   "scripts": {
     "format": "prettier -w \"src/**/*.{js,ts,json,css,tsx,jsx}\"",
-    "build": "tsup && cp src/slider.css dist/slider.css"
+    "build": "rollup -c rollup.config.js && cp src/slider.css dist/slider.css && cp src/plugins/adaptiveHeight.css dist/adaptiveHeight/style.css"
   },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "main": "dist/index/index.common.js",
+  "module": "dist/index/index.module.js",
+  "types": "dist/index/index.d.ts",
   "exports": {
-    ".": "./dist/index.js",
-    "./plugins/autoplay": "./dist/plugins/autoplay.js",
-    "./slider.css": "./dist/slider.css"
+    ".": {
+      "solid": "./dist/index/index.jsx",
+      "import": "./dist/index/index.module.js",
+      "browser": "./dist/index/index.module.js",
+      "require": "./dist/index/index.common.js",
+      "node": "./dist/index/index.common.js"
+    },
+    "./plugins/autoplay":  {
+      "solid": "./dist/autoplay/autoplay.jsx",
+      "import": "./dist/autoplay/index.module.js",
+      "browser": "./dist/autoplay/index.module.js",
+      "require": "./dist/autoplay/index.common.js",
+      "node": "./dist/autoplay/index.common.js"
+    },
+    "./plugins/adaptiveHeight":  {
+      "solid": "./dist/adaptiveHeight/autoplay.jsx",
+      "import": "./dist/adaptiveHeight/index.module.js",
+      "browser": "./dist/adaptiveHeight/index.module.js",
+      "require": "./dist/adaptiveHeight/index.common.js",
+      "node": "./dist/adaptiveHeight/index.common.js"
+    },
+    "./slider.css": "./dist/slider.css",
+    "./adaptiveHeight/style.css": "./dist/adaptiveHeight/slider.css"
   },
-  "types": "dist/index.d.ts",
   "sideEffects": false,
   "files": [
     "dist"
@@ -41,15 +61,15 @@
     "plugin"
   ],
   "dependencies": {
-    "@solid-primitives/context": "^0.1.0",
     "@solid-primitives/timer": "1.3.0",
-    "esbuild-plugin-solid": "^0.4.2",
     "keen-slider": "^6.6.10",
-    "solid-js": "^1.3.16"
+    "solid-js": "^1.4.5"
   },
   "devDependencies": {
+    "esbuild-plugin-solid": "^0.4.2",
+    "rollup": "^2.70.2",
+    "rollup-preset-solid": "^1.4.0",
     "prettier": "^2.5.1",
-    "tsup": "^5.12.6",
     "typescript": "^4.5.5"
   }
 }

package/dist/chunk-NXJS66U5.mjs

@@ -1,20 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-
-export {
-  __spreadValues
-};

package/dist/index.d.ts

@@ -1,92 +0,0 @@
-import * as solid_js from 'solid-js';
-import { Accessor, Component } from 'solid-js';
-import * as keen_slider from 'keen-slider';
-import { KeenSliderHooks, KeenSliderOptions, KeenSliderPlugin, TrackDetails, KeenSliderInstance } from 'keen-slider';
-
-declare module "solid-js" {
-    namespace JSX {
-        interface Directives {
-            slider: {};
-        }
-    }
-}
-/**
- * Creates a slider powered by KeenSlider.
- *
- * @param {Object} options Values to initialize the slider with
- * @param {Array} plugins Extensions that enhance KeenSlider options
- * @returns {[create: Function, helpers: Object]} Returns mount and helper methods
- * @returns {Function} create Mounts the slider on provided element
- * @returns {Function} helpers.current Current slide number
- * @returns {Function} helpers.current Current slide number
- * @returns {Function} helpers.next Function to trigger the next slide
- * @returns {Function} helpers.prev Function to trigger the previous slide
- * @returns {Function<Object>} helpers.details Provides details about the current slider
- * @returns {Function} helpers.slider Returns the KeenSlider instance
- * @returns {Function} helpers.destroy Manual destroy function
- *
- * @example
- * ```ts
- * const [create, { prev, next }] = createSlider();
- * <div use:slider>...</div>
- * ```
- */
-declare const createSlider: <O = {}, P = {}, H extends string = KeenSliderHooks>(options?: KeenSliderOptions<O, P, H> | Accessor<KeenSliderOptions<O, P, H>> | undefined, ...plugins: KeenSliderPlugin<O, P, H>[]) => [create: (el: HTMLElement) => void, helpers: {
-    current: Accessor<number>;
-    next: Accessor<void>;
-    prev: Accessor<void>;
-    moveTo: (id: number, duration?: number | undefined, absolute?: boolean | undefined, easing?: ((t: number) => number) | undefined) => void;
-    details: Accessor<TrackDetails>;
-    slider: Accessor<KeenSliderInstance<O, P, H> | undefined>;
-    destroy: Accessor<void>;
-}];
-
-interface Func<T> {
-    ([...args]: any, args2?: any): T;
-}
-declare function returnType<T>(func: Func<T>): T;
-declare const SliderContext: solid_js.Context<solid_js.Signal<{
-    current: solid_js.Accessor<number>;
-    next: solid_js.Accessor<void>;
-    prev: solid_js.Accessor<void>;
-    moveTo: (id: number, duration?: number | undefined, absolute?: boolean | undefined, easing?: ((t: number) => number) | undefined) => void;
-    details: solid_js.Accessor<keen_slider.TrackDetails>;
-    slider: solid_js.Accessor<keen_slider.KeenSliderInstance<{}, {}, keen_slider.KeenSliderHooks> | undefined>;
-    destroy: solid_js.Accessor<void>;
-} | null>>;
-/**
- * A helpful and simple Provider to wrap your Slider if controls such as SliderButton are used.
- *
- * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.
- * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.
- */
-declare const SliderProvider: Component;
-/**
- * Main Slider component for specifying the Slider on the page.
- *
- * @param props {KeenSliderOptions} options - Accepts all KeenSlider options.
- * @param props {KeenSLiderPlugin} plugins - A list of Solid Slider or Keen slider plugins.
- */
-declare const Slider: Component<{
-    options?: KeenSliderOptions;
-    plugins?: KeenSliderPlugin[];
-}>;
-/**
- * Provides a helpful button with next/prev to pair with your slider.
- *
- * @param props {boolean} next - Specify if this should be a next button.
- * @param props {boolean} prev - Specify if this should be a prev button.
- * @param props {string} class - Class to override the button.
- * @param props {object} classList - List of classes to override the button.
- */
-declare const SliderButton: Component<{
-    next?: boolean;
-    prev?: boolean;
-    disabled?: boolean;
-    class?: string;
-    classList?: {
-        [k: string]: boolean | undefined;
-    };
-}>;
-
-export { Slider, SliderButton, SliderContext, SliderProvider, createSlider, returnType };

package/dist/index.js

@@ -1,158 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  Slider: () => Slider,
-  SliderButton: () => SliderButton,
-  SliderContext: () => SliderContext,
-  SliderProvider: () => SliderProvider,
-  createSlider: () => createSlider,
-  returnType: () => returnType
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/primitive.ts
-var import_solid_js = require("solid-js");
-var import_keen_slider = __toESM(require("keen-slider"));
-var createSlider = (options, ...plugins) => {
-  let slider;
-  const [current, setCurrent] = (0, import_solid_js.createSignal)(0);
-  const destroy = () => slider && slider.destroy();
-  const create = (el) => {
-    el.classList.add("keen-slider");
-    const opts = () => __spreadValues({
-      selector: el.childNodes
-    }, typeof options == "function" ? options() : options);
-    (0, import_solid_js.onMount)(() => {
-      slider = new import_keen_slider.default(el, opts(), plugins);
-      slider.on("slideChanged", () => setCurrent(slider.track.details.rel));
-      setCurrent(slider.track.details.rel);
-    });
-    (0, import_solid_js.onCleanup)(destroy);
-    if (typeof options === "function") {
-      (0, import_solid_js.createEffect)((0, import_solid_js.on)(() => options, () => slider && slider.update(opts())));
-    }
-  };
-  return [
-    create,
-    {
-      current,
-      next: () => slider && slider.next(),
-      prev: () => slider && slider.prev(),
-      details: () => slider ? slider.track.details : {},
-      slider: () => slider,
-      moveTo: (id, duration = 250, absolute = false, easing) => slider == null ? void 0 : slider.moveToIdx(id, absolute, { duration, easing }),
-      destroy
-    }
-  ];
-};
-
-// src/components.tsx
-var import_web = require("solid-js/web");
-var import_web2 = require("solid-js/web");
-var import_web3 = require("solid-js/web");
-var import_web4 = require("solid-js/web");
-var import_web5 = require("solid-js/web");
-var import_web6 = require("solid-js/web");
-var import_solid_js2 = require("solid-js");
-var import_web7 = require("solid-js/web");
-var _tmpl$ = /* @__PURE__ */ (0, import_web.template)(`<div></div>`, 2);
-var _tmpl$2 = /* @__PURE__ */ (0, import_web.template)(`<button></button>`, 2);
-function returnType(func) {
-  return {};
-}
-var sliderValues = returnType(createSlider);
-var SliderContext = (0, import_solid_js2.createContext)((0, import_solid_js2.createSignal)(null));
-var SliderProvider = (props) => (0, import_web6.createComponent)(SliderContext.Provider, {
-  get value() {
-    return (0, import_solid_js2.createSignal)(null);
-  },
-  get children() {
-    return props.children;
-  }
-});
-var Slider = (props) => {
-  if (import_web7.isServer)
-    return props.children;
-  const [, setHelpers] = (0, import_solid_js2.useContext)(SliderContext);
-  const [slider, helpers] = createSlider(props.options || {}, ...props.plugins || []);
-  setHelpers(helpers);
-  slider;
-  return (() => {
-    const _el$ = _tmpl$.cloneNode(true);
-    slider(_el$, () => true);
-    (0, import_web5.insert)(_el$, () => props.children);
-    return _el$;
-  })();
-};
-var SliderButton = (props) => {
-  const context = (0, import_solid_js2.useContext)(SliderContext);
-  const changeSlide = () => {
-    var _a, _b;
-    if (context == null)
-      return;
-    const [helpers] = context;
-    props.next ? (_a = helpers()) == null ? void 0 : _a.next() : (_b = helpers()) == null ? void 0 : _b.prev();
-  };
-  return (() => {
-    const _el$2 = _tmpl$2.cloneNode(true);
-    _el$2.$$click = changeSlide;
-    (0, import_web5.insert)(_el$2, () => props.children);
-    (0, import_web4.effect)((_p$) => {
-      const _v$ = props.disabled || false, _v$2 = props.class, _v$3 = props.classList;
-      _v$ !== _p$._v$ && (_el$2.disabled = _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && (_el$2.className = _p$._v$2 = _v$2);
-      _p$._v$3 = (0, import_web3.classList)(_el$2, _v$3, _p$._v$3);
-      return _p$;
-    }, {
-      _v$: void 0,
-      _v$2: void 0,
-      _v$3: void 0
-    });
-    return _el$2;
-  })();
-};
-(0, import_web2.delegateEvents)(["click"]);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Slider,
-  SliderButton,
-  SliderContext,
-  SliderProvider,
-  createSlider,
-  returnType
-});