@stubber/ui 1.8.2 → 1.9.0

package/dist/components/carousel/carousel-content.svelte

@@ -0,0 +1,29 @@
+<script>import emblaCarouselSvelte from "embla-carousel-svelte";
+import { getEmblaContext } from "./context.js";
+import { cn } from "../../utils/shadcn-utils.js";
+let className = void 0;
+export { className as class };
+const { orientation, options, plugins, onInit } = getEmblaContext("<Carousel.Content/>");
+</script>
+
+<div
+  class="overflow-hidden"
+  use:emblaCarouselSvelte={{
+    options: {
+      container: "[data-embla-container]",
+      slides: "[data-embla-slide]",
+      ...$options,
+      axis: $orientation === "horizontal" ? "x" : "y",
+    },
+    plugins: $plugins,
+  }}
+  on:emblaInit={onInit}
+>
+  <div
+    class={cn("flex", $orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
+    data-embla-container=""
+    {...$$restProps}
+  >
+    <slot />
+  </div>
+</div>

package/dist/components/carousel/carousel-content.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+declare const __propDef: {
+    props: HTMLAttributes<HTMLDivElement>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type CarouselContentProps = typeof __propDef.props;
+export type CarouselContentEvents = typeof __propDef.events;
+export type CarouselContentSlots = typeof __propDef.slots;
+export default class CarouselContent extends SvelteComponent<CarouselContentProps, CarouselContentEvents, CarouselContentSlots> {
+}
+export {};

package/dist/components/carousel/carousel-item.svelte

@@ -0,0 +1,20 @@
+<script>import { getEmblaContext } from "./context.js";
+import { cn } from "../../utils/shadcn-utils.js";
+let className = void 0;
+export { className as class };
+const { orientation } = getEmblaContext("<Carousel.Item/>");
+</script>
+
+<div
+  role="group"
+  aria-roledescription="slide"
+  class={cn(
+    "min-w-0 shrink-0 grow-0 basis-full",
+    $orientation === "horizontal" ? "pl-4" : "pt-4",
+    className
+  )}
+  data-embla-slide=""
+  {...$$restProps}
+>
+  <slot />
+</div>

package/dist/components/carousel/carousel-item.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+declare const __propDef: {
+    props: HTMLAttributes<HTMLDivElement>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type CarouselItemProps = typeof __propDef.props;
+export type CarouselItemEvents = typeof __propDef.events;
+export type CarouselItemSlots = typeof __propDef.slots;
+export default class CarouselItem extends SvelteComponent<CarouselItemProps, CarouselItemEvents, CarouselItemSlots> {
+}
+export {};

package/dist/components/carousel/carousel-next.svelte

@@ -0,0 +1,28 @@
+<script>import { getEmblaContext } from "./context.js";
+import { cn } from "../../utils/shadcn-utils.js";
+import { Button } from "../button/index.js";
+let className = void 0;
+export { className as class };
+export let variant = "outline";
+export let size = "icon";
+const { orientation, canScrollNext, scrollNext, handleKeyDown } = getEmblaContext("<Carousel.Next/>");
+</script>
+
+<Button
+  {variant}
+  {size}
+  class={cn(
+    "absolute h-8 w-8 touch-manipulation rounded-full",
+    $orientation === "horizontal"
+      ? "-right-12 top-1/2 -translate-y-1/2"
+      : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+    className
+  )}
+  disabled={!$canScrollNext}
+  on:click={scrollNext}
+  on:keydown={handleKeyDown}
+  {...$$restProps}
+>
+  <i class="far fa-arrow-right h-4 w-4" />
+  <span class="sr-only">Next slide</span>
+</Button>

package/dist/components/carousel/carousel-next.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { type Props } from "../button/index.js";
+declare const __propDef: {
+    props: Props;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type CarouselNextProps = typeof __propDef.props;
+export type CarouselNextEvents = typeof __propDef.events;
+export type CarouselNextSlots = typeof __propDef.slots;
+export default class CarouselNext extends SvelteComponent<CarouselNextProps, CarouselNextEvents, CarouselNextSlots> {
+}
+export {};

package/dist/components/carousel/carousel-previous.svelte

@@ -0,0 +1,28 @@
+<script>import { getEmblaContext } from "./context.js";
+import { cn } from "../../utils/shadcn-utils.js";
+import { Button } from "../button/index.js";
+let className = void 0;
+export { className as class };
+export let variant = "outline";
+export let size = "icon";
+const { orientation, canScrollPrev, scrollPrev, handleKeyDown } = getEmblaContext("<Carousel.Previous/>");
+</script>
+
+<Button
+  {variant}
+  {size}
+  class={cn(
+    "absolute h-8 w-8 touch-manipulation rounded-full",
+    $orientation === "horizontal"
+      ? "-left-12 top-1/2 -translate-y-1/2"
+      : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+    className
+  )}
+  disabled={!$canScrollPrev}
+  on:click={scrollPrev}
+  on:keydown={handleKeyDown}
+  {...$$restProps}
+>
+  <i class="far fa-arrow-left h-4 w-4" />
+  <span class="sr-only">Previous slide</span>
+</Button>

package/dist/components/carousel/carousel-previous.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { type Props } from "../button/index.js";
+declare const __propDef: {
+    props: Props;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type CarouselPreviousProps = typeof __propDef.props;
+export type CarouselPreviousEvents = typeof __propDef.events;
+export type CarouselPreviousSlots = typeof __propDef.slots;
+export default class CarouselPrevious extends SvelteComponent<CarouselPreviousProps, CarouselPreviousEvents, CarouselPreviousSlots> {
+}
+export {};

package/dist/components/carousel/carousel.svelte

@@ -0,0 +1,85 @@
+<script>import { writable } from "svelte/store";
+import { onDestroy } from "svelte";
+import { setEmblaContext } from "./context.js";
+import { cn } from "../../utils/shadcn-utils.js";
+export let opts = {};
+export let plugins = [];
+export let api = void 0;
+export let orientation = "horizontal";
+let className = void 0;
+export { className as class };
+const apiStore = writable(void 0);
+const orientationStore = writable(orientation);
+const canScrollPrev = writable(false);
+const canScrollNext = writable(false);
+const optionsStore = writable(opts);
+const pluginStore = writable(plugins);
+const scrollSnapsStore = writable([]);
+const selectedIndexStore = writable(0);
+$: orientationStore.set(orientation);
+$: pluginStore.set(plugins);
+$: optionsStore.set(opts);
+function scrollPrev() {
+  api?.scrollPrev();
+}
+function scrollNext() {
+  api?.scrollNext();
+}
+function scrollTo(index, jump) {
+  api?.scrollTo(index, jump);
+}
+function onSelect(api2) {
+  if (!api2) return;
+  canScrollPrev.set(api2.canScrollPrev());
+  canScrollNext.set(api2.canScrollNext());
+  selectedIndexStore.set(api2.selectedScrollSnap());
+}
+$: if (api) {
+  onSelect(api);
+  api.on("select", onSelect);
+  api.on("reInit", onSelect);
+}
+function handleKeyDown(e) {
+  if (e.key === "ArrowLeft") {
+    e.preventDefault();
+    scrollPrev();
+  } else if (e.key === "ArrowRight") {
+    e.preventDefault();
+    scrollNext();
+  }
+}
+setEmblaContext({
+  api: apiStore,
+  scrollPrev,
+  scrollNext,
+  orientation: orientationStore,
+  canScrollNext,
+  canScrollPrev,
+  handleKeyDown,
+  options: optionsStore,
+  plugins: pluginStore,
+  onInit,
+  scrollSnaps: scrollSnapsStore,
+  selectedIndex: selectedIndexStore,
+  scrollTo
+});
+function onInit(event) {
+  api = event.detail;
+  apiStore.set(api);
+  scrollSnapsStore.set(api.scrollSnapList());
+}
+onDestroy(() => {
+  api?.off("select", onSelect);
+});
+</script>
+
+<div
+  class={cn("relative", className)}
+  on:mouseenter
+  on:mouseleave
+  role="region"
+  aria-roledescription="carousel"
+  {...$$restProps}
+>
+  <slot />
+</div>

package/dist/components/carousel/carousel.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import { type CarouselProps } from "./context.js";
+declare const __propDef: {
+    props: CarouselProps;
+    events: {
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+type CarouselProps_ = typeof __propDef.props;
+export { CarouselProps_ as CarouselProps };
+export type CarouselEvents = typeof __propDef.events;
+export type CarouselSlots = typeof __propDef.slots;
+export default class Carousel extends SvelteComponent<CarouselProps_, CarouselEvents, CarouselSlots> {
+}

package/dist/components/carousel/context.d.ts

@@ -0,0 +1,32 @@
+import type { EmblaCarouselSvelteType } from "embla-carousel-svelte";
+import type emblaCarouselSvelte from "embla-carousel-svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { Readable, Writable } from "svelte/store";
+export type CarouselAPI = NonNullable<NonNullable<EmblaCarouselSvelteType["$$_attributes"]>["on:emblaInit"]> extends (evt: CustomEvent<infer CarouselAPI>) => void ? CarouselAPI : never;
+type EmblaCarouselConfig = NonNullable<Parameters<typeof emblaCarouselSvelte>[1]>;
+export type CarouselOptions = EmblaCarouselConfig["options"];
+export type CarouselPlugins = EmblaCarouselConfig["plugins"];
+export type CarouselProps = {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugins;
+    api?: CarouselAPI;
+    orientation?: "horizontal" | "vertical";
+} & HTMLAttributes<HTMLDivElement>;
+type EmblaContext = {
+    api: Writable<CarouselAPI | undefined>;
+    orientation: Writable<"horizontal" | "vertical">;
+    scrollNext: () => void;
+    scrollPrev: () => void;
+    canScrollNext: Readable<boolean>;
+    canScrollPrev: Readable<boolean>;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    options: Writable<CarouselOptions>;
+    plugins: Writable<CarouselPlugins>;
+    onInit: (e: CustomEvent<CarouselAPI>) => void;
+    scrollTo: (index: number, jump?: boolean) => void;
+    scrollSnaps: Readable<number[]>;
+    selectedIndex: Readable<number>;
+};
+export declare function setEmblaContext(config: EmblaContext): EmblaContext;
+export declare function getEmblaContext(name?: string): EmblaContext;
+export {};

package/dist/components/carousel/context.js

@@ -0,0 +1,12 @@
+import { getContext, hasContext, setContext } from "svelte";
+const EMBLA_CAROUSEL_CONTEXT = Symbol("EMBLA_CAROUSEL_CONTEXT");
+export function setEmblaContext(config) {
+    setContext(EMBLA_CAROUSEL_CONTEXT, config);
+    return config;
+}
+export function getEmblaContext(name = "This component") {
+    if (!hasContext(EMBLA_CAROUSEL_CONTEXT)) {
+        throw new Error(`${name} must be used within a <Carousel.Root> component`);
+    }
+    return getContext(EMBLA_CAROUSEL_CONTEXT);
+}

package/dist/components/carousel/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Root } from "./carousel.svelte";
+export { default as Content } from "./carousel-content.svelte";
+export { default as Item } from "./carousel-item.svelte";
+export { default as Previous } from "./carousel-previous.svelte";
+export { default as Next } from "./carousel-next.svelte";

package/dist/components/carousel/index.js

@@ -0,0 +1,5 @@
+export { default as Root } from "./carousel.svelte";
+export { default as Content } from "./carousel-content.svelte";
+export { default as Item } from "./carousel-item.svelte";
+export { default as Previous } from "./carousel-previous.svelte";
+export { default as Next } from "./carousel-next.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/ui",
-  "version": "1.8.2",
+  "version": "1.9.0",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && pnpm run package && node ./fix_dts_imports.js",
@@ -68,6 +68,7 @@
     "bits-ui": "^0.22.0",
     "clsx": "^2.1.1",
     "cmdk-sv": "^0.0.18",
+    "embla-carousel-svelte": "^8.6.0",
     "svelte-popperjs": "^1.3.2",
     "svelte-select": "^5.6.0",
     "svelte-sonner": "^0.3.28",