@profidev/pleiades 1.7.0

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

@@ -0,0 +1,40 @@
+<script lang="ts" generics="S extends FormRecord = FormRecord">
+  import { Switch } from '../ui/switch/index.js';
+  import * as Form from '../ui/form/index.js';
+  import type { FormPath, SuperForm } from 'sveltekit-superforms';
+  import type { FormRecord } from './types.js';
+  import type { WithoutChildrenOrChild } from '../../utils.js';
+  import { Switch as SwitchPrimitive } from 'bits-ui';
+
+  interface Props {
+    formData: SuperForm<S>;
+    key: FormPath<S>;
+    label: string;
+    disabled?: boolean;
+  }
+
+  let {
+    formData: form,
+    key,
+    label,
+    disabled,
+    ...restProps
+  }: Props & WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+
+  let formData: any = $derived(form.form);
+</script>
+
+<Form.Field {form} name={key} class="mt-2 flex w-full items-center">
+  <Form.Control>
+    {#snippet children({ props })}
+      <Form.Label>{label}</Form.Label>
+      <Switch
+        {...props}
+        {...restProps}
+        bind:checked={$formData[key]}
+        class="ml-auto"
+      />
+    {/snippet}
+  </Form.Control>
+  <Form.FieldErrors />
+</Form.Field>

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

@@ -0,0 +1,32 @@
+import type { FormPath, SuperForm } from 'sveltekit-superforms';
+import type { FormRecord } from './types.js';
+import { Switch as SwitchPrimitive } from 'bits-ui';
+declare function $$render<S extends FormRecord = FormRecord>(): {
+    props: {
+        formData: SuperForm<S>;
+        key: FormPath<S>;
+        label: string;
+        disabled?: boolean;
+    } & Omit<Omit<SwitchPrimitive.RootProps, "child">, "children">;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<S extends FormRecord = FormRecord> {
+    props(): ReturnType<typeof $$render<S>>['props'];
+    events(): ReturnType<typeof $$render<S>>['events'];
+    slots(): ReturnType<typeof $$render<S>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <S extends FormRecord = FormRecord>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<S>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<S>['props']>, ReturnType<__sveltets_Render<S>['events']>, ReturnType<__sveltets_Render<S>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<S>['bindings']>;
+    } & ReturnType<__sveltets_Render<S>['exports']>;
+    <S extends FormRecord = FormRecord>(internal: unknown, props: ReturnType<__sveltets_Render<S>['props']> & {}): ReturnType<__sveltets_Render<S>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const FormSwitch: $$IsomorphicComponent;
+type FormSwitch<S extends FormRecord = FormRecord> = InstanceType<typeof FormSwitch<S>>;
+export default FormSwitch;

package/dist/components/form/hideable-input.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" generics="S extends FormRecord = FormRecord">
+  import type {
+    FormRecord,
+    SuperForm,
+    FormPath
+  } from './types';
+  import { Input } from '../ui/input';
+  import { Label } from '../ui/label';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    formData: SuperForm<S>;
+    key: FormPath<S>;
+    id: string;
+    value: any;
+    children: Snippet;
+  }
+
+  const { formData: form, key, id, value, children }: Props = $props();
+
+  let formData = $derived(form.form);
+</script>
+
+{#if $formData[key]}
+  <Label for={id} class="flex">
+    {@render children()}
+  </Label>
+  <Input {id} {value} readonly />
+{/if}

package/dist/components/form/hideable-input.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { FormRecord, SuperForm, FormPath } from './types';
+import type { Snippet } from 'svelte';
+declare function $$render<S extends FormRecord = FormRecord>(): {
+    props: {
+        formData: SuperForm<S>;
+        key: FormPath<S>;
+        id: string;
+        value: any;
+        children: Snippet;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<S extends FormRecord = FormRecord> {
+    props(): ReturnType<typeof $$render<S>>['props'];
+    events(): ReturnType<typeof $$render<S>>['events'];
+    slots(): ReturnType<typeof $$render<S>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <S extends FormRecord = FormRecord>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<S>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<S>['props']>, ReturnType<__sveltets_Render<S>['events']>, ReturnType<__sveltets_Render<S>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<S>['bindings']>;
+    } & ReturnType<__sveltets_Render<S>['exports']>;
+    <S extends FormRecord = FormRecord>(internal: unknown, props: ReturnType<__sveltets_Render<S>['props']> & {}): ReturnType<__sveltets_Render<S>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const HideableInput: $$IsomorphicComponent;
+type HideableInput<S extends FormRecord = FormRecord> = InstanceType<typeof HideableInput<S>>;
+export default HideableInput;

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import KeyRound from '@lucide/svelte/icons/key-round';
+  import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+  import { Button } from '../ui/button/index.js';
+
+  interface Props {
+    isLoading: boolean;
+    passkeyClick: () => void;
+    passkeyError: string;
+  }
+
+  let { isLoading, passkeyClick, passkeyError }: Props = $props();
+</script>
+
+<div class="relative">
+  <div class="absolute inset-0 flex items-center">
+    <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>
+  </div>
+</div>
+{#if passkeyError !== ''}
+  <span class="text-destructive truncate text-sm">{passkeyError}</span>
+{/if}
+<Button
+  variant="outline"
+  type="button"
+  disabled={isLoading}
+  onclick={passkeyClick}
+  class="cursor-pointer"
+>
+  {#if isLoading}
+    <LoaderCircle class="mr-2 h-4 w-4 animate-spin" />
+  {:else}
+    <KeyRound class="mr-2 h-4 w-4" />
+  {/if}
+  Passkey
+</Button>

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

@@ -0,0 +1,8 @@
+interface Props {
+    isLoading: boolean;
+    passkeyClick: () => void;
+    passkeyError: string;
+}
+declare const LoginOtherOptions: import("svelte").Component<Props, {}, "">;
+type LoginOtherOptions = ReturnType<typeof LoginOtherOptions>;
+export default LoginOtherOptions;

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

@@ -0,0 +1,145 @@
+<script lang="ts" generics="T">
+  import ArrowLeft from '@lucide/svelte/icons/arrow-left';
+  import ArrowRight from '@lucide/svelte/icons/arrow-right';
+  import Ban from '@lucide/svelte/icons/ban';
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import Plus from '@lucide/svelte/icons/plus';
+  import { Badge } from '../ui/badge';
+  import { Button } from '../ui/button';
+  import * as Card from '../ui/card';
+  import { Spinner } from '../ui/spinner';
+  import {
+    type Error,
+    type FormRecord,
+    type Stage
+  } from './types';
+  import type { Component, SvelteComponent } from 'svelte';
+
+  interface Props<T> {
+    stages: Stage<T>[];
+    onsubmit: (
+      data: object
+    ) => Error | undefined | void | Promise<Error | undefined | void>;
+    data?: T;
+    submitLabel?: string;
+    submitIcon?: Component;
+    cancelHref: string;
+  }
+
+  let {
+    stages,
+    onsubmit,
+    data = undefined as T,
+    submitLabel = 'Create',
+    submitIcon: SubmitIcon = Plus,
+    cancelHref
+  }: Props<T> = $props();
+
+  let stage = $state(0);
+  let form: undefined | SvelteComponent = $state();
+  let isLoading = $state(false);
+
+  const gotoStep = (step: number) => {
+    stages[stage].data = form?.getValue() || {};
+    stage = step;
+  };
+
+  const submit = async (form: FormRecord) => {
+    stages[stage].data = form;
+    if (stage < stages.length - 1) {
+      stage += 1;
+    } else {
+      let rawData = stages
+        // last element is summary
+        .filter((_, i) => i < stages.length)
+        .reduce((acc, s) => ({ ...acc, ...s.data }), {});
+
+      return onsubmit(rawData);
+    }
+    return undefined;
+  };
+</script>
+
+<div class="flex h-full items-center justify-center p-4">
+  <Card.Root class="w-120">
+    <Card.Header class="flex flex-col gap-4">
+      {#if stages.length > 1}
+        <div class="flex gap-2">
+          {#each stages as _, index}
+            <Badge
+              class={'flex size-6 rounded-full' +
+                (stage > index ? ' cursor-pointer p-0' : '')}
+              variant={stage === index ? 'default' : 'outline'}
+              onclick={() => {
+                if (stage > index) {
+                  gotoStep(index);
+                }
+              }}
+            >
+              {#if stage > index}
+                <CheckIcon />
+              {:else}
+                {index + 1}
+              {/if}
+            </Badge>
+          {/each}
+        </div>
+      {/if}
+      <Card.Title>{stages[stage].title}</Card.Title>
+    </Card.Header>
+    <Card.Content>
+      {@const current = stages[stage]}
+      <current.content
+        bind:this={form}
+        initialValue={current.data}
+        onsubmit={submit}
+        bind:isLoading
+        {data}
+      >
+        {#snippet footer({ isLoading })}
+          <Card.Footer
+            class="w-full gap-2 border-none bg-transparent px-0 pt-0"
+          >
+            {#if stages.length > 1}
+              <Button
+                class="cursor-pointer"
+                variant="outline"
+                disabled={stage === 0 || isLoading}
+                onclick={() => {
+                  if (stage > 0) {
+                    gotoStep(stage - 1);
+                  }
+                }}
+              >
+                <ArrowLeft />
+                Previous
+              </Button>
+            {/if}
+            <Button
+              class="ml-auto cursor-pointer"
+              variant="outline"
+              disabled={isLoading}
+              href={cancelHref}
+            >
+              <Ban />
+              Cancel
+            </Button>
+            <Button class="cursor-pointer" type="submit" disabled={isLoading}>
+              {#if stage === stages.length - 1}
+                {submitLabel}
+                {#if isLoading}
+                  <Spinner />
+                {:else}
+                  <SubmitIcon />
+                {/if}
+              {:else}
+                Next
+                <ArrowRight />
+              {/if}
+            </Button>
+          </Card.Footer>
+        {/snippet}
+      </current.content>
+    </Card.Content>
+  </Card.Root>
+</div>

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

@@ -0,0 +1,34 @@
+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>;
+    data?: T;
+    submitLabel?: string;
+    submitIcon?: Component;
+    cancelHref: string;
+}
+declare function $$render<T>(): {
+    props: Props<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const MultistepForm: $$IsomorphicComponent;
+type MultistepForm<T> = InstanceType<typeof MultistepForm<T>>;
+export default MultistepForm;

package/dist/components/form/totp-6.svelte

@@ -0,0 +1,56 @@
+<script lang="ts" generics="S extends FormRecord = FormRecord">
+  import * as InputOtp from '../ui/input-otp/index.js';
+  import * as Form from '../ui/form/index.js';
+  import type { FormPath, SuperForm } from 'sveltekit-superforms';
+  import type { FormRecord } from './types.js';
+
+  interface Props {
+    class: string | undefined;
+    key: FormPath<S>;
+    label: string;
+    formData: SuperForm<S>;
+    disabled?: boolean;
+  }
+
+  let {
+    class: className,
+    key,
+    formData: form,
+    label,
+    disabled
+  }: Props = $props();
+
+  let formData = $derived(form.form);
+</script>
+
+<Form.Field {form} name={key}>
+  <Form.Control>
+    {#snippet children({ props })}
+      <Form.Label class={className}>{label}</Form.Label>
+      {/* @ts-ignore */ null}
+      <InputOtp.Root
+        maxlength={6}
+        bind:value={$formData[key]}
+        class={className}
+        autofocus
+        {disabled}
+        {...props}
+      >
+        {#snippet children({ cells })}
+          <InputOtp.Group>
+            {#each cells.slice(0, 3) as cell}
+              <InputOtp.Slot {cell} />
+            {/each}
+          </InputOtp.Group>
+          <InputOtp.Separator />
+          <InputOtp.Group>
+            {#each cells.slice(3, 6) as cell}
+              <InputOtp.Slot {cell} />
+            {/each}
+          </InputOtp.Group>
+        {/snippet}
+      </InputOtp.Root>
+    {/snippet}
+  </Form.Control>
+  <Form.FieldErrors class={className} />
+</Form.Field>

package/dist/components/form/totp-6.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { FormPath, SuperForm } from 'sveltekit-superforms';
+import type { FormRecord } from './types.js';
+declare function $$render<S extends FormRecord = FormRecord>(): {
+    props: {
+        class: string | undefined;
+        key: FormPath<S>;
+        label: string;
+        formData: SuperForm<S>;
+        disabled?: boolean;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<S extends FormRecord = FormRecord> {
+    props(): ReturnType<typeof $$render<S>>['props'];
+    events(): ReturnType<typeof $$render<S>>['events'];
+    slots(): ReturnType<typeof $$render<S>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <S extends FormRecord = FormRecord>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<S>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<S>['props']>, ReturnType<__sveltets_Render<S>['events']>, ReturnType<__sveltets_Render<S>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<S>['bindings']>;
+    } & ReturnType<__sveltets_Render<S>['exports']>;
+    <S extends FormRecord = FormRecord>(internal: unknown, props: ReturnType<__sveltets_Render<S>['props']> & {}): ReturnType<__sveltets_Render<S>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Totp6: $$IsomorphicComponent;
+type Totp6<S extends FormRecord = FormRecord> = InstanceType<typeof Totp6<S>>;
+export default Totp6;

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

@@ -0,0 +1,30 @@
+import type { Component, ComponentProps, Snippet } from 'svelte';
+import type { ZodValidationSchema } from 'sveltekit-superforms/adapters';
+import type { z } from 'zod/v4';
+import type BaseForm from './base-form.svelte';
+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;
+    error: string;
+}
+export type FormEnctype = 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain' | undefined | null;
+export interface StageProps<T = undefined> {
+    initialValue?: any;
+    onsubmit: ComponentProps<typeof BaseForm>['onsubmit'];
+    footer: Snippet<[{
+        isLoading: boolean;
+    }]>;
+    isLoading: boolean;
+    data: T;
+}
+export type StageComponent<T = undefined> = Component<StageProps<T>, {
+    getValue: () => object | undefined;
+}>;
+export interface Stage<T = undefined> {
+    title: string;
+    content: StageComponent<T>;
+    data: object;
+}

package/dist/components/form/types.js

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

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

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import * as Sidebar from '../../ui/sidebar';
+  import type {
+    NavGroup,
+    NavItem,
+    SidebarUserInfo
+  } from './types';
+
+  interface Props {
+    items: NavGroup[];
+    user: SidebarUserInfo;
+  }
+
+  const { items, user }: Props = $props();
+
+  let filteredItems = $derived(
+    items
+      .map((group) => {
+        group.items = group.items.filter((item) => {
+          if (item.requiredPermission) {
+            return user.permissions.includes(item.requiredPermission);
+          }
+          return true;
+        });
+        return group;
+      })
+      .filter((item) => item.items.length > 0)
+  );
+
+  let current = $derived<NavItem | undefined>(
+    filteredItems
+      .flatMap((group) => group.items)
+      .filter((item) => page.url.pathname.startsWith(item.href))
+      .sort((a, b) => b.href.length - a.href.length)[0] ?? undefined
+  );
+</script>
+
+{#each filteredItems as group}
+  <Sidebar.Group>
+    <Sidebar.GroupLabel>{group.label}</Sidebar.GroupLabel>
+    <Sidebar.Menu class="gap-1">
+      {#each group.items as item}
+        <Sidebar.MenuItem>
+          <Sidebar.MenuButton
+            tooltipContent={item.label}
+            class={item.href === current?.href ? 'bg-muted' : ''}
+          >
+            {#snippet child({ props })}
+              <a href={item.href} {...props}>
+                {#if item.icon}
+                  <item.icon />
+                {/if}
+                <span>{item.label}</span>
+              </a>
+            {/snippet}
+          </Sidebar.MenuButton>
+        </Sidebar.MenuItem>
+      {/each}
+    </Sidebar.Menu>
+  </Sidebar.Group>
+{/each}

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

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

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

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import * as Sidebar from '../../ui/sidebar';
+  import Snowflake from '@lucide/svelte/icons/snowflake';
+  import PanelLeftOpen from '@lucide/svelte/icons/panel-left-open';
+  import PanelLeftClose from '@lucide/svelte/icons/panel-left-close';
+  import type { Component } from 'svelte';
+
+  interface Props {
+    version: string;
+    app_name: string;
+    app_icon?: Component;
+  }
+
+  let { version, app_name, app_icon }: Props = $props();
+
+  let sidebar = Sidebar.useSidebar();
+  let isOpen = $derived(sidebar.props.open());
+  let AppIcon = $derived(app_icon ?? Snowflake);
+</script>
+
+<Sidebar.Menu>
+  <Sidebar.MenuItem class="flex flex-row">
+    <Sidebar.MenuButton
+      size="lg"
+      class="overflow-hidden transition-all ease-linear data-[open=true]:max-w-54 md:max-w-0 md:data-[open=true]:max-w-42"
+      data-open={isOpen}
+    >
+      {#snippet child({ props })}
+        <a href="/" {...props}>
+          <div
+            class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
+          >
+            <AppIcon class="size-4 text-[#9db6ed]" />
+          </div>
+          <div class="flex flex-col gap-0.5 leading-none">
+            <span class="font-medium text-nowrap">{app_name}</span>
+            <span class="text-nowrap">{version}</span>
+          </div>
+        </a>
+      {/snippet}
+    </Sidebar.MenuButton>
+    <Sidebar.MenuButton
+      size="lg"
+      class="ml-auto size-12 cursor-pointer"
+      onclick={sidebar.toggle}
+      aria-label="Open/Close Sidebar"
+      tooltipContent={app_name}
+    >
+      <div
+        data-open={!isOpen}
+        class="data-[open=true]:bg-sidebar-primary data-[open=true]:text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
+      >
+        {#if isOpen}
+          <PanelLeftClose class="size-6!" />
+        {:else}
+          <PanelLeftOpen />
+        {/if}
+      </div>
+    </Sidebar.MenuButton>
+  </Sidebar.MenuItem>
+</Sidebar.Menu>

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

@@ -0,0 +1,9 @@
+import type { Component } from 'svelte';
+interface Props {
+    version: string;
+    app_name: string;
+    app_icon?: Component;
+}
+declare const SidebarHeader: Component<Props, {}, "">;
+type SidebarHeader = ReturnType<typeof SidebarHeader>;
+export default SidebarHeader;