@kayord/ui 1.0.0 → 1.0.2

package/dist/components/custom/avatar-group/avatar-group-etc.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import type { AvatarGroupEtcProps } from "./types";
+
+	let { ref = $bindable(null), plus, class: className, ...rest }: AvatarGroupEtcProps = $props();
+</script>
+
+<div
+	{...rest}
+	bind:this={ref}
+	class={cn(
+		"bg-accent ring-background relative flex size-8 items-center justify-center rounded-full text-xs ring-2",
+		className
+	)}
+>
+	<span>+{plus}</span>
+</div>

package/dist/components/custom/avatar-group/avatar-group-etc.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AvatarGroupEtcProps } from "./types";
+declare const AvatarGroupEtc: import("svelte").Component<AvatarGroupEtcProps, {}, "ref">;
+type AvatarGroupEtc = ReturnType<typeof AvatarGroupEtc>;
+export default AvatarGroupEtc;

package/dist/components/custom/avatar-group/avatar-group-member.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { Avatar } from "../../..";
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "../../../utils";
+
+	let { ref = $bindable(null), class: className, ...restProps }: AvatarPrimitive.RootProps = $props();
+</script>
+
+<Avatar.Root bind:ref class={cn("bg-accent ring-background ring-2", className)} {...restProps} />

package/dist/components/custom/avatar-group/avatar-group-member.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Avatar as AvatarPrimitive } from "bits-ui";
+declare const AvatarGroupMember: import("svelte").Component<AvatarPrimitive.RootProps, {}, "ref">;
+type AvatarGroupMember = ReturnType<typeof AvatarGroupMember>;
+export default AvatarGroupMember;

