@profidev/pleiades 1.7.0

package/dist/components/ui-extra/emoji-picker/emoji-picker.svelte.js

@@ -0,0 +1,164 @@
+import { Context, watch } from 'runed';
+import data, {} from '@emoji-mart/data';
+import { UseFrecency } from '../../../blocks/use-frecency.svelte';
+const emojiData = data;
+const defaultState = {
+    search: '',
+    active: null
+};
+class EmojiPickerRootState {
+    opts;
+    emojiPickerState = $state(defaultState);
+    frecency;
+    constructor(opts) {
+        this.opts = opts;
+        this.select = this.select.bind(this);
+        this.onValueChange = this.onValueChange.bind(this);
+        if (this.opts.showRecents) {
+            if (!this.opts.recentsKey)
+                throw new Error('[emoji-picker] recentsKey is required when recents is true');
+            this.frecency = new UseFrecency(this.opts.recentsKey.current, {}, { maxItems: this.opts.maxRecents.current });
+        }
+        else {
+            this.frecency = null;
+        }
+    }
+    select(emoji) {
+        const { name, skin } = parseValue(emoji);
+        const selected = {
+            emoji: emojiData.emojis[name].skins[skin].native,
+            data: emojiData.emojis[name],
+            skin
+        };
+        this.opts.value.current = selected.emoji;
+        this.opts.onSelect.current(selected);
+    }
+    onValueChange(value) {
+        if (value === '') {
+            this.emojiPickerState.active = null;
+            return;
+        }
+        const { name, skin } = parseValue(value);
+        const emojiSkin = skin ? skin : this.opts.skin.current;
+        const data = emojiData.emojis[name];
+        if (data.skins.length === 1) {
+            this.emojiPickerState.active = {
+                emoji: data.skins[0].native,
+                data: data,
+                skin: 0
+            };
+            return;
+        }
+        this.emojiPickerState.active = {
+            emoji: data.skins[emojiSkin].native,
+            data: data,
+            skin: emojiSkin
+        };
+    }
+}
+export function parseValue(emojiKey) {
+    const [name, skin] = emojiKey.split(':');
+    return { name, skin: skin ? Number(skin) : 0 };
+}
+export function makeValue(name, skin) {
+    return `${name}:${skin}`;
+}
+class EmojiPickerListState {
+    root;
+    constructor(root) {
+        this.root = root;
+        this.select = this.select.bind(this);
+    }
+    get skinIndex() {
+        return this.root.opts.skin.current;
+    }
+    select(emoji) {
+        this.root.select(emoji);
+    }
+    get maxRecents() {
+        if (this.root.opts.showRecents) {
+            return this.root.opts.maxRecents.current;
+        }
+        return 0;
+    }
+    get showRecents() {
+        return this.root.opts.showRecents.current && this.root.frecency !== null;
+    }
+}
+class EmojiPickerInputState {
+    root;
+    opts;
+    constructor(root, opts) {
+        this.root = root;
+        this.opts = opts;
+        watch(() => this.opts.value.current, () => {
+            this.root.emojiPickerState.search = this.opts.value.current;
+        });
+    }
+}
+class EmojiPickerFooterState {
+    root;
+    constructor(root) {
+        this.root = root;
+    }
+}
+class EmojiPickerSkinToneSelectorState {
+    root;
+    opts;
+    constructor(root, opts) {
+        this.root = root;
+        this.opts = opts;
+        this.cycleSkinTone = this.cycleSkinTone.bind(this);
+    }
+    previewEmoji = $derived.by(() => {
+        for (const emoji of Object.entries(emojiData.emojis)) {
+            const [_, data] = emoji;
+            let found = false;
+            for (const skin of data.skins) {
+                if (skin.native === this.opts.previewEmoji.current) {
+                    found = true;
+                    break;
+                }
+            }
+            if (!found)
+                continue;
+            if (data.skins.length === 0) {
+                throw new Error(`The selected previewEmoji: ${this.opts.previewEmoji.current} does not have multiple skins!`);
+            }
+            return data;
+        }
+        return null;
+    });
+    get preview() {
+        if (!this.previewEmoji)
+            return null;
+        return this.previewEmoji.skins[this.root.opts.skin.current].native;
+    }
+    cycleSkinTone() {
+        if (!this.previewEmoji)
+            return;
+        if (this.root.opts.skin.current + 1 > 5) {
+            this.root.opts.skin.current = 0;
+        }
+        else {
+            this.root.opts.skin.current += 1;
+        }
+        this.root.opts.onSkinChange.current(this.root.opts.skin.current);
+    }
+}
+const ctx = new Context('emoji-picker-root-state');
+export function useEmojiPicker(props) {
+    return ctx.set(new EmojiPickerRootState(props));
+}
+export function useEmojiPickerList() {
+    return new EmojiPickerListState(ctx.get());
+}
+export function useEmojiPickerInput(props) {
+    return new EmojiPickerInputState(ctx.get(), props);
+}
+export function useEmojiPickerFooter() {
+    return new EmojiPickerFooterState(ctx.get());
+}
+export function useEmojiPickerSkinToneSelector(props) {
+    return new EmojiPickerSkinToneSelectorState(ctx.get(), props);
+}

