@profidev/pleiades 1.9.0 → 1.9.1

package/dist/components/form/base-form.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="V extends ZodValidationSchema">
-  import type { Snippet } from 'svelte';
+  import type { Component, Snippet } from 'svelte';
   import { get } from 'svelte/store';
   import {
     defaults,
@@ -14,16 +14,18 @@
   } from 'sveltekit-superforms/adapters';
   import { FormButton } from '../ui/form/index.js';
   import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+  import RotateCCW from '@lucide/svelte/icons/rotate-ccw';
   import type { ButtonVariant } from '../ui/button/index.js';
   import { cn } from '../../utils.js';
   import type { Error, FormEnctype, FormValue } from './types.js';
+  import { toast } from 'svelte-sonner';
 
   interface Props {
     schema: V;
     initialValue?: Partial<FormValue<V>>;
     onsubmit: (
       form: FormValue<V>
-    ) => Error | undefined | void | Promise<Error | undefined | void>;
+    ) => Error<V> | undefined | void | Promise<Error<V> | undefined | void>;
     children?: Snippet<
       [{ props: { formData: SuperForm<FormValue<V>>; disabled: boolean } }]
     >;
@@ -31,16 +33,27 @@
       [
         {
           defaultBtn: Snippet<
-            [{ className?: string; variant?: ButtonVariant; content: string }?]
+            [
+              {
+                className?: string;
+                variant?: ButtonVariant;
+                content: string;
+                icon?: Component;
+              }
+            ]
           >;
           isLoading: boolean;
+          isError: boolean;
         }
       ]
     >;
     isLoading?: boolean;
-    error?: string;
     class?: string;
     enctype?: FormEnctype;
+    noErrorToast?: boolean;
+    submitText?: string;
+    retryText?: string;
+    submitIcon?: Component;
   }
 
   let {
@@ -50,11 +63,16 @@
     children,
     footer = defaultFooter,
     isLoading = $bindable(false),
-    error = $bindable(''),
     class: className,
-    enctype
+    enctype,
+    noErrorToast,
+    submitText = 'Submit',
+    retryText = 'Retry',
+    submitIcon
   }: Props = $props();
 
+  let isError = $state(false);
+
   let form = superForm(
     defaults(
       initialValue,
@@ -66,7 +84,7 @@
       onUpdate: async ({ form, cancel }) => {
         if (!form.valid) return;
 
-        error = '';
+        isError = false;
         isLoading = true;
 
         let ret = await onsubmit(form.data);
@@ -76,7 +94,12 @@
           if (ret.field) {
             setError(form, ret.field as '', ret.error, undefined);
           } else {
-            if (ret.error !== '') error = ret.error;
+            if (ret.error !== '') {
+              isError = true;
+              if (!noErrorToast) {
+                toast.error(ret.error);
+              }
+            }
             cancel();
           }
         }
@@ -105,21 +128,36 @@
 
 <form method="POST" class={cn('grid gap-3', className)} use:enhance {enctype}>
   {@render children?.({ props: { formData: form, disabled: isLoading } })}
-  {#if error}
-    <span class="text-destructive truncate text-sm">{error}</span>
-  {/if}
-  {@render footer({ defaultBtn: formButton, isLoading })}
+  {@render footer({ defaultBtn: formButton, isLoading, isError })}
 </form>
 
-{#snippet defaultFooter({ defaultBtn }: { defaultBtn: Snippet })}
-  {@render defaultBtn()}
+{#snippet defaultFooter({
+  defaultBtn
+}: {
+  defaultBtn: Snippet<
+    [
+      {
+        className?: string;
+        variant?: ButtonVariant;
+        content: string;
+        icon?: Component;
+      }
+    ]
+  >;
+})}
+  {@render defaultBtn({
+    variant: isError ? 'destructive' : undefined,
+    content: isError ? retryText : submitText,
+    icon: submitIcon
+  })}
 {/snippet}
 
-{#snippet formButton(
-  props:
-    | { className?: string; variant?: ButtonVariant; content: string }
-    | undefined
-)}
+{#snippet formButton(props: {
+  className?: string;
+  variant?: ButtonVariant;
+  content: string;
+  icon?: Component;
+})}
   {@const prop = { ...props }}
   <FormButton
     class={cn('cursor-pointer', prop.className)}
