@uibit/carousel 0.1.0

package/dist/frameworks/svelte/index.svelte

@@ -0,0 +1,81 @@
+<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,
+      item = undefined,
+      children
+  } = $props<{
+    children?: any;
+    autoPlay?: boolean;
+    autoPlayInterval?: number;
+    loop?: boolean;
+    content?: HTMLElement | undefined;
+    viewport?: HTMLElement | undefined;
+    slotElement?: HTMLSlotElement | undefined;
+    currentIndex?: number;
+    totalSlides?: number;
+    canPrev?: boolean;
+    canNext?: boolean;
+    item?: import('svelte').Snippet;
+  }>();
+  
+  let elementRef: HTMLElementClass | null = $state(null);
+  
+  $effect(() => {
+    if (elementRef && autoPlay !== undefined) {
+      elementRef.autoPlay = autoPlay;
+    }
+    if (elementRef && autoPlayInterval !== undefined) {
+      elementRef.autoPlayInterval = autoPlayInterval;
+    }
+    if (elementRef && loop !== undefined) {
+      elementRef.loop = loop;
+    }
+    if (elementRef && content !== undefined) {
+      elementRef.content = content;
+    }
+    if (elementRef && viewport !== undefined) {
+      elementRef.viewport = viewport;
+    }
+    if (elementRef && slotElement !== undefined) {
+      elementRef.slotElement = slotElement;
+    }
+    if (elementRef && currentIndex !== undefined) {
+      elementRef.currentIndex = currentIndex;
+    }
+    if (elementRef && totalSlides !== undefined) {
+      elementRef.totalSlides = totalSlides;
+    }
+    if (elementRef && canPrev !== undefined) {
+      elementRef.canPrev = canPrev;
+    }
+    if (elementRef && canNext !== undefined) {
+      elementRef.canNext = canNext;
+    }
+  });
+  
+</script>
+
+<uibit-carousel bind:this={elementRef} {...$$restProps}>
+  {#if item}
+    <div slot="item">
+      {@render item()}
+    </div>
+  {/if}
+  {#if children}
+    {@render children()}
+  {:else}
+    <slot />
+  {/if}
+</uibit-carousel>

package/dist/frameworks/vue/index.ts

@@ -0,0 +1,33 @@
+import { defineComponent, h } 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 }
+  },
+  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?.());
+    };
+  }
+});

package/dist/index.d.ts

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

package/dist/index.d.ts.map

@@ -0,0 +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"}

package/dist/index.js

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

package/dist/index.js.map

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

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgKlB,CAAC"}

package/dist/styles.js