package/dist/components/ui-extra/emoji-picker/index.d.ts

@@ -0,0 +1,8 @@
+import Root from './emoji-picker.svelte';
+import List from './emoji-picker-list.svelte';
+import Viewport from './emoji-picker-viewport.svelte';
+import Search from './emoji-picker-search.svelte';
+import Footer from './emoji-picker-footer.svelte';
+import SkinToneSelector from './emoji-picker-skin-tone-selector.svelte';
+export { Root, List, Viewport, Search, Footer, SkinToneSelector };
+export type { SelectedEmoji, EmojiPickerSkin, EmojiPickerRootPropsWithoutHTML, EmojiPickerRootProps, EmojiPickerListPropsWithoutHTML, EmojiPickerListProps, EmojiPickerSearchProps, EmojiPickerFooterPropsWithoutHTML, EmojiPickerFooterProps, EmojiPickerSkinPropsWithoutHTML, EmojiPickerSkinProps } from './types';

package/dist/components/ui-extra/emoji-picker/index.js

@@ -0,0 +1,7 @@
+import Root from './emoji-picker.svelte';
+import List from './emoji-picker-list.svelte';
+import Viewport from './emoji-picker-viewport.svelte';
+import Search from './emoji-picker-search.svelte';
+import Footer from './emoji-picker-footer.svelte';
+import SkinToneSelector from './emoji-picker-skin-tone-selector.svelte';
+export { Root, List, Viewport, Search, Footer, SkinToneSelector };

package/dist/components/ui-extra/emoji-picker/types.d.ts

@@ -0,0 +1,75 @@
+import type { Emoji } from '@emoji-mart/data';
+import type { WithChildren, WithoutChild, WithoutChildren } from 'bits-ui';
+import type { Command as CommandPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ButtonProps } from '../../../blocks/button.svelte';
+export type SelectedEmoji = {
+    emoji: string;
+    data: Emoji;
+    skin: number;
+};
+/**
+ * The skin tone modifier for the emoji
+ *
+ * ```
+ * 0 = 👋
+ * 1 = 👋🏻
+ * 2 = 👋🏼
+ * 3 = 👋🏽
+ * 4 = 👋🏾
+ * 5 = 👋🏿
+ * ```
+ */
+export type EmojiPickerSkin = 0 | 1 | 2 | 3 | 4 | 5;
+export type EmojiPickerRootPropsWithoutHTML = WithChildren<{
+    /**
+     * The default skin to use
+     *
+     * @default 0
+     *
+     * ```
+     * 0 = 👋
+     * 1 = 👋🏻
+     * 2 = 👋🏼
+     * 3 = 👋🏽
+     * 4 = 👋🏾
+     * 5 = 👋🏿
+     * ```
+     */
+    skin?: EmojiPickerSkin;
+    onSelect?: (emoji: SelectedEmoji) => void;
+    onSkinChange?: (skin: EmojiPickerSkin) => void;
+}> & ({
+    /** Show recently used emojis */
+    showRecents?: true;
+    /** The key to use to store the recently used emojis */
+    recentsKey: string;
+    maxRecents?: number;
+} | {
+    /** Show recently used emojis */
+    showRecents?: false | never;
+    /** The key to use to store the recently used emojis */
+    recentsKey?: never;
+    maxRecents?: never;
+});
+export type EmojiPickerRootProps = WithoutChild<Omit<CommandPrimitive.RootProps, 'filter' | 'shouldFilter' | 'columns' | 'onValueChange'>> & EmojiPickerRootPropsWithoutHTML;
+export type EmojiPickerListPropsWithoutHTML = {
+    emptyMessage?: string;
+};
+export type EmojiPickerListProps = WithoutChildren<WithoutChild<CommandPrimitive.ListProps>> & EmojiPickerListPropsWithoutHTML;
+export type EmojiPickerSearchProps = CommandPrimitive.InputProps;
+export type EmojiPickerFooterPropsWithoutHTML = {
+    children: Snippet<[{
+        active: SelectedEmoji | null;
+    }]>;
+};
+export type EmojiPickerFooterProps = WithoutChildren<HTMLAttributes<HTMLDivElement>> & EmojiPickerFooterPropsWithoutHTML;
+export type EmojiPickerSkinPropsWithoutHTML = {
+    /** The emoji to use to preview the skin tone
+     *
+     * @default '👋'
+     */
+    previewEmoji?: string;
+};
+export type EmojiPickerSkinProps = EmojiPickerSkinPropsWithoutHTML & WithoutChildren<ButtonProps>;

