@kayord/ui 1.1.1 → 1.1.3

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

@@ -1,4 +1,8 @@
-export declare const sum: <T>(data: T[], columnId: keyof T) => number;
-export declare const min: <T>(data: T[], columnId: keyof T) => number | undefined;
-export declare const max: <T>(data: T[], columnId: keyof T) => number | undefined;
-export declare const uniqueCount: <T>(data: T[], columnId: keyof T) => number;
+export declare const aggregationFns: {
+    sum: <T>(data: T[], columnId: keyof T) => number;
+    min: <T>(data: T[], columnId: keyof T) => number | undefined;
+    max: <T>(data: T[], columnId: keyof T) => number | undefined;
+    mean: <T>(data: T[], columnId: keyof T) => number | undefined;
+    uniqueCount: <T>(data: T[], columnId: keyof T) => number;
+    count: <T>(data: T[], columnId: keyof T) => number;
+};

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

@@ -1,10 +1,10 @@
-export const sum = (data, columnId) => {
+const sum = (data, columnId) => {
     return data.reduce((sum, next) => {
         const nextValue = next[columnId];
         return sum + (typeof nextValue === "number" ? nextValue : 0);
     }, 0);
 };
-export const min = (data, columnId) => {
+const min = (data, columnId) => {
     let min;
     data.forEach((row) => {
         const value = Number(row[columnId]);
@@ -14,7 +14,7 @@ export const min = (data, columnId) => {
     });
     return min;
 };
-export const max = (data, columnId) => {
+const max = (data, columnId) => {
     let max;
     data.forEach((row) => {
         const value = Number(row[columnId]);
@@ -24,6 +24,30 @@ export const max = (data, columnId) => {
     });
     return max;
 };
-export const uniqueCount = (data, columnId) => {
+const uniqueCount = (data, columnId) => {
     return new Set(data.map((d) => d[columnId])).size;
 };
+const count = (data, columnId) => {
+    return data.length;
+};
+const mean = (data, columnId) => {
+    let count = 0;
+    let sum = 0;
+    data.forEach((row) => {
+        let value = Number(row[columnId]);
+        if (value != null && (value = +value) >= value) {
+            (++count, (sum += value));
+        }
+    });
+    if (count)
+        return sum / count;
+    return;
+};
+export const aggregationFns = {
+    sum,
+    min,
+    max,
+    mean,
+    uniqueCount,
+    count,
+};

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

@@ -1,5 +1,5 @@
 export { default as DataTable } from "./DataTable.svelte";
 export { createShadTable } from "./shad-table.svelte";
-export { max, min, sum, uniqueCount } from "./data-table-utils";
+export { aggregationFns } from "./data-table-utils";
 export { decodeColumnFilters, decodeGlobalFilter, decodePageIndex, decodeSorting, decodeTableState, encodeColumnFilters, encodeGlobalFilter, encodePageIndex, encodeSorting, encodeTableState, } from "./table-search-params";
 export type { CustomColumnMeta, CustomOptions } from "./types";

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

@@ -1,4 +1,4 @@
 export { default as DataTable } from "./DataTable.svelte";
 export { createShadTable } from "./shad-table.svelte";
-export { max, min, sum, uniqueCount } from "./data-table-utils";
+export { aggregationFns } from "./data-table-utils";
 export { decodeColumnFilters, decodeGlobalFilter, decodePageIndex, decodeSorting, decodeTableState, encodeColumnFilters, encodeGlobalFilter, encodePageIndex, encodeSorting, encodeTableState, } from "./table-search-params";

package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -19,7 +19,7 @@
 		data-slot="dropdown-menu-content"
 		{sideOffset}
 		class={cn(
-			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none",
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--bits-dropdown-menu-content-available-height) min-w-[8rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none",
 			className
 		)}
 		{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -9,7 +9,7 @@
 	bind:ref
 	data-slot="dropdown-menu-sub-content"
 	class={cn(
-		"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+		"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--bits-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
 		className
 	)}
 	{...restProps}

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { UseClipboard } from "./use-clipboard.svelte";
+export { useMedia } from "./use-media.svelte";

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+export { UseClipboard } from "./use-clipboard.svelte";
+export { useMedia } from "./use-media.svelte";

package/dist/hooks/use-media.svelte.d.ts

@@ -0,0 +1,10 @@
+export type Breakpoints<K extends string> = Record<K, string>;
+/** Based on the default Tailwind CSS breakpoints https://tailwindcss.com/docs/responsive-design.
+ * A breakpoint is `true` when the width of the screen is greater than or equal to the breakpoint. */
+export declare const TAILWIND_BREAKPOINTS: Breakpoints<"sm" | "md" | "lg" | "xl" | "2xl">;
+/** Dynamically creates media queries for the provided breakpoints allowing you to access them as `media.<name>`.
+ *
+ * @param breakpoints
+ * @returns
+ */
+export declare function useMedia<K extends string = keyof typeof TAILWIND_BREAKPOINTS>(breakpoints?: Breakpoints<K>): Record<K, boolean>;

package/dist/hooks/use-media.svelte.js

@@ -0,0 +1,25 @@
+import { MediaQuery } from "svelte/reactivity";
+/** Based on the default Tailwind CSS breakpoints https://tailwindcss.com/docs/responsive-design.
+ * A breakpoint is `true` when the width of the screen is greater than or equal to the breakpoint. */
+export const TAILWIND_BREAKPOINTS = {
+    sm: "40rem",
+    md: "48rem",
+    lg: "64rem",
+    xl: "80rem",
+    "2xl": "96rem",
+};
+/** Dynamically creates media queries for the provided breakpoints allowing you to access them as `media.<name>`.
+ *
+ * @param breakpoints
+ * @returns
+ */
+export function useMedia(breakpoints = TAILWIND_BREAKPOINTS) {
+    const queries = {};
+    for (const [name, size] of Object.entries(breakpoints)) {
+        const query = new MediaQuery(`min-width: ${size}`);
+        Object.defineProperty(queries, name, {
+            get: () => query.current,
+        });
+    }
+    return queries;
+}

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./components/ui/index.js";
 export * from "./components/custom/index.js";
+export * from "./hooks/index.js";

package/dist/index.js

@@ -2,3 +2,5 @@
 export * from "./components/ui/index.js";
 // Custom components
 export * from "./components/custom/index.js";
+// Hooks
+export * from "./hooks/index.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "1.1.1",
+  "version": "1.1.3",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -58,12 +58,12 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.7",
-    "@typescript-eslint/eslint-plugin": "^8.37.0",
-    "@typescript-eslint/parser": "^8.37.0",
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
+    "@typescript-eslint/parser": "^8.38.0",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
     "eslint": "^9.31.0",
-    "eslint-config-prettier": "^10.1.5",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.11.0",
     "happy-dom": "^18.0.1",
     "layerchart": "2.0.0-next.30",
@@ -71,7 +71,7 @@
     "prettier-plugin-svelte": "^3.4.0",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "publint": "^0.3.12",
-    "svelte": "5.36.7",
+    "svelte": "5.36.13",
     "svelte-check": "^4.3.0",
     "sveltekit-superforms": "^2.27.1",
     "tailwindcss": "^4.1.11",