@kayord/ui 0.3.4 → 0.3.6

package/dist/components/custom/data-table/DataTable.svelte

@@ -1,4 +1,5 @@
 <script>import { ArrowDown, ArrowUp } from "lucide-svelte";
+import { fade } from "svelte/transition";
 import { Button, ProgressLoading, Skeleton } from "../../..";
 import { Subscribe, Render } from "svelte-headless-table";
 import * as Table from "../../ui/table";
@@ -19,6 +20,13 @@ const pageSize = isPagingEnabled ? pluginStates.page.pageSize : void 0;
 
 <div class="w-full">
 	<div class="rounded-md border m-2">
+		{#if isLoading}
+			<span in:fade={{ duration: 300 }}>
+				<ProgressLoading class="h-1" />
+			</span>
+		{:else}
+			<div class="h-1"></div>
+		{/if}
 		{#if $$slots.header || title.length > 0}
 			<div class="rounded-t-md overflow-hidden">
 				{#if $$slots.header}
@@ -33,9 +41,6 @@ const pageSize = isPagingEnabled ? pluginStates.page.pageSize : void 0;
 		{#if $$slots.subHeader}
 			<slot name="subHeader" />
 		{/if}
-		{#if isLoading}
-			<ProgressLoading class="h-1" />
-		{/if}
 		<Table.Root {...$tableAttrs} class="table-auto">
 			{#if !hideHeader}
 				<Table.Header>
@@ -68,7 +73,7 @@ const pageSize = isPagingEnabled ? pluginStates.page.pageSize : void 0;
 				</Table.Header>
 			{/if}
 			<Table.Body {...$tableBodyAttrs}>
-				{#if isLoading}
+				{#if isLoading && $rows.length == 0}
 					{#each { length: 5 } as _, i}
 						<Table.Row>
 							{#each flatColumns as cell}
@@ -102,6 +107,11 @@ const pageSize = isPagingEnabled ? pluginStates.page.pageSize : void 0;
 				{/if}
 			</Table.Body>
 		</Table.Root>
+		{#if isLoading}
+			<span in:fade={{ duration: 300 }}>
+				<ProgressLoading class="h-1" />
+			</span>
+		{/if}
 	</div>
 	{#if isPagingEnabled}
 		<Pagination.Root count={serverItemCount ?? $rows.length} perPage={$pageSize} let:pages let:currentPage>

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

@@ -0,0 +1,16 @@
+<script>import { cn } from "../../../utils.js";
+import { getEmblaContext } from "./context.js";
+let className = void 0;
+export { className as class };
+const { orientation } = getEmblaContext("<Carousel.Content/>");
+</script>
+
+<div class="overflow-hidden">
+	<div
+		class={cn("flex", $orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
+		data-embla-container=""
+		{...$$restProps}
+	>
+		<slot />
+	</div>
+</div>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+declare const __propDef: {
+    props: HTMLAttributes<HTMLDivElement>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+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/ui/carousel/carousel-item.svelte

@@ -0,0 +1,20 @@
+<script>import { cn } from "../../../utils";
+import { getEmblaContext } from "./context.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/ui/carousel/carousel-item.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+declare const __propDef: {
+    props: HTMLAttributes<HTMLDivElement>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+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/ui/carousel/carousel-next.svelte

@@ -0,0 +1,29 @@
+<script>import { Button, buttonVariants } from "../button/index.js";
+import { cn } from "../../../utils";
+import { ArrowRight } from "lucide-svelte";
+import { getEmblaContext } from "./context.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 rounded-full touch-manipulation",
+		$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}
+>
+	<ArrowRight class="h-4 w-4" />
+	<span class="sr-only">Next slide</span>
+</Button>

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

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import { type Props } from "../button/index.js";
+declare const __propDef: {
+    props: Props;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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/ui/carousel/carousel-previous.svelte

@@ -0,0 +1,29 @@
+<script>import { Button, buttonVariants } from "../button/index.js";
+import { cn } from "../../../utils.js";
+import { ArrowLeft } from "lucide-svelte";
+import { getEmblaContext } from "./context.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 rounded-full touch-manipulation",
+		$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}
+>
+	<ArrowLeft class="h-4 w-4" />
+	<span class="sr-only">Previous slide</span>
+</Button>

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

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import { type Props } from "../button/index.js";
+declare const __propDef: {
+    props: Props;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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/ui/carousel/carousel.svelte

@@ -0,0 +1,83 @@
+<script>import emblaCarouselSvelte from "embla-carousel-svelte";
+import { setEmblaContex } from "./context.js";
+import { cn } from "../../../utils.js";
+import { writable } from "svelte/store";
+import { onDestroy } from "svelte";
+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);
+$:
+  orientationStore.set(orientation);
+function scrollPrev() {
+  api?.scrollPrev();
+}
+function scrollNext() {
+  api?.scrollNext();
+}
+function onSelect(api2) {
+  if (!api2)
+    return;
+  canScrollPrev.set(api2.canScrollPrev());
+  canScrollNext.set(api2.canScrollNext());
+}
+$:
+  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();
+  }
+}
+setEmblaContex({
+  api: apiStore,
+  scrollPrev,
+  scrollNext,
+  orientation: orientationStore,
+  canScrollNext,
+  canScrollPrev,
+  handleKeyDown
+});
+function onInit(event) {
+  api = event.detail;
+  console.log(api.slideNodes());
+  apiStore.set(api);
+}
+onDestroy(() => {
+  api?.off("select", onSelect);
+});
+</script>
+
+<div
+	class={cn("relative", className)}
+	use:emblaCarouselSvelte={{
+		options: {
+			container: "[data-embla-container]",
+			slides: "[data-embla-slide]",
+			...opts,
+			axis: $orientationStore === "horizontal" ? "x" : "y"
+		},
+		plugins
+	}}
+	on:emblaInit={onInit}
+	on:mouseenter
+	on:mouseleave
+	role="region"
+	aria-roledescription="carousel"
+	{...$$restProps}
+>
+	<slot />
+</div>

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

@@ -0,0 +1,20 @@
+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: {};
+    };
+};
+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/ui/carousel/context.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="svelte" />
+import type { EmblaCarouselSvelteType } from "embla-carousel-svelte";
+import type emblaCarouselSvelte from "embla-carousel-svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { Writable, Readable } 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;
+};
+export declare function setEmblaContex(config: EmblaContext): EmblaContext;
+export declare function getEmblaContext(name?: string): EmblaContext;
+export {};

package/dist/components/ui/carousel/context.js

@@ -0,0 +1,12 @@
+import { getContext, hasContext, setContext } from "svelte";
+const EMBLA_CAROUSEL_CONTEXT = Symbol("EMBLA_CAROUSEL_CONTEXT");
+export function setEmblaContex(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/ui/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/ui/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/dist/components/ui/form/form-select.svelte.d.ts

@@ -3,8 +3,8 @@ declare const __propDef: {
     props: {
         disabled?: boolean | undefined;
         name?: string | undefined;
-        required?: boolean | undefined;
         loop?: boolean | undefined;
+        required?: boolean | undefined;
         preventScroll?: boolean | undefined;
         closeOnEscape?: boolean | undefined;
         closeOnOutsideClick?: boolean | undefined;

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

@@ -7,6 +7,7 @@ export { Badge, type Variant as BadgeVariant, badgeVariants } from "./badge/inde
 export { Button, type ButtonEvents, type ButtonProps, buttonVariants } from "./button/index.js";
 export * as Calendar from "./calendar/index.js";
 export * as Card from "./card/index.js";
+export * as Carousel from "./carousel/index.js";
 export { Checkbox } from "./checkbox/index.js";
 export * as Collapsible from "./collapsible/index.js";
 export * as Command from "./command/index.js";

package/dist/components/ui/index.js

@@ -7,6 +7,7 @@ export { Badge, badgeVariants } from "./badge/index.js";
 export { Button, buttonVariants } from "./button/index.js";
 export * as Calendar from "./calendar/index.js";
 export * as Card from "./card/index.js";
+export * as Carousel from "./carousel/index.js";
 export { Checkbox } from "./checkbox/index.js";
 export * as Collapsible from "./collapsible/index.js";
 export * as Command from "./command/index.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "0.3.4",
+  "version": "0.3.6",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -30,44 +30,45 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.5.1",
-    "bits-ui": "^0.14.0",
+    "bits-ui": "^0.15.1",
     "clsx": "^2.1.0",
     "cmdk-sv": "^0.0.13",
-    "formsnap": "^0.4.2",
-    "lucide-svelte": "^0.309.0",
+    "embla-carousel-svelte": "8.0.0-rc20",
+    "formsnap": "^0.4.3",
+    "lucide-svelte": "^0.315.0",
     "mode-watcher": "^0.1.2",
     "svelte-headless-table": "^0.18.1",
     "svelte-sonner": "^0.3.11",
-    "sveltekit-superforms": "^1.13.3",
-    "tailwind-merge": "^2.2.0",
+    "sveltekit-superforms": "^1.13.4",
+    "tailwind-merge": "^2.2.1",
     "tailwind-variants": "^0.1.20",
-    "vaul-svelte": "^0.0.7",
+    "vaul-svelte": "^0.1.0",
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@playwright/test": "^1.40.1",
-    "@sveltejs/adapter-auto": "^3.1.0",
-    "@sveltejs/kit": "^2.3.2",
-    "@sveltejs/package": "^2.2.5",
+    "@playwright/test": "^1.41.1",
+    "@sveltejs/adapter-auto": "^3.1.1",
+    "@sveltejs/kit": "^2.5.0",
+    "@sveltejs/package": "^2.2.6",
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
-    "@typescript-eslint/parser": "^6.19.0",
-    "autoprefixer": "^10.4.16",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "@typescript-eslint/parser": "^6.19.1",
+    "autoprefixer": "^10.4.17",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.35.1",
     "postcss": "^8.4.33",
     "postcss-load-config": "^5.0.2",
-    "prettier": "^3.2.2",
+    "prettier": "^3.2.4",
     "prettier-plugin-svelte": "^3.1.2",
     "publint": "^0.2.7",
-    "svelte": "^4.2.8",
+    "svelte": "^4.2.9",
     "svelte-check": "^3.6.3",
     "tailwindcss": "^3.4.1",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "vite": "^5.0.11",
-    "vitest": "^1.2.0"
+    "vite": "^5.0.12",
+    "vitest": "^1.2.1"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -81,8 +82,8 @@
     "test": "npm run test:integration && npm run test:unit",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write .",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write .",
     "test:integration": "playwright test",
     "test:unit": "vitest"
   }