@@ -129,6 +167,10 @@
   >
     {#if isLoading}
       <LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
+    {:else if isError}
+      <RotateCCW class="mr-2 h-4 w-4" />
+    {:else if prop.icon}
+      <prop.icon class="mr-2 h-4 w-4" />
     {/if}
     {prop.content}
   </FormButton>

package/dist/components/form/base-form.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import type { Component, Snippet } from 'svelte';
 import { type SuperForm } from 'sveltekit-superforms';
 import { type ZodValidationSchema } from 'sveltekit-superforms/adapters';
 import type { ButtonVariant } from '../ui/button/index.js';
@@ -7,7 +7,7 @@ declare function $$render<V extends ZodValidationSchema>(): {
     props: {
         schema: V;
         initialValue?: Partial<FormValue<V>>;
-        onsubmit: (form: FormValue<V>) => Error | undefined | void | Promise<Error | undefined | void>;
+        onsubmit: (form: FormValue<V>) => Error<V> | undefined | void | Promise<Error<V> | undefined | void>;
         children?: Snippet<[{
             props: {
                 formData: SuperForm<FormValue<V>>;
@@ -19,19 +19,24 @@ declare function $$render<V extends ZodValidationSchema>(): {
                 className?: string;
                 variant?: ButtonVariant;
                 content: string;
-            }?]>;
+                icon?: Component;
+            }]>;
             isLoading: boolean;
+            isError: boolean;
         }]>;
         isLoading?: boolean;
-        error?: string;
         class?: string;
         enctype?: FormEnctype;
+        noErrorToast?: boolean;
+        submitText?: string;
+        retryText?: string;
+        submitIcon?: Component;
     };
     exports: {
         setValue: (value: FormValue<V>) => void;
         getValue: () => FormValue<V>;
     };
-    bindings: "error" | "isLoading";
+    bindings: "isLoading";
     slots: {};
     events: {};
 };
@@ -39,7 +44,7 @@ declare class __sveltets_Render<V extends ZodValidationSchema> {
     props(): ReturnType<typeof $$render<V>>['props'];
     events(): ReturnType<typeof $$render<V>>['events'];
     slots(): ReturnType<typeof $$render<V>>['slots'];
-    bindings(): "error" | "isLoading";
+    bindings(): "isLoading";
     exports(): {
         setValue: (value: import("zod/v4").infer<V>) => void;
         getValue: () => import("zod/v4").infer<V>;

package/dist/components/form/form-dialog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="V extends ZodValidationSchema">
   import * as Dialog from '../ui/dialog/index.js';
-  import type { Snippet } from 'svelte';
+  import type { Component, Snippet } from 'svelte';
   import {
     Button,
     type ButtonSize,
@@ -18,7 +18,9 @@
     title: string;
     description?: string;
     confirm: string;
+    retryText?: string;
     confirmVariant?: ButtonVariant;
+    confirmIcon?: Component;
     open?: boolean;
     class?: string;
     isLoading?: boolean;
@@ -33,7 +35,7 @@
     onopen?: () => boolean | Promise<boolean>;
     onsubmit: (
       form: FormValue<V>
-    ) => Error | undefined | void | Promise<Error | undefined | void>;
+    ) => Error<V> | undefined | void | Promise<Error<V> | undefined | void>;
     children?: Snippet<
       [{ props: { formData: SuperForm<FormValue<V>>; disabled: boolean } }]
     >;
@@ -41,6 +43,7 @@
     schema: V;
     initialValue?: FormValue<V>;
     enctype?: FormEnctype;
+    noErrorToast?: boolean;
   }
 
   let {
@@ -58,11 +61,13 @@
     triggerInner,
     schema,
     initialValue,
-    enctype
+    enctype,
+    retryText = 'Retry',
+    confirmIcon,
+    noErrorToast
   }: Props = $props();
 
   let formComp: BaseForm<V> | undefined = $state();
-  let error = $state('');
   let formSetValue = $derived(formComp?.setValue);
   let formGetValue = $derived(formComp?.getValue);
 
@@ -78,7 +83,6 @@
     isLoading = true;
     if (await onopen()) {
       open = true;
-      error = '';
     }
     isLoading = false;
   };
@@ -120,16 +124,20 @@
     <Form
       bind:this={formComp}
       bind:isLoading
-      bind:error
       {schema}
       {initialValue}
       {enctype}
       onsubmit={submit}
       {children}
+      {noErrorToast}
     >
