@tanglemedia/svelte-starter-auth-shadcn 0.0.2 → 0.1.0

package/dist/app.css

@@ -0,0 +1,174 @@
+@import "tailwindcss";
+
+@import "tw-animate-css";
+
+@source "../node_modules/@tanglemedia/svelte-starter-form-shadcn/dist/**/*.{html,js,svelte,ts}";
+@source "src/**/*.{html,js,svelte,ts}";
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+ 
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+ --radius: 0.625rem;
+ --background: oklch(1 0 0);
+ --foreground: oklch(0.129 0.042 264.695);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.129 0.042 264.695);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.129 0.042 264.695);
+ --primary: oklch(0.208 0.042 265.755);
+ --primary-foreground: oklch(0.984 0.003 247.858);
+ --secondary: oklch(0.968 0.007 247.896);
+ --secondary-foreground: oklch(0.208 0.042 265.755);
+ --muted: oklch(0.968 0.007 247.896);
+ --muted-foreground: oklch(0.554 0.046 257.417);
+ --accent: oklch(0.968 0.007 247.896);
+ --accent-foreground: oklch(0.208 0.042 265.755);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.929 0.013 255.508);
+ --input: oklch(0.929 0.013 255.508);
+ --ring: oklch(0.704 0.04 256.788);
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ --sidebar: oklch(0.984 0.003 247.858);
+ --sidebar-foreground: oklch(0.129 0.042 264.695);
+ --sidebar-primary: oklch(0.208 0.042 265.755);
+ --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+ --sidebar-accent: oklch(0.968 0.007 247.896);
+ --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+ --sidebar-border: oklch(0.929 0.013 255.508);
+ --sidebar-ring: oklch(0.704 0.04 256.788);
+}
+ 
+.dark {
+ --background: oklch(0.129 0.042 264.695);
+ --foreground: oklch(0.984 0.003 247.858);
+ --card: oklch(0.208 0.042 265.755);
+ --card-foreground: oklch(0.984 0.003 247.858);
+ --popover: oklch(0.208 0.042 265.755);
+ --popover-foreground: oklch(0.984 0.003 247.858);
+ --primary: oklch(0.929 0.013 255.508);
+ --primary-foreground: oklch(0.208 0.042 265.755);
+ --secondary: oklch(0.279 0.041 260.031);
+ --secondary-foreground: oklch(0.984 0.003 247.858);
+ --muted: oklch(0.279 0.041 260.031);
+ --muted-foreground: oklch(0.704 0.04 256.788);
+ --accent: oklch(0.279 0.041 260.031);
+ --accent-foreground: oklch(0.984 0.003 247.858);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.551 0.027 264.364);
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ --sidebar: oklch(0.208 0.042 265.755);
+ --sidebar-foreground: oklch(0.984 0.003 247.858);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+ --sidebar-accent: oklch(0.279 0.041 260.031);
+ --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+ 
+  to {
+    height: var(--bits-accordion-content-height);
+  }
+}
+ 
+@keyframes accordion-up {
+  from {
+    height: var(--bits-accordion-content-height);
+  }
+ 
+  to {
+    height: 0;
+  }
+}
+ 
+@keyframes caret-blink {
+  0%,
+  70%,
+  100% {
+    opacity: 1;
+  }
+ 
+  20%,
+  50% {
+    opacity: 0;
+  }
+}

package/dist/app.html

@@ -1,4 +1,3 @@
-// src/app.html
 <!doctype html>
 <html lang="en">
   <head>

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/index.ts';

package/dist/index.js

@@ -0,0 +1 @@
+export * from "./lib/index.js";

package/dist/lib/components/types.d.ts

@@ -0,0 +1,13 @@
+import type { FsSuperForm } from 'formsnap';
+import type { WithChild } from 'svelte-toolbelt';
+import type { SuperForm } from 'sveltekit-superforms';
+export type FsSuperFormPrimitive<T extends Record<string, unknown>> = FsSuperForm<T>;
+export type LoginProviderProps<T extends Record<string, unknown>> = WithChild<{
+    superforms: SuperForm<T>;
+    action?: string;
+    method?: 'dialog' | 'get' | 'post' | 'DIALOG' | 'GET' | 'POST' | null | undefined;
+}, {
+    props: {
+        superforms: SuperForm<T>;
+    };
+}>;

package/dist/lib/components/types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/components/ui/auth-layout/auth-layout-content-top.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cn } from "@tanglemedia/svelte-starter-ui-shadcn";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    children?: Snippet<[]>;
+    class?: string;
+  };
+
+  const { children, class: cls }: Props = $props();
+</script>
+
+<div class={cn("flex justify-center gap-2 md:justify-start", cls)}>
+  {@render children?.()}
+</div>

