@kayord/ui 1.1.2 → 1.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/components/ui/chart/chart-style.svelte +3 -2
  2. package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte +1 -1
  3. package/dist/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte +1 -1
  4. package/dist/hooks/index.d.ts +2 -0
  5. package/dist/hooks/index.js +2 -0
  6. package/dist/hooks/use-media.svelte.d.ts +10 -0
  7. package/dist/hooks/use-media.svelte.js +25 -0
  8. package/dist/index.d.ts +1 -0
  9. package/dist/index.js +2 -0
  10. package/package.json +9 -9
package/dist/components/ui/chart/chart-style.svelte CHANGED
@@ -30,7 +30,8 @@
30
30
 
31
31
  {#if themeContents}
32
32
  {#key id}
33
- <!-- eslint-disable-next-line svelte/no-at-html-tags -->
34
- {@html `<style>${themeContents}</style>`}
33
+ <svelte:element this={"style"}>
34
+ {themeContents}
35
+ </svelte:element>
35
36
  {/key}
36
37
  {/if}
package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte CHANGED
@@ -19,7 +19,7 @@
19
19
  data-slot="dropdown-menu-content"
20
20
  {sideOffset}
21
21
  class={cn(
22
- "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",
22
+ "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",
23
23
  className
24
24
  )}
25
25
  {...restProps}
package/dist/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte CHANGED
@@ -9,7 +9,7 @@
9
9
  bind:ref
10
10
  data-slot="dropdown-menu-sub-content"
11
11
  class={cn(
12
- "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",
12
+ "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",
13
13
  className
14
14
  )}
15
15
  {...restProps}
package/dist/hooks/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { UseClipboard } from "./use-clipboard.svelte";
2
+ export { useMedia } from "./use-media.svelte";
package/dist/hooks/index.js ADDED
@@ -0,0 +1,2 @@
1
+ export { UseClipboard } from "./use-clipboard.svelte";
2
+ export { useMedia } from "./use-media.svelte";
package/dist/hooks/use-media.svelte.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ export type Breakpoints<K extends string> = Record<K, string>;
2
+ /** Based on the default Tailwind CSS breakpoints https://tailwindcss.com/docs/responsive-design.
3
+ * A breakpoint is `true` when the width of the screen is greater than or equal to the breakpoint. */
4
+ export declare const TAILWIND_BREAKPOINTS: Breakpoints<"sm" | "md" | "lg" | "xl" | "2xl">;
5
+ /** Dynamically creates media queries for the provided breakpoints allowing you to access them as `media.<name>`.
6
+ *
7
+ * @param breakpoints
8
+ * @returns
9
+ */
10
+ export declare function useMedia<K extends string = keyof typeof TAILWIND_BREAKPOINTS>(breakpoints?: Breakpoints<K>): Record<K, boolean>;
package/dist/hooks/use-media.svelte.js ADDED
@@ -0,0 +1,25 @@
1
+ import { MediaQuery } from "svelte/reactivity";
2
+ /** Based on the default Tailwind CSS breakpoints https://tailwindcss.com/docs/responsive-design.
3
+ * A breakpoint is `true` when the width of the screen is greater than or equal to the breakpoint. */
4
+ export const TAILWIND_BREAKPOINTS = {
5
+ sm: "40rem",
6
+ md: "48rem",
7
+ lg: "64rem",
8
+ xl: "80rem",
9
+ "2xl": "96rem",
10
+ };
11
+ /** Dynamically creates media queries for the provided breakpoints allowing you to access them as `media.<name>`.
12
+ *
13
+ * @param breakpoints
14
+ * @returns
15
+ */
16
+ export function useMedia(breakpoints = TAILWIND_BREAKPOINTS) {
17
+ const queries = {};
18
+ for (const [name, size] of Object.entries(breakpoints)) {
19
+ const query = new MediaQuery(`min-width: ${size}`);
20
+ Object.defineProperty(queries, name, {
21
+ get: () => query.current,
22
+ });
23
+ }
24
+ return queries;
25
+ }
package/dist/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export * from "./components/ui/index.js";
2
2
  export * from "./components/custom/index.js";
3
+ export * from "./hooks/index.js";
package/dist/index.js CHANGED
@@ -2,3 +2,5 @@
2
2
  export * from "./components/ui/index.js";
3
3
  // Custom components
4
4
  export * from "./components/custom/index.js";
5
+ // Hooks
6
+ export * from "./hooks/index.js";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@kayord/ui",
3
3
  "private": false,
4
- "version": "1.1.2",
4
+ "version": "1.1.4",
5
5
  "exports": {
6
6
  ".": {
7
7
  "types": "./dist/index.d.ts",
@@ -35,7 +35,7 @@
35
35
  },
36
36
  "dependencies": {
37
37
  "@internationalized/date": "^3.8.2",
38
- "bits-ui": "2.8.11",
38
+ "bits-ui": "2.8.12",
39
39
  "clsx": "^2.1.1",
40
40
  "embla-carousel-svelte": "8.6.0",
41
41
  "formsnap": "2.0.1",
@@ -49,7 +49,7 @@
49
49
  "devDependencies": {
50
50
  "@lucide/svelte": "^0.525.0",
51
51
  "@sveltejs/adapter-auto": "^6.0.1",
52
- "@sveltejs/kit": "^2.25.1",
52
+ "@sveltejs/kit": "^2.26.0",
53
53
  "@sveltejs/package": "^2.4.0",
54
54
  "@sveltejs/vite-plugin-svelte": "^6.1.0",
55
55
  "@tailwindcss/vite": "^4.1.11",
@@ -58,8 +58,8 @@
58
58
  "@testing-library/user-event": "^14.6.1",
59
59
  "@types/d3-scale": "^4.0.9",
60
60
  "@types/d3-shape": "^3.1.7",
61
- "@typescript-eslint/eslint-plugin": "^8.37.0",
62
- "@typescript-eslint/parser": "^8.37.0",
61
+ "@typescript-eslint/eslint-plugin": "^8.38.0",
62
+ "@typescript-eslint/parser": "^8.38.0",
63
63
  "d3-scale": "^4.0.2",
64
64
  "d3-shape": "^3.2.0",
65
65
  "eslint": "^9.31.0",
@@ -71,16 +71,16 @@
71
71
  "prettier-plugin-svelte": "^3.4.0",
72
72
  "prettier-plugin-tailwindcss": "^0.6.14",
73
73
  "publint": "^0.3.12",
74
- "svelte": "5.36.10",
74
+ "svelte": "5.36.16",
75
75
  "svelte-check": "^4.3.0",
76
76
  "sveltekit-superforms": "^2.27.1",
77
77
  "tailwindcss": "^4.1.11",
78
78
  "tslib": "^2.8.1",
79
- "tw-animate-css": "1.3.5",
79
+ "tw-animate-css": "1.3.6",
80
80
  "typescript": "^5.8.3",
81
- "vite": "^7.0.5",
81
+ "vite": "^7.0.6",
82
82
  "vitest": "^3.2.4",
83
- "zod": "^4.0.5"
83
+ "zod": "^4.0.10"
84
84
  },
85
85
  "svelte": "./dist/index.js",
86
86
  "types": "./dist/index.d.ts",