@tanglemedia/svelte-starter-auth-shadcn 0.0.3 → 1.0.0-next.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

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

package/dist/index.js

@@ -1 +1 @@
-export * from './lib';
+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,122 @@
+<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',
+        dynamic: '',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  });
+
+  const authLogoTextSizeVariants = tv({
+    base: '',
+    variants: {
+      size: {
+        default: '',
+        lg: 'text-2xl',
+        xl: 'text-5xl',
+        '2xl': 'text-6xl',
+        '3xl': 'text-9xl',
+        dynamic: '',
+      },
+    },
+    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';
+  import type { HTMLImgAttributes } from 'svelte/elements';
+
+  type Props = {
+    children?: Snippet<[]>;
+    class?: string;
+    src?: string | null;
+    logoClass?: string | null;
+    href?: string;
+    size?: AuthLogoSize;
+    align?: AuthLogoAlign;
+    logo?: Snippet<[{ props: HTMLImgAttributes }]>;
+    square?: boolean;
+  };
+
+  const {
+    children,
+    class: cls,
+    src,
+    logoClass,
+    href,
+    size,
+    align,
+    logo,
+    square,
+  }: Props = $props();
+
+  // cn(authLogoVariants({ size }));
+
+  const imgCls = $derived.by(() => {
+    let base = '';
+
+    if (typeof square === 'undefined') {
+      base = size === 'dynamic' ? '' : 'aspect-square';
+    } else {
+      base = square ? 'aspect-square' : '';
+    }
+
+    return cn('size-full', base, logoClass);
+  });
+</script>
+
+<svelte:element
+  this={href ? 'a' : 'span'}
+  class={cn(authLogoAlignVariants({ align }), cls)}
+  {href}
+>
+  <div class={cn('w-full',authLogoSizeVariants({ size }))}>
+    {#if src}
+      {#if logo}
+        {@render logo({ props: { class: logoClass, src: `${src}` } })}
+      {:else}
+        <img {src} alt="logo" class={imgCls} />
+      {/if}
+    {/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,71 @@
+import { type VariantProps } from 'tailwind-variants';
+declare const authLogoSizeVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        dynamic: string;
+    };
+}, undefined, "flex shrink-0 overflow-hidden rounded-lg", {
+    size: {
+        default: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        dynamic: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        default: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        dynamic: 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';
+import type { HTMLImgAttributes } from 'svelte/elements';
+type Props = {
+    children?: Snippet<[]>;
+    class?: string;
+    src?: string | null;
+    logoClass?: string | null;
+    href?: string;
+    size?: AuthLogoSize;
+    align?: AuthLogoAlign;
+    logo?: Snippet<[{
+        props: HTMLImgAttributes;
+    }]>;
+    square?: boolean;
+};
+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;