@kayord/ui 0.0.1

package/README.md

@@ -0,0 +1,12 @@
+# Kayord UI
+
+The UI components used to build kayord applications.
+
+## Installing
+
+Pnpm command to install ui library.
+
+```bash
+# create a new project in the current directory
+pnpm add -D @kayord/ui
+```

package/dist/components/custom/loader/Loader.svelte

@@ -0,0 +1,12 @@
+<script>import { cn } from "../../../utils";
+import { Loader2 } from "lucide-svelte";
+let className = void 0;
+export let isLoading = true;
+export { className as class };
+</script>
+
+{#if isLoading}
+	<div class="flex justify-center">
+		<Loader2 class={cn("h-8 w-8 animate-spin m-2", className)} {...$$restProps} />
+	</div>
+{/if}

package/dist/components/custom/loader/Loader.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { type IconProps } from "lucide-svelte";
+declare const __propDef: {
+    props: IconProps & {
+        isLoading?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LoaderProps = typeof __propDef.props;
+export type LoaderEvents = typeof __propDef.events;
+export type LoaderSlots = typeof __propDef.slots;
+export default class Loader extends SvelteComponent<LoaderProps, LoaderEvents, LoaderSlots> {
+}
+export {};

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

@@ -0,0 +1 @@
+export { default as Loader } from "./Loader.svelte";

package/dist/components/custom/loader/index.js

@@ -0,0 +1 @@
+export { default as Loader } from "./Loader.svelte";

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

@@ -0,0 +1,53 @@
+<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>
+
+<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}
+		<Moon />
+	{:else}
+		<Sun />
+	{/if}
+</button>

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

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ThemeSwitchProps = typeof __propDef.props;
+export type ThemeSwitchEvents = typeof __propDef.events;
+export type ThemeSwitchSlots = typeof __propDef.slots;
+export default class ThemeSwitch extends SvelteComponent<ThemeSwitchProps, ThemeSwitchEvents, ThemeSwitchSlots> {
+}
+export {};

package/dist/components/custom/theme-switch/index.d.ts

@@ -0,0 +1 @@
+export { default as ThemeSwitch } from "./ThemeSwitch.svelte";

package/dist/components/custom/theme-switch/index.js

@@ -0,0 +1 @@
+export { default as ThemeSwitch } from "./ThemeSwitch.svelte";

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

@@ -0,0 +1,21 @@
+<script>import { Accordion as AccordionPrimitive } from "bits-ui";
+import { cn } from "../../../utils";
+import { slide } from "svelte/transition";
+let className = void 0;
+export let transition = slide;
+export let transitionConfig = {
+  duration: 200
+};
+export { className as class };
+</script>
+
+<AccordionPrimitive.Content
+	class={cn("overflow-hidden text-sm transition-all", className)}
+	{transition}
+	{transitionConfig}
+	{...$$restProps}
+>
+	<div class="pb-4 pt-0">
+		<slot />
+	</div>
+</AccordionPrimitive.Content>

package/dist/components/ui/accordion/accordion-content.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { Accordion as AccordionPrimitive } from "bits-ui";
+declare const __propDef: {
+    props: AccordionPrimitive.ContentProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AccordionContentProps = typeof __propDef.props;
+export type AccordionContentEvents = typeof __propDef.events;
+export type AccordionContentSlots = typeof __propDef.slots;
+export default class AccordionContent extends SvelteComponent<AccordionContentProps, AccordionContentEvents, AccordionContentSlots> {
+}
+export {};

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

@@ -0,0 +1,14 @@
+<script>import { Accordion as AccordionPrimitive } from "bits-ui";
+import { cn } from "../../../utils";
+let className = void 0;
+export let value;
+export { className as class };
+</script>
+
+<AccordionPrimitive.Item
+	{value}
+	class={cn("border-b", className)}
+	{...$$restProps}
+>
+	<slot />
+</AccordionPrimitive.Item>

package/dist/components/ui/accordion/accordion-item.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { Accordion as AccordionPrimitive } from "bits-ui";
+declare const __propDef: {
+    props: AccordionPrimitive.ItemProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AccordionItemProps = typeof __propDef.props;
+export type AccordionItemEvents = typeof __propDef.events;
+export type AccordionItemSlots = typeof __propDef.slots;
+export default class AccordionItem extends SvelteComponent<AccordionItemProps, AccordionItemEvents, AccordionItemSlots> {
+}
+export {};

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

@@ -0,0 +1,21 @@
+<script>import { Accordion as AccordionPrimitive } from "bits-ui";
+import { ChevronDown } from "lucide-svelte";
+import { cn } from "../../../utils";
+let className = void 0;
+export let level = 3;
+export { className as class };
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		class={cn(
+			"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+			className
+		)}
+		{...$$restProps}
+		on:click
+	>
+		<slot />
+		<ChevronDown class="h-4 w-4 transition-transform duration-200" />
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

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

@@ -0,0 +1,15 @@
+import { SvelteComponent } from "svelte";
+import { Accordion as AccordionPrimitive } from "bits-ui";
+declare const __propDef: {
+    props: AccordionPrimitive.TriggerProps;
+    slots: {
+        default: {};
+    };
+    events: AccordionPrimitive.TriggerEvents;
+};
+export type AccordionTriggerProps = typeof __propDef.props;
+export type AccordionTriggerEvents = typeof __propDef.events;
+export type AccordionTriggerSlots = typeof __propDef.slots;
+export default class AccordionTrigger extends SvelteComponent<AccordionTriggerProps, AccordionTriggerEvents, AccordionTriggerSlots> {
+}
+export {};

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

@@ -0,0 +1,6 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
+declare const Root: typeof AccordionPrimitive.Root;
+export { Root, Content, Item, Trigger, Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger };

package/dist/components/ui/accordion/index.js

@@ -0,0 +1,8 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
+const Root = AccordionPrimitive.Root;
+export { Root, Content, Item, Trigger, 
+//
+Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger };

package/dist/components/ui/alert/alert-description.svelte

@@ -0,0 +1,8 @@
+<script>import { cn } from "../../../utils";
+let className = void 0;
+export { className as class };
+</script>
+
+<div class={cn("text-sm [&_p]:leading-relaxed", className)} {...$$restProps}>
+	<slot />
+</div>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+declare const __propDef: {
+    props: HTMLAttributes<HTMLDivElement>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AlertDescriptionProps = typeof __propDef.props;
+export type AlertDescriptionEvents = typeof __propDef.events;
+export type AlertDescriptionSlots = typeof __propDef.slots;
+export default class AlertDescription extends SvelteComponent<AlertDescriptionProps, AlertDescriptionEvents, AlertDescriptionSlots> {
+}
+export {};

package/dist/components/ui/alert/alert-title.svelte

@@ -0,0 +1,13 @@
+<script>import { cn } from "../../../utils";
+let className = void 0;
+export let level = "h5";
+export { className as class };
+</script>
+
+<svelte:element
+	this={level}
+	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { HeadingLevel } from ".";
+declare const __propDef: {
+    props: HTMLAttributes<HTMLHeadingElement> & {
+        level?: HeadingLevel | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AlertTitleProps = typeof __propDef.props;
+export type AlertTitleEvents = typeof __propDef.events;
+export type AlertTitleSlots = typeof __propDef.slots;
+export default class AlertTitle extends SvelteComponent<AlertTitleProps, AlertTitleEvents, AlertTitleSlots> {
+}
+export {};

package/dist/components/ui/alert/alert.svelte

@@ -0,0 +1,14 @@
+<script>import { cn } from "../../../utils";
+import { alertVariants } from ".";
+let className = void 0;
+export let variant = "default";
+export { className as class };
+</script>
+
+<div
+	class={cn(alertVariants({ variant }), className)}
+	{...$$restProps}
+	role="alert"
+>
+	<slot />
+</div>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type Variant } from ".";
+declare const __propDef: {
+    props: HTMLAttributes<HTMLDivElement> & {
+        variant?: Variant;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AlertProps = typeof __propDef.props;
+export type AlertEvents = typeof __propDef.events;
+export type AlertSlots = typeof __propDef.slots;
+export default class Alert extends SvelteComponent<AlertProps, AlertEvents, AlertSlots> {
+}
+export {};

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

@@ -0,0 +1,43 @@
+import { type VariantProps } from "tailwind-variants";
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+export declare const alertVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}, undefined, "relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11", import("tailwind-variants/dist/config").TVConfig<{
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}, {
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}>, {
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}, undefined, "relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11", import("tailwind-variants/dist/config").TVConfig<{
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}, {
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type Variant = VariantProps<typeof alertVariants>["variant"];
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export { Root, Description, Title, Root as Alert, Description as AlertDescription, Title as AlertTitle };

package/dist/components/ui/alert/index.js

@@ -0,0 +1,19 @@
+import { tv } from "tailwind-variants";
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+export const alertVariants = tv({
+    base: "relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11",
+    variants: {
+        variant: {
+            default: "bg-background text-foreground",
+            destructive: "text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive"
+        }
+    },
+    defaultVariants: {
+        variant: "default"
+    }
+});
+export { Root, Description, Title, 
+//
+Root as Alert, Description as AlertDescription, Title as AlertTitle };

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

@@ -0,0 +1,16 @@
+<script>import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import { buttonVariants } from "../button";
+import { cn } from "../../../utils";
+let className = void 0;
+export { className as class };
+</script>
+
+<AlertDialogPrimitive.Action
+	class={cn(buttonVariants(), className)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	let:builder
+>
+	<slot {builder} />
+</AlertDialogPrimitive.Action>

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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,20 @@
+<script>import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import { buttonVariants } from "../button";
+import { cn } from "../../../utils";
+let className = void 0;
+export { className as class };
+</script>
+
+<AlertDialogPrimitive.Cancel
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"mt-2 sm:mt-0",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	let:builder
+>
+	<slot {builder} />
+</AlertDialogPrimitive.Cancel>

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

@@ -0,0 +1,17 @@
+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/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,23 @@
+<script>import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import * as AlertDialog from ".";
+import { cn, flyAndScale } from "../../../utils";
+export let transition = flyAndScale;
+export let transitionConfig = void 0;
+let className = void 0;
+export { className as class };
+</script>
+
+<AlertDialog.Portal>
+	<AlertDialog.Overlay />
+	<AlertDialogPrimitive.Content
+		{transition}
+		{transitionConfig}
+		class={cn(
+			"fixed left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-50 grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full",
+			className
+		)}
+		{...$$restProps}
+	>
+		<slot />
+	</AlertDialogPrimitive.Content>
+</AlertDialog.Portal>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+declare const __propDef: {
+    props: AlertDialogPrimitive.ContentProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AlertDialogContentProps = typeof __propDef.props;
+export type AlertDialogContentEvents = typeof __propDef.events;
+export type AlertDialogContentSlots = typeof __propDef.slots;
+export default class AlertDialogContent extends SvelteComponent<AlertDialogContentProps, AlertDialogContentEvents, AlertDialogContentSlots> {
+}
+export {};

package/dist/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -0,0 +1,12 @@
+<script>import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import { cn } from "../../../utils";
+let className = void 0;
+export { className as class };
+</script>
+
+<AlertDialogPrimitive.Description
+	class={cn("text-sm text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</AlertDialogPrimitive.Description>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+declare const __propDef: {
+    props: AlertDialogPrimitive.DescriptionProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AlertDialogDescriptionProps = typeof __propDef.props;
+export type AlertDialogDescriptionEvents = typeof __propDef.events;
+export type AlertDialogDescriptionSlots = typeof __propDef.slots;
+export default class AlertDialogDescription extends SvelteComponent<AlertDialogDescriptionProps, AlertDialogDescriptionEvents, AlertDialogDescriptionSlots> {
+}
+export {};

package/dist/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -0,0 +1,14 @@
+<script>import { cn } from "../../../utils";
+let className = void 0;
+export { className as class };
+</script>
+
+<div
+	class={cn(
+		"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</div>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+declare const __propDef: {
+    props: HTMLAttributes<HTMLDivElement>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AlertDialogFooterProps = typeof __propDef.props;
+export type AlertDialogFooterEvents = typeof __propDef.events;
+export type AlertDialogFooterSlots = typeof __propDef.slots;
+export default class AlertDialogFooter extends SvelteComponent<AlertDialogFooterProps, AlertDialogFooterEvents, AlertDialogFooterSlots> {
+}
+export {};

package/dist/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -0,0 +1,11 @@
+<script>import { cn } from "../../../utils";
+let className = void 0;
+export { className as class };
+</script>
+
+<div
+	class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+declare const __propDef: {
+    props: HTMLAttributes<HTMLDivElement>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AlertDialogHeaderProps = typeof __propDef.props;
+export type AlertDialogHeaderEvents = typeof __propDef.events;
+export type AlertDialogHeaderSlots = typeof __propDef.slots;
+export default class AlertDialogHeader extends SvelteComponent<AlertDialogHeaderProps, AlertDialogHeaderEvents, AlertDialogHeaderSlots> {
+}
+export {};