@kayord/ui 0.3.6 → 0.4.1

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

@@ -10,12 +10,15 @@ export let isLoading = false;
 export let hideHeader = false;
 export let noDataMessage = "No Data";
 export let serverItemCount = void 0;
+export let rowAction = void 0;
 const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates, rows, flatColumns } = tableViewModel;
 const isSortEnabled = pluginStates.sort != void 0;
 const sortKeys = isSortEnabled ? pluginStates.sort.sortKeys : void 0;
 const isPagingEnabled = pluginStates.page != void 0;
 const pageIndex = isPagingEnabled ? pluginStates.page.pageIndex : void 0;
 const pageSize = isPagingEnabled ? pluginStates.page.pageSize : void 0;
+const isSelectEnabled = pluginStates.select != void 0;
+const selectedDataIds = isSelectEnabled ? pluginStates.select.selectedDataIds : void 0;
 </script>
 
 <div class="w-full">
@@ -49,7 +52,7 @@ const pageSize = isPagingEnabled ? pluginStates.page.pageSize : void 0;
 							<Table.Row>
 								{#each headerRow.cells as cell (cell.id)}
 									<Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
-										<Table.Head {...attrs}>
+										<Table.Head {...attrs} class="[&:has([role=checkbox])]:pl-4">
 											{#if isSortEnabled}
 												<Button variant="ghost" on:click={props.sort.toggle}>
 													<Render of={cell.render()} />
@@ -93,7 +96,12 @@ const pageSize = isPagingEnabled ? pluginStates.page.pageSize : void 0;
 					{/if}
 					{#each $pageRows as row (row.id)}
 						<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
-							<Table.Row {...rowAttrs}>
+							<Table.Row
+								{...rowAttrs}
+								data-state={!isSelectEnabled ? false : $selectedDataIds[row.id] && "selected"}
+								class={rowAction == undefined ? "" : "hover:cursor-pointer"}
+								on:click={rowAction}
+							>
 								{#each row.cells as cell (cell.id)}
 									<Subscribe attrs={cell.attrs()} let:attrs>
 										<Table.Cell {...attrs}>
@@ -113,6 +121,12 @@ const pageSize = isPagingEnabled ? pluginStates.page.pageSize : void 0;
 			</span>
 		{/if}
 	</div>
+	{#if isSelectEnabled}
+		<div class="flex-1 text-sm text-muted-foreground ml-4">
+			{Object.keys($selectedDataIds).length} of{" "}
+			{$rows.length} row(s) selected.
+		</div>
+	{/if}
 	{#if isPagingEnabled}
 		<Pagination.Root count={serverItemCount ?? $rows.length} perPage={$pageSize} let:pages let:currentPage>
 			<Pagination.Content>
@@ -142,6 +156,7 @@ const pageSize = isPagingEnabled ? pluginStates.page.pageSize : void 0;
 			</Pagination.Content>
 		</Pagination.Root>
 	{/if}
+
 	{#if $$slots.footer}
 		<div class="rounded-b-md overflow-hidden">
 			<slot name="footer" />

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

@@ -9,6 +9,7 @@ declare class __sveltets_Render<T extends RowData> {
         hideHeader?: boolean | undefined;
         noDataMessage?: string | undefined;
         serverItemCount?: number | undefined;
+        rowAction?: (() => void) | undefined;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;

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

@@ -0,0 +1,5 @@
+<script>import { Checkbox } from "../../ui/checkbox";
+export let checked;
+</script>
+
+<Checkbox bind:checked={$checked} />

package/dist/components/custom/data-table/DataTableCheckbox.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+declare const __propDef: {
+    props: {
+        checked: Writable<boolean>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DataTableCheckboxProps = typeof __propDef.props;
+export type DataTableCheckboxEvents = typeof __propDef.events;
+export type DataTableCheckboxSlots = typeof __propDef.slots;
+export default class DataTableCheckbox extends SvelteComponent<DataTableCheckboxProps, DataTableCheckboxEvents, DataTableCheckboxSlots> {
+}
+export {};

package/dist/components/custom/data-table/index.d.ts

@@ -1 +1,2 @@
 export { default as DataTable } from "./DataTable.svelte";
+export { default as DataTableCheckbox } from "./DataTableCheckbox.svelte";

package/dist/components/custom/data-table/index.js

@@ -1 +1,2 @@
 export { default as DataTable } from "./DataTable.svelte";
+export { default as DataTableCheckbox } from "./DataTableCheckbox.svelte";

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

@@ -1,4 +1,4 @@
 export { Loader } from "./loader/index.js";
 export { ThemeSwitch } from "./theme-switch/index.js";
-export { DataTable } from "./data-table/index.js";
+export * from "./data-table/index.js";
 export { ProgressLoading } from "./progress-loading/index.js";

package/dist/components/custom/index.js

@@ -1,4 +1,4 @@
 export { Loader } from "./loader/index.js";
 export { ThemeSwitch } from "./theme-switch/index.js";
-export { DataTable } from "./data-table/index.js";
+export * from "./data-table/index.js";
 export { ProgressLoading } from "./progress-loading/index.js";

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

@@ -1,11 +1,24 @@
 <script>import { cn } from "../../../utils.js";
 import { getEmblaContext } from "./context.js";
+import emblaCarouselSvelte from "embla-carousel-svelte";
 let className = void 0;
 export { className as class };
-const { orientation } = getEmblaContext("<Carousel.Content/>");
+const { orientation, options, plugins, onInit } = getEmblaContext("<Carousel.Content/>");
 </script>
 
-<div class="overflow-hidden">
+<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=""

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

@@ -8,11 +8,7 @@ const { orientation } = getEmblaContext("<Carousel.Item/>");
 <div
 	role="group"
 	aria-roledescription="slide"
-	class={cn(
-		"min-w-0 shrink-0 grow-0 basis-full",
-		$orientation === "horizontal" ? "pl-4" : "pt-4",
-		className
-	)}
+	class={cn("min-w-0 shrink-0 grow-0 basis-full", $orientation === "horizontal" ? "pl-4" : "pt-4", className)}
 	data-embla-slide=""
 	{...$$restProps}
 >

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

@@ -14,9 +14,7 @@ const { orientation, canScrollPrev, scrollPrev, handleKeyDown } = getEmblaContex
 	{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",
+		$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}

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

@@ -1,5 +1,4 @@
-<script>import emblaCarouselSvelte from "embla-carousel-svelte";
-import { setEmblaContex } from "./context.js";
+<script>import { setEmblaContex } from "./context.js";
 import { cn } from "../../../utils.js";
 import { writable } from "svelte/store";
 import { onDestroy } from "svelte";
@@ -13,8 +12,14 @@ 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);
 $:
   orientationStore.set(orientation);
+$:
+  pluginStore.set(plugins);
+$:
+  optionsStore.set(opts);
 function scrollPrev() {
   api?.scrollPrev();
 }
@@ -49,11 +54,13 @@ setEmblaContex({
   orientation: orientationStore,
   canScrollNext,
   canScrollPrev,
-  handleKeyDown
+  handleKeyDown,
+  options: optionsStore,
+  plugins: pluginStore,
+  onInit
 });
 function onInit(event) {
   api = event.detail;
-  console.log(api.slideNodes());
   apiStore.set(api);
 }
 onDestroy(() => {
@@ -63,16 +70,6 @@ onDestroy(() => {
 
 <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"

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

@@ -21,6 +21,9 @@ type EmblaContext = {
     canScrollNext: Readable<boolean>;
     canScrollPrev: Readable<boolean>;
     handleKeyDown: (e: KeyboardEvent) => void;
+    options: Writable<CarouselOptions>;
+    plugins: Writable<CarouselPlugins>;
+    onInit: (e: CustomEvent<CarouselAPI>) => void;
 };
 export declare function setEmblaContex(config: EmblaContext): EmblaContext;
 export declare function getEmblaContext(name?: string): EmblaContext;

package/dist/components/ui/drawer/drawer-description.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: import("bits-ui/dist/bits/dialog/types").DescriptionProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DrawerDescriptionProps = typeof __propDef.props;
+export type DrawerDescriptionEvents = typeof __propDef.events;
+export type DrawerDescriptionSlots = typeof __propDef.slots;
+export default class DrawerDescription extends SvelteComponent<DrawerDescriptionProps, DrawerDescriptionEvents, DrawerDescriptionSlots> {
+}
+export {};

package/dist/components/ui/drawer/drawer-title.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: import("bits-ui/dist/bits/dialog/types").TitleProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DrawerTitleProps = typeof __propDef.props;
+export type DrawerTitleEvents = typeof __propDef.events;
+export type DrawerTitleSlots = typeof __propDef.slots;
+export default class DrawerTitle extends SvelteComponent<DrawerTitleProps, DrawerTitleEvents, DrawerTitleSlots> {
+}
+export {};

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

@@ -0,0 +1,13 @@
+/// <reference types="svelte" />
+import { Drawer as DrawerPrimitive } from "vaul-svelte";
+import Root from "./drawer.svelte";
+import Content from "./drawer-content.svelte";
+import Description from "./drawer-description.svelte";
+import Overlay from "./drawer-overlay.svelte";
+import Footer from "./drawer-footer.svelte";
+import Header from "./drawer-header.svelte";
+import Title from "./drawer-title.svelte";
+declare const Trigger: typeof DrawerPrimitive.Content;
+declare const Portal: typeof import("bits-ui/dist/bits/dialog").Portal;
+declare const Close: typeof DrawerPrimitive.Content;
+export { Root, Content, Description, Overlay, Footer, Header, Title, Trigger, Portal, Close, Root as Drawer, Content as DrawerContent, Description as DrawerDescription, Overlay as DrawerOverlay, Footer as DrawerFooter, Header as DrawerHeader, Title as DrawerTitle, Trigger as DrawerTrigger, Portal as DrawerPortal, Close as DrawerClose, };

package/dist/components/ui/select/select-trigger.svelte

@@ -7,7 +7,7 @@ export { className as class };
 
 <SelectPrimitive.Trigger
 	class={cn(
-		"flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 line-clamp-1 truncate",
 		className
 	)}
 	{...$$restProps}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "0.3.6",
+  "version": "0.4.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -30,19 +30,19 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.5.1",
-    "bits-ui": "^0.15.1",
+    "bits-ui": "^0.16.0",
     "clsx": "^2.1.0",
     "cmdk-sv": "^0.0.13",
-    "embla-carousel-svelte": "8.0.0-rc20",
+    "embla-carousel-svelte": "8.0.0-rc22",
     "formsnap": "^0.4.3",
-    "lucide-svelte": "^0.315.0",
-    "mode-watcher": "^0.1.2",
+    "lucide-svelte": "^0.320.0",
+    "mode-watcher": "^0.2.0",
     "svelte-headless-table": "^0.18.1",
     "svelte-sonner": "^0.3.11",
     "sveltekit-superforms": "^1.13.4",
     "tailwind-merge": "^2.2.1",
     "tailwind-variants": "^0.1.20",
-    "vaul-svelte": "^0.1.0",
+    "vaul-svelte": "^0.2.1",
     "zod": "^3.22.4"
   },
   "devDependencies": {
@@ -50,9 +50,9 @@
     "@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.1",
-    "@typescript-eslint/parser": "^6.19.1",
+    "@sveltejs/vite-plugin-svelte": "^3.0.2",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
     "autoprefixer": "^10.4.17",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
@@ -68,7 +68,7 @@
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
     "vite": "^5.0.12",
-    "vitest": "^1.2.1"
+    "vitest": "^1.2.2"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",