package/dist/components/ui-extra/emoji-picker/types.js

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

package/dist/components/ui-extra/field-set/field-set-content.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+  import type { FieldSetTitleProps } from './types';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: FieldSetTitleProps = $props();
+</script>
+
+<div bind:this={ref} class={cn('p-6', className)} {...restProps}>
+  {@render children?.()}
+</div>

package/dist/components/ui-extra/field-set/field-set-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FieldSetTitleProps } from './types';
+declare const FieldSetContent: import("svelte").Component<FieldSetTitleProps, {}, "ref">;
+type FieldSetContent = ReturnType<typeof FieldSetContent>;
+export default FieldSetContent;

package/dist/components/ui-extra/field-set/field-set-footer.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+  import type { FieldSetFooterProps } from './types';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: FieldSetFooterProps = $props();
+</script>
+
+<div
+  bind:this={ref}
+  class={cn('border-t border-inherit px-6 py-3', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/ui-extra/field-set/field-set-footer.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FieldSetFooterProps } from './types';
+declare const FieldSetFooter: import("svelte").Component<FieldSetFooterProps, {}, "ref">;
+type FieldSetFooter = ReturnType<typeof FieldSetFooter>;
+export default FieldSetFooter;

package/dist/components/ui-extra/field-set/field-set-title.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+  import type { FieldSetTitleProps } from './types';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    level = 3,
+    children,
+    ...rest
+  }: FieldSetTitleProps = $props();
+</script>
+
+<div
+  bind:this={ref}
+  role="heading"
+  aria-level={level}
+  bind:this={ref}
+  class={cn('text-2xl leading-none font-semibold tracking-tight', className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/ui-extra/field-set/field-set-title.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FieldSetTitleProps } from './types';
+declare const FieldSetTitle: import("svelte").Component<FieldSetTitleProps, {}, "ref">;
+type FieldSetTitle = ReturnType<typeof FieldSetTitle>;
+export default FieldSetTitle;

package/dist/components/ui-extra/field-set/field-set.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+  import { fieldSetVariants } from './';
+  import type { FieldSetRootProps } from './types';
+
+  let {
+    ref = $bindable(null),
+    variant = 'default',
+    children,
+    class: className,
+    ...rest
+  }: FieldSetRootProps = $props();
+</script>
+
+<div
+  bind:this={ref}
+  class={cn(fieldSetVariants({ variant }), className)}
+  {...rest}
+>
+  {@render children?.()}
+</div>

package/dist/components/ui-extra/field-set/field-set.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FieldSetRootProps } from './types';
+declare const FieldSet: import("svelte").Component<FieldSetRootProps, {}, "ref">;
+type FieldSet = ReturnType<typeof FieldSet>;
+export default FieldSet;

package/dist/components/ui-extra/field-set/index.d.ts