package/dist/lib/components/ui/auth-layout/auth-layout-content-top.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type Props = {
+    children?: Snippet<[]>;
+    class?: string;
+};
+declare const AuthLayoutContentTop: import("svelte").Component<Props, {}, "">;
+type AuthLayoutContentTop = ReturnType<typeof AuthLayoutContentTop>;
+export default AuthLayoutContentTop;

package/dist/lib/components/ui/auth-layout/auth-layout-content.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cn } from "@tanglemedia/svelte-starter-ui-shadcn";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    children?: Snippet<[]>;
+    class?: string;
+  };
+
+  const { children, class: cls }: Props = $props();
+</script>
+
+<div class={cn("flex flex-col gap-4 p-6 md:p-10", cls)}>
+  {@render children?.()}
+</div>

package/dist/lib/components/ui/auth-layout/auth-layout-content.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type Props = {
+    children?: Snippet<[]>;
+    class?: string;
+};
+declare const AuthLayoutContent: import("svelte").Component<Props, {}, "">;
+type AuthLayoutContent = ReturnType<typeof AuthLayoutContent>;
+export default AuthLayoutContent;

package/dist/lib/components/ui/auth-layout/auth-layout-feature-info.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    logo?: string | null;
+    logoClass?: string | null;
+    name?: string | null;
+    quote?: string | null;
+    quoteAuthor?: string | null;
+    children?: Snippet;
+  }
+
+  let {
+    logo = null,
+    name = "Tangle Media Inc.",
+    quote = "",
+    quoteAuthor = "",
+    logoClass,
+    children,
+  }: Props = $props();
+</script>
+
+<div
+  class="text-white top-6 left-6 right-6 bottom-6 absolute text-lg font-medium text-shadow-lg"
+>
+  {@render renderLogoName()}
+  {@render children?.()}
+  <blockquote class="space-y-2 mt-2 lg:mt-0 mr-4 lg:mr-0 hidden lg:block lg:absolute bottom-6">
+    <p class="text-sm text-shadow-lg">
+      {quote}
+    </p>
+    <footer class="text-xs text-shadow-lg">{quoteAuthor}</footer>
+  </blockquote>
+</div>
+
+{#snippet renderLogoName()}
+  <div class="flex items-center gap-4">
+    {#if logo}
+      <img src={logo} alt="logo" class={logoClass} />
+    {/if}
+    {#if name}
+      {name}
+    {/if}
+  </div>
+{/snippet}

package/dist/lib/components/ui/auth-layout/auth-layout-feature-info.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+interface Props {
+    logo?: string | null;
+    logoClass?: string | null;
+    name?: string | null;
+    quote?: string | null;
+    quoteAuthor?: string | null;
+    children?: Snippet;
+}
+declare const AuthLayoutFeatureInfo: import("svelte").Component<Props, {}, "">;
+type AuthLayoutFeatureInfo = ReturnType<typeof AuthLayoutFeatureInfo>;
+export default AuthLayoutFeatureInfo;

package/dist/lib/components/ui/auth-layout/auth-layout-feature.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+		image?: string | null;
+		children?: Snippet;
+	}
+
+	let {
+		image = "https://images.unsplash.com/photo-1590069261209-f8e9b8642343?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1376&q=80",
+		children,
+	}: Props = $props();
+</script>
+
+<div
+  class="absolute top-0 left-0 right-0 bottom-0 z-[-1]"
+  style="
+  background-image:
+    url({image});
+  background-size: cover;
+  background-position: center"
+>
+  {@render children?.()}
+</div>

package/dist/lib/components/ui/auth-layout/auth-layout-feature.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface Props {
+    image?: string | null;
+    children?: Snippet;
+}
+declare const AuthLayoutFeature: import("svelte").Component<Props, {}, "">;
+type AuthLayoutFeature = ReturnType<typeof AuthLayoutFeature>;
+export default AuthLayoutFeature;

package/dist/lib/components/ui/auth-layout/auth-layout-logo.svelte

@@ -0,0 +1,99 @@
+<script lang="ts" module>
+  import { type VariantProps, tv } from 'tailwind-variants';
+
+  const authLogoSizeVariants = tv({
+    base: 'flex shrink-0 overflow-hidden rounded-lg',
+    variants: {
+      size: {
+        default: 'size-8',
+        lg: 'size-16',
+        xl: 'size-24',
+        '2xl': 'size-32',
+        '3xl': 'size-40',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  });
+
+  const authLogoTextSizeVariants = tv({
+    base: '',
+    variants: {
+      size: {
+        default: '',
+        lg: 'text-2xl',
+        xl: 'text-5xl',
+        '2xl': 'text-6xl',
+        '3xl': 'text-9xl',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  });
+
+  const authLogoAlignVariants = tv({
+    base: 'flex items-center gap-2 font-medium',
+    variants: {
+      align: {
+        default: 'self-auto',
+        left: 'self-start',
+        right: 'self-end',
+        center: 'self-center',
+      },
+    },
+    defaultVariants: {
+      align: 'default',
+    },
+  });
+
+  export type AuthLogoSize = VariantProps<typeof authLogoSizeVariants>['size'];
+  export type AuthLogoAlign = VariantProps<
+    typeof authLogoAlignVariants
+  >['align'];
+</script>
+
+<script lang="ts">
+  import { cn } from '@tanglemedia/svelte-starter-ui-shadcn';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    children?: Snippet<[]>;
+    class?: string;
+    src?: string | null;
+    logoClass?: string | null;
+    href?: string;
+    size?: AuthLogoSize;
+    align?: AuthLogoAlign;
+  };
+
+  const {
+    children,
+    class: cls,
+    src,
+    logoClass,
+    href,
+    size,
+    align,
+  }: Props = $props();
+
+  // cn(authLogoVariants({ size }));
+</script>
+
+<svelte:element
+  this={href ? 'a' : 'span'}
+  class={cn(authLogoAlignVariants({ align }), cls)}
+  {href}
+>
+  <div class={cn(authLogoSizeVariants({ size }))}>
+    {#if src}
+      <img {src} alt="logo" class={cn('aspect-square size-full', logoClass)} />
+    {/if}
+  </div>
+  {#if children}
+    <div class={cn(authLogoTextSizeVariants({ size }))}>
+      {@render children?.()}
+    </div>
+  {/if}
+</svelte:element>

package/dist/lib/components/ui/auth-layout/auth-layout-logo.svelte.d.ts

@@ -0,0 +1,63 @@
+import { type VariantProps } from 'tailwind-variants';
+declare const authLogoSizeVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+}, undefined, "flex shrink-0 overflow-hidden rounded-lg", {
+    size: {
+        default: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+}, undefined, "flex shrink-0 overflow-hidden rounded-lg", unknown, unknown, undefined>>;
+declare const authLogoAlignVariants: import("tailwind-variants").TVReturnType<{
+    align: {
+        default: string;
+        left: string;
+        right: string;
+        center: string;
+    };
+}, undefined, "flex items-center gap-2 font-medium", {
+    align: {
+        default: string;
+        left: string;
+        right: string;
+        center: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    align: {
+        default: string;
+        left: string;
+        right: string;
+        center: string;
+    };
+}, undefined, "flex items-center gap-2 font-medium", unknown, unknown, undefined>>;
+export type AuthLogoSize = VariantProps<typeof authLogoSizeVariants>['size'];
+export type AuthLogoAlign = VariantProps<typeof authLogoAlignVariants>['align'];
+import type { Snippet } from 'svelte';
+type Props = {
+    children?: Snippet<[]>;
+    class?: string;
+    src?: string | null;
+    logoClass?: string | null;
+    href?: string;
+    size?: AuthLogoSize;
+    align?: AuthLogoAlign;
+};
+declare const AuthLayoutLogo: import("svelte").Component<Props, {}, "">;
+type AuthLayoutLogo = ReturnType<typeof AuthLayoutLogo>;
+export default AuthLayoutLogo;

package/dist/lib/components/ui/auth-layout/auth-layout-main.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { cn } from '@tanglemedia/svelte-starter-ui-shadcn';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    children?: Snippet<[]>;
+    class?: string;
+  };
+
+  const { children, class: cls }: Props = $props();
+</script>
+
+<div class={cn('flex flex-1 items-center justify-center', cls)}>
+  <div class="w-full max-w-sm lg:max-w-md flex flex-col gap-6">
+    {@render children?.()}
+  </div>
+</div>

package/dist/lib/components/ui/auth-layout/auth-layout-main.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children?: Snippet<[]>;
+    class?: string;
+};
+declare const AuthLayoutMain: import("svelte").Component<Props, {}, "">;
+type AuthLayoutMain = ReturnType<typeof AuthLayoutMain>;
+export default AuthLayoutMain;

package/dist/lib/components/ui/auth-layout/auth-layout.svelte

@@ -1,91 +1,31 @@
 <script lang="ts">
-	import { Button } from '@tanglemedia/svelte-starter-ui-shadcn/Button';
-	// import { getConfig } from '@tanglemedia/svelte-starter-core';
+	import type { Snippet } from "svelte";
 
 	interface Props {
-		logo?: string;
-		name?: string;
-		quote?: string;
-		quoteAuthor?: string;
-		layoutMode?: string;
-		leftSideBackground?: string;
-		rightSideBackground?: string;
-		opacity?: number;
-		logoClass?: string;
-		filterClass?: string;
-		imageClass?: string;
+		side?: "left" | "right";
+		feature?: Snippet;
+		children: Snippet;
 	}
 
-  let { 
-		logo, 
-		name, 
-		quote, 
-		quoteAuthor, 
-		layoutMode, 
-		leftSideBackground, 
-		rightSideBackground, 
-		opacity, 
-		logoClass, 
-		filterClass, 
-		imageClass, 
-		children 
-	}: Props = $props();
+	let { side = "left", feature, children }: Props = $props();
 </script>
 
-<div
-	class="container relative h-[100vh] flex-col items-center justify-center grid lg:max-w-none lg:grid-cols-2 lg:px-0"
->
-	<div class="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-r">
-		<div
-			class="absolute inset-0 bg-background"
-			style="
-				background-image:
-					url(https://images.unsplash.com/photo-1590069261209-f8e9b8642343?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1376&q=80);"
-		></div>
-		<div class="relative z-20 flex items-center text-lg font-medium text-shadow-lg">
-			Acme Inc
-		</div>
-		<div class="relative z-20 mt-auto">
-			<blockquote class="space-y-2">
-				<p class="text-lg text-shadow-lg">
-					&ldquo;This library has saved me countless hours of work and helped me deliver
-					stunning designs to my clients faster than ever before. Highly
-					recommended!&rdquo;
-				</p>
-				<footer class="text-sm text-shadow-lg">Sofia Davis</footer>
-			</blockquote>
-		</div>
-    <div class="absolute top-0 bottom-0 left-0 right-0 bg-primary-500/10 filter blur(2px)"></div>
-	</div>
-  <div class="lg:hidden absolute top-0 left-0 right-0 bottom-1/2 z-[-1]" style="
-	mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
-  background-image:
-    url(https://images.unsplash.com/photo-1590069261209-f8e9b8642343?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx);
-  background-size: cover;
-  background-position: center">
-    <div class="text-white top-6 left-6 absolute text-lg font-medium z-20 text-shadow-lg">
-      Acme Inc
-      <blockquote class="space-y-2 mt-2 mr-4">
-				<p class="text-sm text-shadow-lg">
-					&ldquo;This library has saved me countless hours of work and helped me deliver
-					stunning designs to my clients faster than ever before. Highly
-					recommended!&rdquo;
-				</p>
-				<footer class="text-xs text-shadow-lg">Sofia Davis</footer>
-			</blockquote>
-    </div>
-    <div class="absolute top-0 bottom-0 left-0 right-0 bg-primary-500/10 filter blur(2px)"></div>
-    <div class="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-b from-gray-900/10 to-background transition duration-500 ease-in-out"></div>
-  </div>
-	<div class="lg:p-8">
-		<div class="mx-auto flex w-full flex-col justify-center space-y-6">
-			{@render children()}
-		</div>
-	</div>
+<div class="relative min-h-svh grid grid-cols-1 lg:grid-cols-2">
+	{#if side === "left"}
+		{#if feature}
+			{@render renderFeature()}
+		{/if}
+	{/if}
+	{@render children()}
+	{#if side === "right"}
+		{#if feature}
+			{@render renderFeature()}
+		{/if}
+	{/if}
 </div>
 
-<style>
-	.text-shadow-lg {
-		text-shadow: 0 2px 2px rgb(0 0 0 / 0.4);
-	}
-</style>
+{#snippet renderFeature()}
+	<div class="w-full absolute h-[50vh] lg:h-screen lg:relative lg:block">
+		{@render feature?.()}
+	</div>
+{/snippet}

package/dist/lib/components/ui/auth-layout/auth-layout.svelte.d.ts

@@ -1,15 +1,8 @@
+import type { Snippet } from "svelte";
 interface Props {
-    logo?: string;
-    name?: string;
-    quote?: string;
-    quoteAuthor?: string;
-    layoutMode?: string;
-    leftSideBackground?: string;
-    rightSideBackground?: string;
-    opacity?: number;
-    logoClass?: string;
-    filterClass?: string;
-    imageClass?: string;
+    side?: "left" | "right";
+    feature?: Snippet;
+    children: Snippet;
 }
 declare const AuthLayout: import("svelte").Component<Props, {}, "">;
 type AuthLayout = ReturnType<typeof AuthLayout>;