-      {#snippet footer({ defaultBtn })}
+      {#snippet footer({ defaultBtn, isError })}
         <Dialog.Footer>
-          {@render defaultBtn({ variant: confirmVariant, content: confirm })}
+          {@render defaultBtn({
+            variant: isError ? 'destructive' : confirmVariant,
+            content: isError ? retryText : confirm,
+            icon: confirmIcon
+          })}
         </Dialog.Footer>
       {/snippet}
     </Form>

package/dist/components/form/form-dialog.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import type { Component, Snippet } from 'svelte';
 import { type ButtonSize, type ButtonVariant } from '../ui/button/index.js';
 import { type SuperForm } from 'sveltekit-superforms';
 import type { Error, FormEnctype, FormValue } from './types.js';
@@ -8,7 +8,9 @@ declare function $$render<V extends ZodValidationSchema>(): {
         title: string;
         description?: string;
         confirm: string;
+        retryText?: string;
         confirmVariant?: ButtonVariant;
+        confirmIcon?: Component;
         open?: boolean;
         class?: string;
         isLoading?: boolean;
@@ -21,7 +23,7 @@ declare function $$render<V extends ZodValidationSchema>(): {
             disabled?: boolean;
         };
         onopen?: () => boolean | Promise<boolean>;
-        onsubmit: (form: FormValue<V>) => Error | undefined | void | Promise<Error | undefined | void>;
+        onsubmit: (form: FormValue<V>) => Error<V> | undefined | void | Promise<Error<V> | undefined | void>;
         children?: Snippet<[{
             props: {
                 formData: SuperForm<FormValue<V>>;
@@ -32,6 +34,7 @@ declare function $$render<V extends ZodValidationSchema>(): {
         schema: V;
         initialValue?: FormValue<V>;
         enctype?: FormEnctype;
+        noErrorToast?: boolean;
     };
     exports: {
         openFn: () => Promise<void>;

package/dist/components/form/login-other-options.svelte

@@ -17,9 +17,7 @@
     <span class="w-full border-t"></span>
   </div>
   <div class="relative flex justify-center text-xs uppercase">
-    <span class="bg-background text-muted-foreground px-2"
-      >Or continue with
-    </span>
+    <span class="text-muted-foreground px-2">Or continue with </span>
   </div>
 </div>
 {#if passkeyError !== ''}

package/dist/components/form/multistep-form.svelte

@@ -19,7 +19,7 @@
     stages: Stage<T>[];
     onsubmit: (
       data: object
-    ) => Error | undefined | void | Promise<Error | undefined | void>;
+    ) => Error<any> | undefined | void | Promise<Error<any> | undefined | void>;
     data?: T;
     submitLabel?: string;
     submitIcon?: Component;

package/dist/components/form/multistep-form.svelte.d.ts

@@ -2,7 +2,7 @@ import { type Error, type Stage } from './types';
 import type { Component } from 'svelte';
 interface Props<T> {
     stages: Stage<T>[];
-    onsubmit: (data: object) => Error | undefined | void | Promise<Error | undefined | void>;
+    onsubmit: (data: object) => Error<any> | undefined | void | Promise<Error<any> | undefined | void>;
     data?: T;
     submitLabel?: string;
     submitIcon?: Component;

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

@@ -6,8 +6,8 @@ export type { SuperForm, FormPath, FormPathLeaves } from 'sveltekit-superforms';
 export type { ZodValidationSchema };
 export type FormRecord = Record<string, unknown>;
 export type FormValue<V extends ZodValidationSchema> = z.infer<V>;
-export interface Error {
-    field?: string;
+export interface Error<V extends ZodValidationSchema> {
+    field?: keyof FormValue<V>;
     error: string;
 }
 export type FormEnctype = 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain' | undefined | null;

package/dist/components/nav/sidebar/sidebar-content.svelte

@@ -8,10 +8,10 @@
 
   interface Props {
     items: NavGroup[];
-    user: SidebarUserInfo | Promise<SidebarUserInfo>;
+    user?: SidebarUserInfo;
   }
 
-  const { items, user: userPromise }: Props = $props();
+  const { items, user }: Props = $props();
 
   const filteredItems = (items: NavGroup[], user: SidebarUserInfo) =>
     items
@@ -33,7 +33,7 @@
       .sort((a, b) => b.href.length - a.href.length)[0] ?? undefined;
 </script>
 
-{#await userPromise}
+{#if !user}
   <Sidebar.Group>
     <Sidebar.GroupLabel>Loading...</Sidebar.GroupLabel>
     <Sidebar.Menu>
@@ -44,7 +44,7 @@
       {/each}
     </Sidebar.Menu>
   </Sidebar.Group>
-{:then user}
+{:else}
   {@const filtered = filteredItems(items, user)}
   {#each filtered as group}
     <Sidebar.Group>
@@ -70,4 +70,4 @@
       </Sidebar.Menu>
     </Sidebar.Group>
   {/each}
-{/await}
+{/if}

package/dist/components/nav/sidebar/sidebar-content.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { NavGroup, SidebarUserInfo } from './types';
 interface Props {
     items: NavGroup[];
-    user: SidebarUserInfo | Promise<SidebarUserInfo>;
+    user?: SidebarUserInfo;
 }
 declare const SidebarContent: import("svelte").Component<Props, {}, "">;
 type SidebarContent = ReturnType<typeof SidebarContent>;

package/dist/components/nav/sidebar/sidebar-user.svelte

@@ -11,12 +11,12 @@
   import { Skeleton } from '../../ui/skeleton';
 
   interface Props {
-    user: SidebarUserInfo | Promise<SidebarUserInfo>;
+    user?: SidebarUserInfo;
     avatar?: string;
     logout: () => Promise<{ error?: any }>;
   }
 
-  let { logout, user: userPromise, avatar }: Props = $props();
+  let { logout, user, avatar }: Props = $props();
 
   const sidebar = Sidebar.useSidebar();
 </script>
@@ -32,19 +32,17 @@
             {...props}
           >
             <Avatar.Root class="size-8 rounded-lg">
-              {#await userPromise then user}
-                <Avatar.Image src={avatar} alt={user.name} />
-              {/await}
+              <Avatar.Image src={avatar} alt={user?.name} />
               <Avatar.Fallback class="rounded-full">?</Avatar.Fallback>
             </Avatar.Root>
             <div class="grid flex-1 text-start text-sm leading-tight">
-              {#await userPromise}
+              {#if !user}
                 <Skeleton class="mb-1 h-4" />
                 <Skeleton class="h-3" />
-              {:then user}
+              {:else}
                 <span class="truncate font-medium">{user.name}</span>
                 <span class="truncate text-xs">{user.email}</span>
-              {/await}
+              {/if}
             </div>
             <ChevronsUpDownIcon class="ms-auto size-4" />
           </Sidebar.MenuButton>
@@ -59,19 +57,17 @@
         <DropdownMenu.Label class="p-0 font-normal">
           <div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
             <Avatar.Root class="size-8 rounded-lg">
-              {#await userPromise then user}
-                <Avatar.Image src={avatar} alt={user.name} />
-              {/await}
+              <Avatar.Image src={avatar} alt={user?.name} />
               <Avatar.Fallback class="rounded-full">?</Avatar.Fallback>
             </Avatar.Root>
             <div class="grid flex-1 text-start text-sm leading-tight">
-              {#await userPromise}
+              {#if !user}
                 <Skeleton class="mb-1 h-4" />
                 <Skeleton class="h-3" />
-              {:then user}
+              {:else}
                 <span class="truncate font-medium">{user.name}</span>
                 <span class="truncate text-xs">{user.email}</span>
-              {/await}
+              {/if}
             </div>
           </div>
         </DropdownMenu.Label>

package/dist/components/nav/sidebar/sidebar-user.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { SidebarUserInfo } from './types';
 interface Props {
-    user: SidebarUserInfo | Promise<SidebarUserInfo>;
+    user?: SidebarUserInfo;
     avatar?: string;
     logout: () => Promise<{
         error?: any;

package/dist/components/nav/sidebar/sidebar.svelte

@@ -7,7 +7,7 @@
   import type { NavGroup, SidebarUserInfo } from './types';
 
   interface Props {
-    user: SidebarUserInfo | Promise<SidebarUserInfo>;
+    user?: SidebarUserInfo;
     avatar?: string;
     children: Snippet;
     version: string;

package/dist/components/nav/sidebar/sidebar.svelte.d.ts

@@ -2,7 +2,7 @@ import * as Sidebar from '../../ui/sidebar';
 import type { Component, Snippet } from 'svelte';
 import type { NavGroup, SidebarUserInfo } from './types';
 interface Props {
-    user: SidebarUserInfo | Promise<SidebarUserInfo>;
+    user?: SidebarUserInfo;
     avatar?: string;
     children: Snippet;
     version: string;

package/dist/components/table/simple-table.svelte

@@ -59,7 +59,7 @@
     createClass?: string;
     editClass?: string;
     errorMappings?: {
-      [key in RequestError]?: Error;
+      [key in RequestError]?: Error<any>;
     };
     columnData: CD;
   }

package/dist/components/table/simple-table.svelte.d.ts

@@ -38,7 +38,7 @@ declare function $$render<CV extends ZodValidationSchema, EV extends ZodValidati
         startEdit?: (item: T) => void | Promise<void>;
         createClass?: string;
         editClass?: string;
-        errorMappings?: { [key in RequestError]?: Error; };
+        errorMappings?: { [key in RequestError]?: Error<any>; };
         columnData: CD;
     };
     exports: {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@profidev/pleiades",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/Profiidev/pleiades"