@@ -0,0 +1,163 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --uibit-carousel-gap: var(--uibit-spacing-4, 1rem);
+    --uibit-carousel-padding: 0;
+    --uibit-carousel-duration: 300ms;
+    --uibit-carousel-items-per-view: 1;
+    --uibit-carousel-border-color: var(--uibit-border-color, var(--uibit-color-gray-200, #e5e7eb));
+    --uibit-carousel-button-bg: var(--uibit-bg-surface, var(--uibit-color-white, #ffffff));
+    --uibit-carousel-button-bg-hover: var(--uibit-focus-color, var(--uibit-color-black, #000000));
+    --uibit-carousel-button-color-hover: var(--uibit-color-white, #ffffff);
+    --uibit-carousel-indicator-bg: var(--uibit-border-color, var(--uibit-color-gray-200, #e5e7eb));
+    --uibit-carousel-indicator-active-bg: var(--uibit-focus-color, var(--uibit-color-black, #000000));
+    --uibit-carousel-focus-color: var(--uibit-focus-color, var(--uibit-color-black, #000000));
+    display: block;
+    width: 100%;
+  }
+
+  .carousel {
+    display: flex;
+    flex-direction: column;
+    gap: var(--uibit-spacing-4, 1rem);
+    width: 100%;
+  }
+
+  .carousel-viewport {
+    position: relative;
+    overflow: hidden;
+    border: 0.0625rem solid var(--uibit-carousel-border-color);
+    border-radius: var(--uibit-radius-2xl, 0.75rem);
+    background-color: var(--uibit-bg-surface, var(--uibit-color-white, #ffffff));
+  }
+
+  .carousel-content {
+    display: flex;
+    gap: var(--uibit-carousel-gap);
+    overflow-x: auto;
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+    padding: var(--uibit-carousel-padding, 0);
+    width: 100%;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+
+  .carousel-content::-webkit-scrollbar {
+    display: none;
+  }
+
+  slot[name='item'] {
+    display: contents;
+  }
+
+  ::slotted([slot='item']),
+  ::slotted(:not([slot])) {
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+    width: calc(
+      (100% - (var(--uibit-carousel-items-per-view, 1) - 1) * var(--uibit-carousel-gap, 1rem)) /
+        var(--uibit-carousel-items-per-view, 1)
+    );
+    flex-shrink: 0;
+    min-width: 0;
+  }
+
+  .carousel-controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--uibit-spacing-4, 1rem);
+  }
+
+  .carousel-buttons {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .carousel-button {
+    width: 2.25rem;
+    height: 2.25rem;
+    background-color: var(--uibit-carousel-button-bg, #ffffff);
+    border: 0.0625rem solid var(--uibit-carousel-border-color, #e5e7eb);
+    border-radius: 9999rem;
+    cursor: pointer;
+    color: var(--uibit-text-primary, #111827);
+    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, opacity 100ms ease, transform 150ms ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: none;
+  }
+
+  .carousel-button:hover:not(:disabled) {
+    background-color: var(--uibit-carousel-button-bg-hover, #f3f4f6);
+    color: var(--uibit-carousel-button-color-hover, #ffffff);
+    border-color: var(--uibit-carousel-button-bg-hover, #000000);
+    box-shadow: none;
+    transform: scale(1.06);
+  }
+
+  .carousel-button:active:not(:disabled) {
+    transform: scale(0.95);
+  }
+
+  .carousel-button:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  .carousel-button:focus-visible {
+    outline: 0.125rem solid var(--uibit-carousel-focus-color);
+    outline-offset: 0.125rem;
+  }
+
+  .carousel-indicators {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .carousel-indicator {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 9999rem;
+    background-color: var(--uibit-carousel-indicator-bg);
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    transition: background-color 150ms ease, width 150ms ease, border-radius 150ms ease, opacity 100ms ease;
+  }
+
+  .carousel-indicator:hover {
+    background-color: var(--uibit-carousel-indicator-active-bg);
+  }
+
+  .carousel-indicator:active {
+    opacity: 0.6;
+  }
+
+  .carousel-indicator.active {
+    width: 1.25rem;
+    border-radius: 0.25rem;
+    background-color: var(--uibit-carousel-indicator-active-bg);
+  }
+
+  .carousel-indicator:focus-visible {
+    outline: 0.125rem solid var(--uibit-carousel-focus-color);
+    outline-offset: 0.125rem;
+  }
+
+  @media (max-width: 40rem) {
+    .carousel-controls {
+      flex-wrap: wrap;
+    }
+
+    .carousel-content {
+      padding: var(--uibit-carousel-padding, 0);
+    }
+  }
+
+`;
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgKxB,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,21 @@
+import type UIBitCarousel from './carousel';
+export interface CarouselConfig {
+    autoPlay?: boolean;
+    autoPlayInterval?: number;
+    loop?: boolean;
+    itemsPerView?: number;
+    gap?: number;
+    duration?: number;
+}
+export interface SlideChangeEvent extends CustomEvent {
+    detail: {
+        index: number;
+        totalSlides: number;
+    };
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uibit-carousel': UIBitCarousel;
+    }
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,aAAa,MAAM,YAAY,CAAC;AAE5C,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACf,UAAU,qBAAqB;QAC3B,gBAAgB,EAAE,aAAa,CAAC;KACnC;CACA"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@uibit/carousel",
+  "version": "0.1.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",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./carousel.css": "./dist/carousel.css",
+    "./custom-elements.json": "./custom-elements.json",
+    "./react": "./dist/frameworks/react/index.d.ts",
+    "./vue": "./dist/frameworks/vue/index.ts",
+    "./svelte": "./dist/frameworks/svelte/index.svelte",
+    "./angular": "./dist/frameworks/angular/index.ts",
+    "./solid": "./dist/frameworks/solid/index.d.ts",
+    "./astro": "./dist/frameworks/astro/index.astro",
+    "./qwik": "./dist/frameworks/qwik/index.tsx",
+    "./nuxt": "./dist/frameworks/nuxt/index.ts",
+    "./preact": "./dist/frameworks/preact/index.d.ts",
+    "./stencil": "./dist/frameworks/stencil/index.d.ts"
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md",
+    "LICENSE",
+    "custom-elements.json"
+  ],
+  "keywords": [
+    "carousel",
+    "web-component",
+    "lit",
+    "scroll-snap",
+    "accessible",
+    "a11y"
+  ],
+  "author": "Jonathan Rawlings",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rawlings/uibit",
+    "directory": "packages/components/carousel"
+  },
+  "dependencies": {
+    "lucide": "^1.24.0",
+    "@uibit/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.43",
+    "lit": "^3.3.3",
+    "typescript": "7.0.2",
+    "@uibit/codegen": "0.1.0"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0",
+    "react": ">=18",
+    "vue": ">=3",
+    "svelte": ">=4 || ^5",
+    "@angular/core": ">=14"
+  },
+  "customElements": "custom-elements.json",
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    }
+  },
+  "uibit": {
+    "id": "carousel",
+    "title": "Carousel",
+    "category": "Media",
+    "tagName": "uibit-carousel"
+  },
+  "scripts": {
+    "build": "cem analyze --globs 'src/**/*.ts' --litelement && uibit-codegen --package . && tsc",
+    "dev": "concurrently \"cem analyze --globs 'src/**/*.ts' --litelement --watch\" \"tsc --watch\"",
+    "analyze": "cem analyze --globs 'src/**/*.ts' --litelement",
+    "typecheck": "tsc --noEmit"
+  }
+}