package/dist/components/custom/avatar-group/avatar-group.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn } from "../../../utils";
+	import type { AvatarGroupRootProps } from "./types";
+
+	let {
+		ref = $bindable(null),
+		orientation = "horizontal",
+		class: className,
+		children,
+		...rest
+	}: AvatarGroupRootProps = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-orientation={orientation}
+	class={cn(
+		'group/avatar-group flex items-center data-[orientation="horizontal"]:flex-row data-[orientation="horizontal"]:-space-x-2 data-[orientation="vertical"]:flex-col data-[orientation="vertical"]:-space-y-2',
+		className
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</div>

package/dist/components/custom/avatar-group/avatar-group.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AvatarGroupRootProps } from "./types";
+declare const AvatarGroup: import("svelte").Component<AvatarGroupRootProps, {}, "ref">;
+type AvatarGroup = ReturnType<typeof AvatarGroup>;
+export default AvatarGroup;

package/dist/components/custom/avatar-group/index.d.ts

@@ -0,0 +1,6 @@
+import Root from "./avatar-group.svelte";
+import Member from "./avatar-group-member.svelte";
+import Etc from "./avatar-group-etc.svelte";
+import { Fallback, Image } from "../../ui/avatar";
+export { Root, Member, Etc, Image as MemberImage, Fallback as MemberFallback };
+export type * from "./types";

package/dist/components/custom/avatar-group/index.js

@@ -0,0 +1,5 @@
+import Root from "./avatar-group.svelte";
+import Member from "./avatar-group-member.svelte";
+import Etc from "./avatar-group-etc.svelte";
+import { Fallback, Image } from "../../ui/avatar";
+export { Root, Member, Etc, Image as MemberImage, Fallback as MemberFallback };

package/dist/components/custom/avatar-group/types.d.ts

@@ -0,0 +1,13 @@
+import type { Avatar as AvatarPrimitive, WithChildren, WithoutChildren } from "bits-ui";
+import type { HTMLAttributes } from "svelte/elements";
+export type AvatarGroupRootPropsWithoutHTML = WithChildren<{
+    ref?: HTMLElement | null;
+    orientation?: "vertical" | "horizontal";
+}>;
+export type AvatarGroupRootProps = AvatarGroupRootPropsWithoutHTML & WithoutChildren<HTMLAttributes<HTMLDivElement>>;
+export type AvatarGroupMemberProps = AvatarPrimitive.RootProps;
+export type AvatarGroupEtcPropsWithoutHTML = WithChildren<{
+    ref?: HTMLElement | null;
+    plus: number;
+}>;
+export type AvatarGroupEtcProps = AvatarGroupEtcPropsWithoutHTML & WithoutChildren<HTMLAttributes<HTMLDivElement>>;

package/dist/components/custom/avatar-group/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -138,6 +138,7 @@
 						<Table.Row data-state={row.getIsSelected() && "selected"}>
 							{#each row.getVisibleCells() as cell}
 								<Table.Cell
+									class={cell.column.columnDef.meta?.className}
 									style={`width: ${cell.column.getSize()}px; min-width:${cell.column.columnDef.minSize}px; max-width:${cell.column.columnDef.maxSize}px`}
 								>
 									<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />

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

@@ -8,3 +8,4 @@ export * as TreeView from "./tree-view/index.js";
 export { ThemeSelector } from "./theme-selector/index.js";
 export { LightSwitch } from "./light-switch.svelte/index.js";
 export * from "./animations/index.js";
+export * as AvatarGroup from "./avatar-group/index.js";

package/dist/components/custom/index.js

@@ -8,3 +8,4 @@ export * as TreeView from "./tree-view/index.js";
 export { ThemeSelector } from "./theme-selector/index.js";
 export { LightSwitch } from "./light-switch.svelte/index.js";
 export * from "./animations/index.js";
+export * as AvatarGroup from "./avatar-group/index.js";

package/dist/components/ui/chart/chart-style.svelte

@@ -7,30 +7,30 @@
 		config ? Object.entries(config).filter(([, config]) => config.theme || config.color) : null
 	);
 
-	const styleOpen = ">elyts<".split("").reverse().join("");
-	const styleClose = ">elyts/<".split("").reverse().join("");
-</script>
+	const themeContents = $derived.by(() => {
+		if (!colorConfig || !colorConfig.length) return;
+
+		const themeContents = [];
+		for (let [_theme, prefix] of Object.entries(THEMES)) {
+			let content = `${prefix} [data-chart=${id}] {\n`;
+			const color = colorConfig.map(([key, itemConfig]) => {
+				const theme = _theme as keyof typeof itemConfig.theme;
+				const color = itemConfig.theme?.[theme] || itemConfig.color;
+				return color ? `\t--color-${key}: ${color};` : null;
+			});
+
+			content += color.join("\n") + "\n}";
 
-{#if colorConfig && colorConfig.length}
-	{@const themeContents = Object.entries(THEMES)
-		.map(
-			([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-	.map(([key, itemConfig]) => {
-		const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
-		return color ? `  --color-${key}: ${color};` : null;
-	})
-	.join("\n")}
-}
-`
-		)
-		.join("\n")}
+			themeContents.push(content);
+		}
+
+		return themeContents.join("\n");
+	});
+</script>
 
+{#if themeContents}
 	{#key id}
 		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-		{@html `${styleOpen}
-		${themeContents}
-	${styleClose}`}
+		{@html `<style>${themeContents}</style>`}
 	{/key}
 {/if}

package/dist/components/ui/dropdown-menu/index.d.ts

@@ -15,6 +15,7 @@ declare const Sub: import("svelte").Component<import("bits-ui").ContextMenuSubPr
 declare const Root: import("svelte").Component<{
     open?: boolean;
     onOpenChange?: import("bits-ui/dist/internal/types").OnChangeFn<boolean>;
+    onOpenChangeComplete?: import("bits-ui/dist/internal/types").OnChangeFn<boolean>;
     dir?: import("bits-ui").Direction;
 } & {
     children?: import("svelte").Snippet | undefined;

package/dist/components/ui/sidebar/sidebar-separator.svelte

@@ -10,6 +10,6 @@
 	bind:ref
 	data-slot="sidebar-separator"
 	data-sidebar="separator"
-	class={cn("bg-sidebar-border mx-2 w-auto", className)}
+	class={cn("bg-sidebar-border", className)}
 	{...restProps}
 />

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.0.2",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -35,51 +35,51 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.8.2",
-    "bits-ui": "2.5.0",
+    "bits-ui": "2.8.0",
     "clsx": "^2.1.1",
     "embla-carousel-svelte": "8.6.0",
     "formsnap": "2.0.1",
-    "mode-watcher": "^1.0.7",
+    "mode-watcher": "^1.0.8",
     "paneforge": "1.0.0-next.5",
-    "svelte-sonner": "^1.0.4",
-    "tailwind-merge": "^3.3.0",
+    "svelte-sonner": "^1.0.5",
+    "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^1.0.0",
     "vaul-svelte": "1.0.0-next.7"
   },
   "devDependencies": {
-    "@lucide/svelte": "^0.513.0",
+    "@lucide/svelte": "^0.515.0",
     "@sveltejs/adapter-auto": "^6.0.1",
-    "@sveltejs/kit": "^2.21.3",
+    "@sveltejs/kit": "^2.21.5",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.1.0",
-    "@tailwindcss/vite": "^4.1.8",
+    "@tailwindcss/vite": "^4.1.10",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/svelte": "^5.2.8",
     "@testing-library/user-event": "^14.6.1",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.7",
-    "@typescript-eslint/eslint-plugin": "^8.33.1",
-    "@typescript-eslint/parser": "^8.33.1",
+    "@typescript-eslint/eslint-plugin": "^8.34.0",
+    "@typescript-eslint/parser": "^8.34.0",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
-    "eslint": "^9.28.0",
+    "eslint": "^9.29.0",
     "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-svelte": "^3.9.1",
-    "happy-dom": "^17.6.3",
+    "eslint-plugin-svelte": "^3.9.2",
+    "happy-dom": "^18.0.1",
     "layerchart": "2.0.0-next.6",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.6.12",
     "publint": "^0.3.12",
-    "svelte": "5.33.18",
+    "svelte": "5.34.3",
     "svelte-check": "^4.2.1",
-    "tailwindcss": "^4.1.8",
+    "tailwindcss": "^4.1.10",
     "tslib": "^2.8.1",
     "tw-animate-css": "1.3.4",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
     "vitest": "^3.2.3",
-    "zod": "^3.25.56"
+    "zod": "^3.25.64"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",