@@ -0,0 +1,24 @@
+import Root from './field-set.svelte';
+import Content from './field-set-content.svelte';
+import Footer from './field-set-footer.svelte';
+import Title from './field-set-title.svelte';
+import type { FieldSetRootProps, FieldSetTitleProps, FieldSetContentProps, FieldSetFooterProps } from './types';
+import { type VariantProps } from 'tailwind-variants';
+export declare const fieldSetVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}, undefined, "border-border flex h-fit w-full flex-col rounded-lg border", {
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        destructive: string;
+    };
+}, undefined, "border-border flex h-fit w-full flex-col rounded-lg border", unknown, unknown, undefined>>;
+export type Variant = VariantProps<typeof fieldSetVariants>['variant'];
+export { Root, Content, Footer, Title, type FieldSetRootProps as RootProps, type FieldSetTitleProps as TitleProps, type FieldSetContentProps as ContentProps, type FieldSetFooterProps as FooterProps };

package/dist/components/ui-extra/field-set/index.js

@@ -0,0 +1,15 @@
+import Root from './field-set.svelte';
+import Content from './field-set-content.svelte';
+import Footer from './field-set-footer.svelte';
+import Title from './field-set-title.svelte';
+import { tv } from 'tailwind-variants';
+export const fieldSetVariants = tv({
+    base: 'border-border flex h-fit w-full flex-col rounded-lg border',
+    variants: {
+        variant: {
+            default: 'border-border bg-card',
+            destructive: 'border-destructive'
+        }
+    }
+});
+export { Root, Content, Footer, Title };

package/dist/components/ui-extra/field-set/types.d.ts

@@ -0,0 +1,21 @@
+import type { WithChildren, WithoutChildren } from 'bits-ui';
+import type { Variant } from './';
+import type { HTMLAttributes } from 'svelte/elements';
+export type FieldSetRootPropsWithoutHTML = WithChildren<{
+    ref?: HTMLDivElement | null;
+    variant?: Variant;
+}>;
+export type FieldSetRootProps = FieldSetRootPropsWithoutHTML & WithoutChildren<HTMLAttributes<HTMLDivElement>>;
+export type FieldSetContentPropsWithoutHTML = WithChildren<{
+    ref?: HTMLDivElement | null;
+}>;
+export type FieldSetContentProps = FieldSetContentPropsWithoutHTML & WithoutChildren<HTMLAttributes<HTMLDivElement>>;
+export type FieldSetTitlePropsWithoutHtml = WithChildren<{
+    ref?: HTMLHeadingElement | null;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+}>;
+export type FieldSetTitleProps = FieldSetTitlePropsWithoutHtml & WithoutChildren<HTMLAttributes<HTMLHeadingElement>>;
+export type FieldSetFooterPropsWithoutHTML = WithChildren<{
+    ref?: HTMLDivElement | null;
+}>;
+export type FieldSetFooterProps = FieldSetFooterPropsWithoutHTML & WithoutChildren<HTMLAttributes<HTMLDivElement>>;

package/dist/components/ui-extra/field-set/types.js

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

package/dist/components/ui-extra/file-drop-zone/file-drop-zone-textarea.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { useFileDropZoneTextarea } from './file-drop-zone.svelte.js';
+  import { box, mergeProps } from 'svelte-toolbelt';
+  import type { WithChild } from 'bits-ui';
+
+  type Props = HTMLAttributes<HTMLTextAreaElement>;
+
+  let { onpaste, ondragover, ondrop, child, ...rest }: WithChild & Props =
+    $props();
+
+  const fileDropZoneTextareaState = useFileDropZoneTextarea({
+    onpaste: box.with(() => onpaste),
+    ondragover: box.with(() => ondragover),
+    ondrop: box.with(() => ondrop)
+  });
+
+  const mergedProps = $derived(
+    mergeProps(fileDropZoneTextareaState.props, rest)
+  );
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <textarea {...mergedProps}></textarea>
+{/if}

package/dist/components/ui-extra/file-drop-zone/file-drop-zone-textarea.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithChild } from 'bits-ui';
+type Props = HTMLAttributes<HTMLTextAreaElement>;
+type $$ComponentProps = WithChild & Props;
+declare const FileDropZoneTextarea: import("svelte").Component<$$ComponentProps, {}, "">;
+type FileDropZoneTextarea = ReturnType<typeof FileDropZoneTextarea>;
+export default FileDropZoneTextarea;

