svelte-firekit 0.0.1

package/dist/components/auth/sign-in-form.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { signInWithEmail } from "../../auth.js";
+	import { signInSchema } from "../../schemas/sign-in.js";
+	import {
+		superForm, defaults
+	} from "sveltekit-superforms";
+	import { Input } from "../ui/input/index.js";
+	import Button from "../ui/button/button.svelte";
+	import { valibot } from 'sveltekit-superforms/adapters';
+
+const data = defaults(valibot(signInSchema));
+
+	import * as Form from "../ui/form/index.js";
+	import { toast } from "svelte-sonner";
+
+	const form = superForm(data, {
+			validators: valibot(signInSchema),
+		dataType: "json",
+		SPA: true,
+		resetForm: false,
+		clearOnSubmit: "errors-and-message",
+		async onUpdate({ form }) {
+			if (!form.valid) return;
+			try {
+				const { data } = form;
+				const { email, password } = data;
+				await signInWithEmail(email, password);
+				toast.success("Signed in successfully");
+			} catch (error) {
+				if (error instanceof Error) {
+					toast.error(error.message);
+				} else {
+					toast.error("An error occurred");
+				}
+			}
+		},
+	});
+
+	const { form: formData, enhance } = form;
+</script>
+
+<form method="POST" use:enhance class="space-y-2">
+	<Form.Field {form} name="email">
+		<Form.Control >
+			  {#snippet children({ props })}
+        <Form.Label>Email</Form.Label>
+        <Input {...props} bind:value={$formData.email}  placeholder="you@email.com"/>
+      {/snippet}
+			
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
+	<Form.Field {form} name="password">
+		<Form.Control >
+			{#snippet children({ props })}
+
+				<div class="flex w-full items-center justify-between">
+					<Form.Label>Password</Form.Label>
+					<Button variant="link" class="text-sm" href="/reset-password "
+						>
+						I forgot my password
+						</Button
+					>
+				</div>
+				<Input
+					{...props} 
+					bind:value={$formData.password}
+					placeholder="*********"
+					type="password"
+				/>
+      		{/snippet}
+
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
+	<Form.Button class="w-full">Sign In</Form.Button>
+</form>

package/dist/components/auth/sign-in-form.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SignInForm: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SignInForm = InstanceType<typeof SignInForm>;
+export default SignInForm;

package/dist/components/auth/sign-up-form.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { registerWithEmail } from "../../auth.js";
+	import * as Form from "../ui/form/index.js";
+	import { Input } from "../ui/input/index.js";
+	import { signUpSchema } from "../../schemas/sign-up.js";
+	import { toast } from "svelte-sonner";
+	import {
+		superForm,defaults
+	} from "sveltekit-superforms";
+	import { valibot } from 'sveltekit-superforms/adapters';
+    import Button from "../ui/button/button.svelte";
+    import Checkbox from "../ui/checkbox/checkbox.svelte";
+const data = defaults(valibot(signUpSchema));
+
+	const form = superForm(data, {
+			validators: valibot(signUpSchema),
+		dataType: "json",
+		SPA: true,
+		resetForm: false,
+		clearOnSubmit: "errors-and-message",
+		async onUpdate({ form }) {
+			if (!form.valid) return;
+			try {
+				const { data } = form;
+				const { email, password, firstName, lastName } = data;
+				const displayName = `${firstName} ${lastName}`;
+				await registerWithEmail(email, password, displayName);
+				toast.success("Account created successfully");
+			} catch (error) {
+				if (error instanceof Error) {
+					toast.error(error.message);
+				} else {
+					toast.error("An error occurred");
+				}
+			}
+		},
+	});
+
+	const { form: formData, enhance } = form;
+</script>
+
+<form method="POST" use:enhance class="space-y-2">
+	<div class="grid grid-cols-2 gap-4">
+		<Form.Field {form} name="firstName">
+			<Form.Control >
+				{#snippet children({ props })}
+					<Form.Label>First Name</Form.Label>
+					<Input
+						{...props}
+						bind:value={$formData.firstName}
+						placeholder="John"
+					/>
+      			{/snippet}
+
+			</Form.Control>
+			<Form.FieldErrors />
+		</Form.Field>
+		<Form.Field {form} name="lastName">
+			<Form.Control >
+				  {#snippet children({ props })}
+
+				<Form.Label>First Name</Form.Label>
+				<Input
+					{...props}
+					bind:value={$formData.lastName}
+					placeholder="Smith"
+				/>
+				{/snippet}
+			</Form.Control>
+			<Form.FieldErrors />
+		</Form.Field>
+	</div>
+	<Form.Field {form} name="email">
+		<Form.Control >
+				  {#snippet children({ props })}
+        <Form.Label>Email</Form.Label>
+        <Input {...props} bind:value={$formData.email}  placeholder="you@email.com"/>
+      {/snippet}
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
+	<Form.Field {form} name="password">
+		<Form.Control >
+				  {#snippet children({ props })}
+
+			<Form.Label>Password</Form.Label>
+			<Input
+				{...props}
+				bind:value={$formData.password}
+				placeholder="*********"
+				type="password"
+			/>
+			{/snippet}
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
+	<Form.Field {form} name="agreeToTerms">
+		<Form.Control >
+				  {#snippet children({ props })}
+        <Checkbox {...props} bind:checked={$formData.agreeToTerms} />
+
+		          <Form.Label>
+I accept the 
+<Button variant="link" href="/terms-and-conditions" class="p-0">Terms and Conditions</Button> 
+</Form.Label>
+
+			{/snippet}
+		</Form.Control>
+		<Form.FieldErrors />
+	</Form.Field>
+	<Form.Button class="w-full">Sign Up</Form.Button>
+</form>

package/dist/components/auth/sign-up-form.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SignUpForm: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SignUpForm = InstanceType<typeof SignUpForm>;
+export default SignUpForm;

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

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "../button/index.js";
+	import { cn } from "../../../utils.js";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: AlertDialogPrimitive.ActionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Action bind:ref class={cn(buttonVariants(), className)} {...restProps} />

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

@@ -0,0 +1,3 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+declare const AlertDialogAction: import("svelte").Component<AlertDialogPrimitive.TriggerProps, {}, "ref">;
+export default AlertDialogAction;

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { buttonVariants } from "../button/index.js";
+	import { cn } from "../../../utils.js";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: AlertDialogPrimitive.CancelProps = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+	bind:ref
+	class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,3 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+declare const AlertDialogCancel: import("svelte").Component<AlertDialogPrimitive.TriggerProps, {}, "ref">;
+export default AlertDialogCancel;

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from "bits-ui";
+	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> = $props();
+</script>
+
+<AlertDialogPrimitive.Portal>
+	<AlertDialogOverlay />
+	<AlertDialogPrimitive.Content
+		bind:ref
+		class={cn(
+			"bg-background 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+			className
+		)}
+		{...restProps}
+	/>
+</AlertDialogPrimitive.Portal>

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

@@ -0,0 +1,2 @@
+declare const AlertDialogContent: import("svelte").Component<Omit<import("bits-ui").DialogContentProps, "child">, {}, "ref">;
+export default AlertDialogContent;

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,3 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+declare const AlertDialogDescription: import("svelte").Component<AlertDialogPrimitive.DescriptionProps, {}, "ref">;
+export default AlertDialogDescription;

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,4 @@
+import type { WithElementRef } from "bits-ui";
+import type { HTMLAttributes } from "svelte/elements";
+declare const AlertDialogFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+export default AlertDialogFooter;

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,4 @@
+import type { WithElementRef } from "bits-ui";
+import type { HTMLAttributes } from "svelte/elements";
+declare const AlertDialogHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+export default AlertDialogHeader;

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+	bind:ref
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+		className
+	)}
+	{...restProps}
+/>

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

@@ -0,0 +1,3 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+declare const AlertDialogOverlay: import("svelte").Component<AlertDialogPrimitive.OverlayProps, {}, "ref">;
+export default AlertDialogOverlay;

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		class: className,
+		level = 3,
+		ref = $bindable(null),
+		...restProps
+	}: AlertDialogPrimitive.TitleProps = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+	bind:ref
+	class={cn("text-lg font-semibold", className)}
+	{level}
+	{...restProps}
+/>

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

@@ -0,0 +1,3 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+declare const AlertDialogTitle: import("svelte").Component<AlertDialogPrimitive.TitleProps, {}, "ref">;
+export default AlertDialogTitle;

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

@@ -0,0 +1,15 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import Title from "./alert-dialog-title.svelte";
+import Action from "./alert-dialog-action.svelte";
+import Cancel from "./alert-dialog-cancel.svelte";
+import Footer from "./alert-dialog-footer.svelte";
+import Header from "./alert-dialog-header.svelte";
+import Overlay from "./alert-dialog-overlay.svelte";
+import Content from "./alert-dialog-content.svelte";
+import Description from "./alert-dialog-description.svelte";
+const Root = AlertDialogPrimitive.Root;
+const Trigger = AlertDialogPrimitive.Trigger;
+const Portal = AlertDialogPrimitive.Portal;
+export { Root, Title, Action, Cancel, Portal, Footer, Header, Trigger, Overlay, Content, Description, 
+//
+Root as AlertDialog, Title as AlertDialogTitle, Action as AlertDialogAction, Cancel as AlertDialogCancel, Portal as AlertDialogPortal, Footer as AlertDialogFooter, Header as AlertDialogHeader, Trigger as AlertDialogTrigger, Overlay as AlertDialogOverlay, Content as AlertDialogContent, Description as AlertDialogDescription, };

package/dist/components/ui/avatar/avatar-fallback.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+	bind:ref
+	class={cn("bg-muted flex h-full w-full items-center justify-center rounded-full", className)}
+	{...restProps}
+/>

package/dist/components/ui/avatar/avatar-fallback.svelte.d.ts

@@ -0,0 +1,3 @@
+import { Avatar as AvatarPrimitive } from "bits-ui";
+declare const AvatarFallback: import("svelte").Component<AvatarPrimitive.FallbackProps, {}, "ref">;
+export default AvatarFallback;

package/dist/components/ui/avatar/avatar-image.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		class: className,
+		src,
+		alt,
+		ref = $bindable(null),
+		...restProps
+	}: AvatarPrimitive.ImageProps = $props();
+</script>
+
+<AvatarPrimitive.Image
+	bind:ref
+	{src}
+	{alt}
+	class={cn("aspect-square h-full w-full", className)}
+	{...restProps}
+/>

package/dist/components/ui/avatar/avatar-image.svelte.d.ts

@@ -0,0 +1,3 @@
+import { Avatar as AvatarPrimitive } from "bits-ui";
+declare const AvatarImage: import("svelte").Component<AvatarPrimitive.ImageProps, {}, "ref">;
+export default AvatarImage;

package/dist/components/ui/avatar/avatar.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		loadingStatus = $bindable("loading"),
+		...restProps
+	}: AvatarPrimitive.RootProps = $props();
+</script>
+
+<AvatarPrimitive.Root
+	bind:loadingStatus
+	bind:ref
+	class={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,3 @@
+import { Avatar as AvatarPrimitive } from "bits-ui";
+declare const Avatar: import("svelte").Component<AvatarPrimitive.RootProps, {}, "ref" | "loadingStatus">;
+export default Avatar;

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

@@ -0,0 +1,4 @@
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
+export { Root, Image, Fallback, Root as Avatar, Image as AvatarImage, Fallback as AvatarFallback, };

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

@@ -0,0 +1,6 @@
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
+export { Root, Image, Fallback, 
+//
+Root as Avatar, Image as AvatarImage, Fallback as AvatarFallback, };

package/dist/components/ui/button/button.svelte

@@ -0,0 +1,75 @@
+<script lang="ts" module>
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const buttonVariants = tv({
+		base: "focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow",
+				destructive:
+					"bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm",
+				outline:
+					"border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm",
+				ghost: "hover:bg-accent hover:text-accent-foreground",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2",
+				sm: "h-8 rounded-md px-3 text-xs",
+				lg: "h-10 rounded-md px-8",
+				icon: "h-9 w-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		class={cn(buttonVariants({ variant, size, className }))}
+		{href}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		class={cn(buttonVariants({ variant, size, className }))}
+		{type}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}