@kayord/ui 0.0.15 → 0.0.17

package/README.md

@@ -9,6 +9,7 @@ Pnpm command to install ui library.
 ```bash
 # create a new project in the current directory
 pnpm add -D @kayord/ui
+pnpm add -D @kayord/tw-plugin
 ```
 
 ### Manual Setup New Project
@@ -16,7 +17,6 @@ pnpm add -D @kayord/ui
 ```bash
 # Setup new sveltekit project
 npm create svelte@latest my-app
-
 npx svelte-add@latest tailwindcss
 pnpm i
 ```
@@ -35,63 +35,17 @@ module.exports = {
 ```
 
 ```ts
+// tailwind.config.ts
+
 import type { Config } from "tailwindcss";
 import { fontFamily } from "tailwindcss/defaultTheme";
-import { kayordPlugin } from "@kayord/ui";
-// import forms from '@tailwindcss/forms';
+import { kayordPlugin } from '@kayord/tw-plugin';
 
 export default {
  darkMode: ["class"],
  content: ["./src/**/*.{html,js,svelte,ts}", "./node_modules/@kayord/ui/**/*.{html,js,svelte,ts}"],
  theme: {
-  container: {
-   center: true,
-   padding: "2rem",
-   screens: {
-    "2xl": "1400px",
-   },
-  },
   extend: {
-   colors: {
-    border: "hsl(var(--border))",
-    input: "hsl(var(--input))",
-    ring: "hsl(var(--ring))",
-    background: "hsl(var(--background))",
-    foreground: "hsl(var(--foreground))",
-    primary: {
-     DEFAULT: "hsl(var(--primary))",
-     foreground: "hsl(var(--primary-foreground))",
-    },
-    secondary: {
-     DEFAULT: "hsl(var(--secondary))",
-     foreground: "hsl(var(--secondary-foreground))",
-    },
-    destructive: {
-     DEFAULT: "hsl(var(--destructive))",
-     foreground: "hsl(var(--destructive-foreground))",
-    },
-    muted: {
-     DEFAULT: "hsl(var(--muted))",
-     foreground: "hsl(var(--muted-foreground))",
-    },
-    accent: {
-     DEFAULT: "hsl(var(--accent))",
-     foreground: "hsl(var(--accent-foreground))",
-    },
-    popover: {
-     DEFAULT: "hsl(var(--popover))",
-     foreground: "hsl(var(--popover-foreground))",
-    },
-    card: {
-     DEFAULT: "hsl(var(--card))",
-     foreground: "hsl(var(--card-foreground))",
-    },
-   },
-   borderRadius: {
-    lg: "var(--radius)",
-    md: "calc(var(--radius) - 2px)",
-    sm: "calc(var(--radius) - 4px)",
-   },
    fontFamily: {
     sans: [...fontFamily.sans],
    },

package/dist/components/custom/theme-switch/ThemeSwitch.svelte

@@ -1,51 +1,9 @@
-<script>import { Moon, Sun } from "lucide-svelte";
-import { onMount } from "svelte";
-let dark;
-let hidden = true;
-onMount(() => {
-  dark = document.documentElement.classList.contains("dark");
-  hidden = false;
-  const matcher = window.matchMedia("(prefers-color-scheme: dark)");
-  matcher.addEventListener("change", handleChange);
-  return () => matcher.removeEventListener("change", handleChange);
-});
-function handleChange({ matches: dark2 }) {
-  if (!localStorage.theme) {
-    setMode(dark2);
-  }
-}
-function toggle() {
-  setMode(!dark);
-}
-function setMode(value) {
-  dark = value;
-  if (dark) {
-    document.documentElement.classList.add("dark");
-  } else {
-    document.documentElement.classList.remove("dark");
-  }
-  localStorage.theme = dark ? "dark" : "light";
-  if (window.matchMedia(`(prefers-color-scheme: ${localStorage.theme})`).matches) {
-    localStorage.removeItem("theme");
-  }
-}
+<script>import { toggleMode, mode } from "mode-watcher";
+import { Moon, Sun } from "lucide-svelte";
 </script>
 
-<svelte:head>
-	<script>
-		if (
-			localStorage.theme === "dark" ||
-			(!localStorage.theme && window.matchMedia("(prefers-color-scheme: dark)").matches)
-		) {
-			document.documentElement.classList.add("dark");
-		} else {
-			document.documentElement.classList.remove("dark");
-		}
-	</script>
-</svelte:head>
-
-<button on:click={toggle} class="text-primary">
-	{#if dark}
+<button on:click={toggleMode} class="text-primary">
+	{#if $mode == "dark"}
 		<Moon />
 	{:else}
 		<Sun />

package/dist/components/ui/dropdown-menu/dropdown-menu-item.svelte.d.ts

@@ -3,6 +3,7 @@ import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 declare const __propDef: {
     props: {
         disabled?: boolean | undefined;
+        href?: string | null | undefined;
         asChild?: boolean | undefined;
     } & import("bits-ui/dist/internal").HTMLDivAttributes & {
         inset?: boolean | undefined;
@@ -10,7 +11,7 @@ declare const __propDef: {
     slots: {
         default: {};
     };
-    events: DropdownMenuPrimitive.ItemEvents;
+    events: DropdownMenuPrimitive.DropdownMenuItemEvents;
 };
 export type DropdownMenuItemProps = typeof __propDef.props;
 export type DropdownMenuItemEvents = typeof __propDef.events;

package/dist/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 declare const __propDef: {
-    props: DropdownMenuPrimitive.RadioGroupProps;
+    props: DropdownMenuPrimitive.DropdownMenuRadioGroupProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponent } from "svelte";
 import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 declare const __propDef: {
-    props: DropdownMenuPrimitive.RadioItemProps;
+    props: DropdownMenuPrimitive.DropdownMenuRadioItemProps;
     slots: {
         default: {};
     };
-    events: DropdownMenuPrimitive.RadioItemEvents;
+    events: DropdownMenuPrimitive.DropdownMenuRadioItemEvents;
 };
 export type DropdownMenuRadioItemProps = typeof __propDef.props;
 export type DropdownMenuRadioItemEvents = typeof __propDef.events;

package/dist/components/ui/dropdown-menu/dropdown-menu-separator.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 declare const __propDef: {
-    props: DropdownMenuPrimitive.SeparatorProps;
+    props: DropdownMenuPrimitive.DropdownMenuSeparatorProps;
     events: {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -1,11 +1,11 @@
 import { SvelteComponent } from "svelte";
 import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 declare const __propDef: {
-    props: DropdownMenuPrimitive.SubContentProps;
+    props: DropdownMenuPrimitive.DropdownMenuSubContentProps;
     slots: {
         default: {};
     };
-    events: DropdownMenuPrimitive.SubContentEvents;
+    events: DropdownMenuPrimitive.DropdownMenuSubContentEvents;
 };
 export type DropdownMenuSubContentProps = typeof __propDef.props;
 export type DropdownMenuSubContentEvents = typeof __propDef.events;

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte.d.ts

@@ -10,7 +10,7 @@ declare const __propDef: {
     slots: {
         default: {};
     };
-    events: DropdownMenuPrimitive.SubTriggerEvents;
+    events: DropdownMenuPrimitive.DropdownMenuSubTriggerEvents;
 };
 export type DropdownMenuSubTriggerProps = typeof __propDef.props;
 export type DropdownMenuSubTriggerEvents = typeof __propDef.events;

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

@@ -5,7 +5,7 @@ declare const __propDef: {
     props: {
         disabled?: boolean | undefined;
         pressed?: boolean | undefined;
-        onPressedChange?: import("bits-ui/dist/internal").OnChangeFn<boolean | undefined> | undefined;
+        onPressedChange?: import("bits-ui/dist/internal").OnChangeFn<boolean> | undefined;
         asChild?: boolean | undefined;
     } & import("svelte/elements").HTMLButtonAttributes & {
         variant?: Variant;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kayord/ui",
   "private": false,
-  "version": "0.0.15",
+  "version": "0.0.17",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -21,37 +21,38 @@
     "svelte": "^4.0.0"
   },
   "dependencies": {
-    "bits-ui": "^0.5.7",
+    "bits-ui": "^0.9.0",
     "clsx": "^2.0.0",
-    "formsnap": "^0.1.4",
-    "lucide-svelte": "^0.284.0",
+    "formsnap": "^0.2.1",
+    "lucide-svelte": "^0.290.0",
+    "mode-watcher": "^0.0.5",
     "sveltekit-superforms": "^1.8.0",
-    "tailwind-merge": "^1.14.0",
-    "tailwind-variants": "^0.1.14",
+    "tailwind-merge": "^2.0.0",
+    "tailwind-variants": "^0.1.18",
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@playwright/test": "^1.38.1",
+    "@playwright/test": "^1.39.0",
     "@sveltejs/adapter-auto": "^2.1.0",
-    "@sveltejs/kit": "^1.25.1",
+    "@sveltejs/kit": "^1.27.2",
     "@sveltejs/package": "^2.2.2",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^6.7.4",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
     "autoprefixer": "^10.4.16",
-    "eslint": "^8.51.0",
+    "eslint": "^8.52.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-svelte": "^2.34.0",
     "postcss": "^8.4.31",
     "postcss-load-config": "^4.0.1",
     "prettier": "^3.0.3",
     "prettier-plugin-svelte": "^3.0.3",
-    "publint": "^0.2.3",
-    "svelte": "^4.2.1",
+    "publint": "^0.2.5",
+    "svelte": "^4.2.2",
     "svelte-check": "^3.5.2",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.3.5",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
-    "vite": "^4.4.11",
+    "vite": "^4.5.0",
     "vitest": "^0.34.6"
   },
   "svelte": "./dist/index.js",

package/dist/components/ui/alert-dialog/alert-dialog-action.svelte.d.ts

@@ -1,17 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-declare const __propDef: {
-    props: AlertDialogPrimitive.TriggerProps;
-    slots: {
-        default: {
-            builder: any;
-        };
-    };
-    events: AlertDialogPrimitive.ActionEvents;
-};
-export type AlertDialogActionProps = typeof __propDef.props;
-export type AlertDialogActionEvents = typeof __propDef.events;
-export type AlertDialogActionSlots = typeof __propDef.slots;
-export default class AlertDialogAction extends SvelteComponent<AlertDialogActionProps, AlertDialogActionEvents, AlertDialogActionSlots> {
-}
-export {};

package/dist/components/ui/alert-dialog/alert-dialog-cancel.svelte.d.ts

@@ -1,17 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-declare const __propDef: {
-    props: AlertDialogPrimitive.TriggerProps;
-    slots: {
-        default: {
-            builder: any;
-        };
-    };
-    events: AlertDialogPrimitive.CancelEvents;
-};
-export type AlertDialogCancelProps = typeof __propDef.props;
-export type AlertDialogCancelEvents = typeof __propDef.events;
-export type AlertDialogCancelSlots = typeof __propDef.slots;
-export default class AlertDialogCancel extends SvelteComponent<AlertDialogCancelProps, AlertDialogCancelEvents, AlertDialogCancelSlots> {
-}
-export {};

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

@@ -1,17 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { Select as SelectPrimitive } from "bits-ui";
-declare const __propDef: {
-    props: SelectPrimitive.TriggerProps;
-    slots: {
-        default: {
-            builder: any;
-        };
-    };
-    events: SelectPrimitive.TriggerEvents;
-};
-export type SelectTriggerProps = typeof __propDef.props;
-export type SelectTriggerEvents = typeof __propDef.events;
-export type SelectTriggerSlots = typeof __propDef.slots;
-export default class SelectTrigger extends SvelteComponent<SelectTriggerProps, SelectTriggerEvents, SelectTriggerSlots> {
-}
-export {};