package/dist/components/ui-extra/file-drop-zone/file-drop-zone-trigger.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+  import { useFileDropZoneTrigger } from './file-drop-zone.svelte.js';
+  import { displaySize } from './index.js';
+  import type { FileDropZoneTriggerProps } from './types.js';
+  import UploadIcon from '@lucide/svelte/icons/upload';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: FileDropZoneTriggerProps = $props();
+
+  const triggerState = useFileDropZoneTrigger();
+</script>
+
+<label
+  bind:this={ref}
+  class={cn('group/file-drop-zone-trigger', className)}
+  {...triggerState.props}
+  {...rest}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    <div
+      class="hover:bg-accent/25 flex h-48 flex-col place-items-center justify-center gap-2 rounded-lg border border-dashed p-6 transition-all group-aria-disabled/file-drop-zone-trigger:opacity-50 hover:cursor-pointer group-aria-disabled/file-drop-zone-trigger:hover:cursor-not-allowed"
+    >
+      <div
+        class="border-border text-muted-foreground flex size-14 place-items-center justify-center rounded-full border border-dashed"
+      >
+        <UploadIcon class="size-7" />
+      </div>
+      <div class="flex flex-col gap-0.5 text-center">
+        <span class="text-muted-foreground font-medium">
+          Drag 'n' drop files here, or click to select files
+        </span>
+        {#if triggerState.rootState.opts.maxFiles.current || triggerState.rootState.opts.maxFileSize.current}
+          <span class="text-muted-foreground/75 text-sm">
+            {#if triggerState.rootState.opts.maxFiles.current}
+              <span>
+                You can upload {triggerState.rootState.opts.maxFiles.current} files
+              </span>
+            {/if}
+            {#if triggerState.rootState.opts.maxFiles.current && triggerState.rootState.opts.maxFileSize.current}
+              <span>
+                (up to {displaySize(
+                  triggerState.rootState.opts.maxFileSize.current
+                )} each)
+              </span>
+            {/if}
+            {#if triggerState.rootState.opts.maxFileSize.current && !triggerState.rootState.opts.maxFiles.current}
+              <span>
+                Maximum size {displaySize(
+                  triggerState.rootState.opts.maxFileSize.current
+                )}
+              </span>
+            {/if}
+          </span>
+        {/if}
+      </div>
+    </div>
+  {/if}
+</label>

package/dist/components/ui-extra/file-drop-zone/file-drop-zone-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FileDropZoneTriggerProps } from './types.js';
+declare const FileDropZoneTrigger: import("svelte").Component<FileDropZoneTriggerProps, {}, "ref">;
+type FileDropZoneTrigger = ReturnType<typeof FileDropZoneTrigger>;
+export default FileDropZoneTrigger;

package/dist/components/ui-extra/file-drop-zone/file-drop-zone.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { useFileDropZone } from './file-drop-zone.svelte.js';
+  import type { FileDropZoneRootProps } from './types.js';
+  import { box } from 'svelte-toolbelt';
+
+  const uid = $props.id();
+  let {
+    id = uid,
+    maxFiles,
+    maxFileSize,
+    fileCount,
+    disabled = false,
+    onUpload,
+    onFileRejected,
+    accept,
+    children,
+    ...rest
+  }: FileDropZoneRootProps = $props();
+
+  const rootState = useFileDropZone({
+    id: box.with(() => id),
+    disabled: box.with(() => disabled ?? false),
+    onUpload: box.with(() => onUpload),
+    maxFiles: box.with(() => maxFiles),
+    fileCount: box.with(() => fileCount),
+    maxFileSize: box.with(() => maxFileSize),
+    onFileRejected: box.with(() => onFileRejected),
+    accept: box.with(() => accept)
+  });
+</script>
+
+<input class="hidden" {...rootState.props} {...rest} />
+
+{@render children?.()}

package/dist/components/ui-extra/file-drop-zone/file-drop-zone.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FileDropZoneRootProps } from './types.js';
+declare const FileDropZone: import("svelte").Component<FileDropZoneRootProps, {}, "">;
+type FileDropZone = ReturnType<typeof FileDropZone>;
+export default FileDropZone;