@profidev/pleiades 1.7.0

package/dist/components/ui-extra/tree-view/tree-view.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+  import type { TreeViewRootProps } from './types';
+
+  let { children, class: className }: TreeViewRootProps = $props();
+</script>
+
+<div role="tree" class={cn('flex flex-col', className)}>
+  {@render children?.()}
+</div>

package/dist/components/ui-extra/tree-view/tree-view.svelte.d.ts

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

package/dist/components/ui-extra/tree-view/types.d.ts

@@ -0,0 +1,20 @@
+import type { WithChildren, WithoutChildren } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
+export type TreeViewRootProps = HTMLAttributes<HTMLDivElement>;
+export type TreeViewFolderProps = WithChildren<{
+    name: string;
+    open?: boolean;
+    class?: string;
+    icon?: Snippet<[{
+        name: string;
+        open: boolean;
+    }]>;
+}>;
+export type TreeViewFilePropsWithoutHTML = WithChildren<{
+    name: string;
+    icon?: Snippet<[{
+        name: string;
+    }]>;
+}>;
+export type TreeViewFileProps = WithoutChildren<HTMLButtonAttributes> & TreeViewFilePropsWithoutHTML;

package/dist/components/ui-extra/tree-view/types.js

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

package/dist/components/ui-extra/underline-tabs/index.d.ts

@@ -0,0 +1,5 @@
+import Root from './underline-tabs.svelte';
+import Content from './underline-tabs-content.svelte';
+import List from './underline-tabs-list.svelte';
+import Trigger from './underline-tabs-trigger.svelte';
+export { Root, Content, List, Trigger, Root as UnderlineTabs, Content as UnderlineTabsContent, List as UnderlineTabsList, Trigger as UnderlineTabsTrigger };

package/dist/components/ui-extra/underline-tabs/index.js

@@ -0,0 +1,7 @@
+import Root from './underline-tabs.svelte';
+import Content from './underline-tabs-content.svelte';
+import List from './underline-tabs-list.svelte';
+import Trigger from './underline-tabs-trigger.svelte';
+export { Root, Content, List, Trigger, 
+//
+Root as UnderlineTabs, Content as UnderlineTabsContent, List as UnderlineTabsList, Trigger as UnderlineTabsTrigger };

package/dist/components/ui-extra/underline-tabs/underline-tabs-content.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+  bind:ref
+  data-slot="underline-tabs-content"
+  class={cn('flex-1 outline-none', className)}
+  {...restProps}
+/>

package/dist/components/ui-extra/underline-tabs/underline-tabs-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tabs as TabsPrimitive } from 'bits-ui';
+declare const UnderlineTabsContent: import("svelte").Component<TabsPrimitive.ContentProps, {}, "ref">;
+type UnderlineTabsContent = ReturnType<typeof UnderlineTabsContent>;
+export default UnderlineTabsContent;

package/dist/components/ui-extra/underline-tabs/underline-tabs-list.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '../../../blocks/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: TabsPrimitive.ListProps = $props();
+</script>
+
+<TabsPrimitive.List
+  bind:ref
+  data-slot="underline-tabs-list"
+  class={cn(
+    'text-muted-foreground border-border relative inline-flex h-9 w-full max-w-full items-center justify-start overflow-x-auto border-b',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</TabsPrimitive.List>
+
+<style>
+  :global([data-slot='underline-tabs-list']) {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  :global([data-slot='underline-tabs-list']::-webkit-scrollbar) {
+    display: none;
+  }
+</style>

package/dist/components/ui-extra/underline-tabs/underline-tabs-list.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tabs as TabsPrimitive } from 'bits-ui';
+declare const UnderlineTabsList: import("svelte").Component<TabsPrimitive.ListProps, {}, "ref">;
+type UnderlineTabsList = ReturnType<typeof UnderlineTabsList>;
+export default UnderlineTabsList;

package/dist/components/ui-extra/underline-tabs/underline-tabs-trigger.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '../../../blocks/utils.js';
+  import {
+    receive,
+    send,
+    useUnderlineTabsTrigger
+  } from './underline-tabs.svelte.js';
+  import { box } from 'svelte-toolbelt';
+
+  let {
+    ref = $bindable(null),
+    value,
+    class: className,
+    onmouseenter,
+    onmouseleave,
+    onfocus,
+    onblur,
+    children,
+    ...restProps
+  }: TabsPrimitive.TriggerProps = $props();
+
+  const state = useUnderlineTabsTrigger({
+    value: box.with(() => value),
+    onmouseenter: box.with(() => onmouseenter),
+    onmouseleave: box.with(() => onmouseleave),
+    onfocus: box.with(() => onfocus),
+    onblur: box.with(() => onblur)
+  });
+</script>
+
+<div class="relative h-full">
+  <TabsPrimitive.Trigger
+    bind:ref
+    data-slot="underline-tabs-trigger"
+    class={cn(
+      "dark:data-[state=active]:text-foreground data-[state=active]:text-foreground text-muted-foreground relative z-2 inline-flex h-[calc(100%-3px)] flex-1 items-center justify-center gap-1.5 px-3 py-1 text-sm font-medium whitespace-nowrap transition-colors focus:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      state.rootState.isHovered &&
+        state.rootState.hoveredTab === value &&
+        'data-[state=inactive]:text-foreground!',
+      className
+    )}
+    {...state.props}
+    {...restProps}
+  >
+    {@render children?.()}
+  </TabsPrimitive.Trigger>
+  {#if state.rootState.hoveredTab === value}
+    <div
+      class={cn(
+        'bg-accent absolute top-0 z-1 h-[calc(100%-3px)] w-full rounded-md opacity-0 transition-opacity duration-300 peer-focus-visible:opacity-100',
+        state.rootState.isHovered && 'opacity-100'
+      )}
+      in:receive={{
+        key: `${state.rootState.opts.id.current}-tab-hover`,
+        duration: 300
+      }}
+      out:send={{
+        key: `${state.rootState.opts.id.current}-tab-hover`,
+        duration: 300
+      }}
+    ></div>
+  {/if}
+  {#if state.rootState.opts.value.current === value}
+    <div
+      class="bg-primary absolute -bottom-px z-1 h-0.5 w-full"
+      in:receive={{
+        key: `${state.rootState.opts.id.current}-tab-active-border`,
+        duration: 200
+      }}
+      out:send={{
+        key: `${state.rootState.opts.id.current}-tab-active-border`,
+        duration: 200
+      }}
+    ></div>
+  {/if}
+</div>

package/dist/components/ui-extra/underline-tabs/underline-tabs-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Tabs as TabsPrimitive } from 'bits-ui';
+declare const UnderlineTabsTrigger: import("svelte").Component<TabsPrimitive.TriggerProps, {}, "ref">;
+type UnderlineTabsTrigger = ReturnType<typeof UnderlineTabsTrigger>;
+export default UnderlineTabsTrigger;

package/dist/components/ui-extra/underline-tabs/underline-tabs.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '../../../blocks/utils.js';
+  import { useUnderlineTabs } from './underline-tabs.svelte.js';
+  import { box } from 'svelte-toolbelt';
+
+  const uid = $props.id();
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(''),
+    id = uid,
+    class: className,
+    ...restProps
+  }: Omit<TabsPrimitive.RootProps, 'orientation' | 'id'> & {
+    id?: string;
+  } = $props();
+
+  useUnderlineTabs({
+    value: box.with(
+      () => value,
+      (v) => (value = v)
+    ),
+    id: box.with(() => id)
+  });
+</script>
+
+<TabsPrimitive.Root
+  bind:ref
+  bind:value
+  orientation="horizontal"
+  data-slot="underline-tabs"
+  class={cn('flex flex-col gap-2', className)}
+  {...restProps}
+/>

package/dist/components/ui-extra/underline-tabs/underline-tabs.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Tabs as TabsPrimitive } from 'bits-ui';
+type $$ComponentProps = Omit<TabsPrimitive.RootProps, 'orientation' | 'id'> & {
+    id?: string;
+};
+declare const UnderlineTabs: import("svelte").Component<$$ComponentProps, {}, "value" | "ref">;
+type UnderlineTabs = ReturnType<typeof UnderlineTabs>;
+export default UnderlineTabs;

package/dist/components/ui-extra/underline-tabs/underline-tabs.svelte.js

@@ -0,0 +1,61 @@
+import { Context } from 'runed';
+import { crossfade } from 'svelte/transition';
+export const [send, receive] = crossfade({
+    duration: (d) => Math.sqrt(d * 200)
+});
+class UnderlineTabsRootState {
+    opts;
+    hoveredTab = $state(null);
+    isHovered = $state(false);
+    constructor(opts) {
+        this.opts = opts;
+        this.hoveredTab = this.opts.value.current;
+    }
+}
+class UnderlineTabsTriggerState {
+    opts;
+    rootState;
+    constructor(opts, rootState) {
+        this.opts = opts;
+        this.rootState = rootState;
+    }
+    handleFocus() {
+        this.rootState.isHovered = true;
+        this.rootState.hoveredTab = this.opts.value.current;
+    }
+    handleBlur() {
+        if (this.rootState.hoveredTab === this.opts.value.current) {
+            this.rootState.isHovered = false;
+        }
+    }
+    onmouseenter(e) {
+        this.handleFocus();
+        this.opts.onmouseenter.current?.(e);
+    }
+    onmouseleave(e) {
+        this.handleBlur();
+        this.opts.onmouseleave.current?.(e);
+    }
+    onfocus(e) {
+        this.handleFocus();
+        this.opts.onfocus.current?.(e);
+    }
+    onblur(e) {
+        this.handleBlur();
+        this.opts.onblur.current?.(e);
+    }
+    props = $derived.by(() => ({
+        value: this.opts.value.current,
+        onmouseenter: this.onmouseenter.bind(this),
+        onmouseleave: this.onmouseleave.bind(this),
+        onfocus: this.onfocus.bind(this),
+        onblur: this.onblur.bind(this)
+    }));
+}
+const ctx = new Context('underline-tabs-root-ctx');
+export function useUnderlineTabs(opts) {
+    return ctx.set(new UnderlineTabsRootState(opts));
+}
+export function useUnderlineTabsTrigger(opts) {
+    return new UnderlineTabsTriggerState(opts, ctx.get());
+}

package/dist/components/ui-extra/window/index.d.ts

@@ -0,0 +1,2 @@
+import Window from './window.svelte';
+export { Window };

package/dist/components/ui-extra/window/index.js

@@ -0,0 +1,2 @@
+import Window from './window.svelte';
+export { Window };

package/dist/components/ui-extra/window/window.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" module>
+  import type { WithChildren } from 'bits-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  export type WindowPropsWithoutHTML = WithChildren & {
+    contentClass?: string;
+  };
+
+  export type WindowProps = HTMLAttributes<HTMLDivElement> &
+    WindowPropsWithoutHTML;
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+
+  let { children, class: className, contentClass }: WindowProps = $props();
+</script>
+
+<div
+  class={cn(
+    'border-border bg-background aspect-video w-full rounded-lg border',
+    className
+  )}
+>
+  <div class="border-b border-inherit p-4">
+    <div class="flex items-center gap-2">
+      <div class="size-2 rounded-full bg-[#ef4444]"></div>
+      <div class="size-2 rounded-full bg-[#eab308]"></div>
+      <div class="size-2 rounded-full bg-[#22c55e]"></div>
+    </div>
+  </div>
+  <div class={cn('p-4', contentClass)}>
+    {@render children?.()}
+  </div>
+</div>

package/dist/components/ui-extra/window/window.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { WithChildren } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+export type WindowPropsWithoutHTML = WithChildren & {
+    contentClass?: string;
+};
+export type WindowProps = HTMLAttributes<HTMLDivElement> & WindowPropsWithoutHTML;
+declare const Window: import("svelte").Component<WindowProps, {}, "">;
+type Window = ReturnType<typeof Window>;
+export default Window;

package/dist/components/util/datepicker.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import CalendarIcon from '@lucide/svelte/icons/calendar';
+  import {
+    type DateValue,
+    DateFormatter,
+    getLocalTimeZone
+  } from '@internationalized/date';
+  import { cn } from '../../utils.js';
+  import { Button } from '../ui/button/index.js';
+  import { Calendar } from '../ui/calendar/index.js';
+  import * as Popover from '../ui/popover/index.js';
+
+  interface Props {
+    value?: DateValue;
+    class?: string;
+    start?: DateValue;
+    end?: DateValue;
+  }
+
+  let { value = $bindable(), class: className, start, end }: Props = $props();
+
+  const df = new DateFormatter('en-US', {
+    dateStyle: 'long'
+  });
+</script>
+
+<Popover.Root>
+  <Popover.Trigger>
+    {#snippet child({ props })}
+      <Button
+        variant="outline"
+        class={cn(
+          'w-70 cursor-pointer justify-start text-left font-normal',
+          !value && 'text-muted-foreground',
+          className
+        )}
+        {...props}
+      >
+        <CalendarIcon class="mr-2 size-4" />
+        {value ? df.format(value.toDate(getLocalTimeZone())) : 'Select a date'}
+      </Button>
+    {/snippet}
+  </Popover.Trigger>
+  <Popover.Content class="w-auto p-0">
+    <Calendar
+      bind:value
+      type="single"
+      initialFocus
+      minValue={start}
+      maxValue={end}
+      preventDeselect
+    />
+  </Popover.Content>
+</Popover.Root>

package/dist/components/util/datepicker.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type DateValue } from '@internationalized/date';
+interface Props {
+    value?: DateValue;
+    class?: string;
+    start?: DateValue;
+    end?: DateValue;
+}
+declare const Datepicker: import("svelte").Component<Props, {}, "value">;
+type Datepicker = ReturnType<typeof Datepicker>;
+export default Datepicker;

package/dist/components/util/general.d.ts

@@ -0,0 +1,2 @@
+export { ModeWatcher } from 'mode-watcher';
+export { toast, type ToasterProps } from 'svelte-sonner';

package/dist/components/util/general.js

@@ -0,0 +1,2 @@
+export { ModeWatcher } from 'mode-watcher';
+export { toast } from 'svelte-sonner';

package/dist/components/util/simple-avatar.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import * as Avatar from '../ui/avatar/index.js';
+
+  let { src, class: className }: { src: string; class: string } = $props();
+</script>
+
+<Avatar.Root class={className}>
+  <Avatar.Image src={`data:image/webp;base64, ${src}`} alt="Avatar" />
+  <Avatar.Fallback>?</Avatar.Fallback>
+</Avatar.Root>

package/dist/components/util/simple-avatar.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    src: string;
+    class: string;
+};
+declare const SimpleAvatar: import("svelte").Component<$$ComponentProps, {}, "">;
+type SimpleAvatar = ReturnType<typeof SimpleAvatar>;
+export default SimpleAvatar;

package/dist/hooks/is-mac.svelte.d.ts

@@ -0,0 +1,6 @@
+/** Attempts to determine if a user is on a Mac using `navigator.userAgent`. */
+export declare const isMac: boolean;
+/** `⌘` for mac or `Ctrl` for windows */
+export declare const cmdOrCtrl: string;
+/** `⌥` for mac or `Alt` for windows */
+export declare const optionOrAlt: string;

package/dist/hooks/is-mac.svelte.js

@@ -0,0 +1,9 @@
+/*
+    Installed from @ieedan/shadcn-svelte-extras
+*/
+/** Attempts to determine if a user is on a Mac using `navigator.userAgent`. */
+export const isMac = navigator.userAgent.includes('Mac');
+/** `⌘` for mac or `Ctrl` for windows */
+export const cmdOrCtrl = isMac ? '⌘' : 'Ctrl';
+/** `⌥` for mac or `Alt` for windows */
+export const optionOrAlt = isMac ? '⌥' : 'Alt';

package/dist/hooks/is-mobile.svelte.d.ts

@@ -0,0 +1,4 @@
+import { MediaQuery } from 'svelte/reactivity';
+export declare class IsMobile extends MediaQuery {
+    constructor(breakpoint?: number);
+}

package/dist/hooks/is-mobile.svelte.js

@@ -0,0 +1,7 @@
+import { MediaQuery } from 'svelte/reactivity';
+const DEFAULT_MOBILE_BREAKPOINT = 768;
+export class IsMobile extends MediaQuery {
+    constructor(breakpoint = DEFAULT_MOBILE_BREAKPOINT) {
+        super(`max-width: ${breakpoint - 1}px`);
+    }
+}

package/dist/hooks/use-auto-scroll.svelte.d.ts

@@ -0,0 +1,37 @@
+/** Use this on a vertically scrollable container to ensure that it automatically scrolls to the bottom of the content.
+ *
+ * ## Usage
+ * ```svelte
+ * <script lang="ts">
+ *      import { UseAutoScroll } from './use-auto-scroll.svelte';
+ *
+ *      let { children } = $props();
+ *
+ *      const autoScroll = new UseAutoScroll();
+ * </script>
+ *
+ * <div>
+ *      <div bind:this={autoScroll.ref}>
+ *          {@render children?.()}
+ *      </div>
+ *      {#if !autoScroll.isAtBottom}
+ *          <button onclick={() => autoScroll.scrollToBottom()}>
+ *              Scroll To Bottom
+ *          </button>
+ *      {/if}
+ * </div>
+ * ```
+ */
+export declare class UseAutoScroll {
+    #private;
+    private lastScrollHeight;
+    set ref(ref: HTMLElement | undefined);
+    get ref(): HTMLElement | undefined;
+    get scrollY(): number;
+    /** Checks if the container is scrolled to the bottom */
+    get isAtBottom(): boolean;
+    /** Disables auto scrolling until the container is scrolled back to the bottom */
+    disableAutoScroll(): void;
+    /** Scrolls the container to the bottom */
+    scrollToBottom(auto?: boolean): void;
+}

package/dist/hooks/use-auto-scroll.svelte.js

@@ -0,0 +1,91 @@
+/*
+    Installed from @ieedan/shadcn-svelte-extras
+*/
+/** Use this on a vertically scrollable container to ensure that it automatically scrolls to the bottom of the content.
+ *
+ * ## Usage
+ * ```svelte
+ * <script lang="ts">
+ *      import { UseAutoScroll } from './use-auto-scroll.svelte';
+ *
+ *      let { children } = $props();
+ *
+ *      const autoScroll = new UseAutoScroll();
+ * </script>
+ *
+ * <div>
+ *      <div bind:this={autoScroll.ref}>
+ *          {@render children?.()}
+ *      </div>
+ *      {#if !autoScroll.isAtBottom}
+ *          <button onclick={() => autoScroll.scrollToBottom()}>
+ *              Scroll To Bottom
+ *          </button>
+ *      {/if}
+ * </div>
+ * ```
+ */
+export class UseAutoScroll {
+    #ref = $state();
+    #scrollY = $state(0);
+    #userHasScrolled = $state(false);
+    lastScrollHeight = 0;
+    // This sets everything up once #ref is bound
+    set ref(ref) {
+        this.#ref = ref;
+        if (!this.#ref)
+            return;
+        this.lastScrollHeight = this.#ref.scrollHeight;
+        // start from bottom or start position
+        this.#ref.scrollTo(0, this.#scrollY ? this.#scrollY : this.#ref.scrollHeight);
+        this.#ref.addEventListener('scroll', () => {
+            if (!this.#ref)
+                return;
+            this.#scrollY = this.#ref.scrollTop;
+            this.disableAutoScroll();
+        });
+        window.addEventListener('resize', () => {
+            this.scrollToBottom(true);
+        });
+        // should detect when something changed that effected the scroll height
+        const observer = new MutationObserver(() => {
+            if (!this.#ref)
+                return;
+            if (this.#ref.scrollHeight !== this.lastScrollHeight) {
+                this.scrollToBottom(true);
+            }
+            this.lastScrollHeight = this.#ref.scrollHeight;
+        });
+        observer.observe(this.#ref, { childList: true, subtree: true });
+    }
+    get ref() {
+        return this.#ref;
+    }
+    get scrollY() {
+        return this.#scrollY;
+    }
+    /** Checks if the container is scrolled to the bottom */
+    get isAtBottom() {
+        if (!this.#ref)
+            return true;
+        return this.#scrollY + this.#ref.offsetHeight >= this.#ref.scrollHeight;
+    }
+    /** Disables auto scrolling until the container is scrolled back to the bottom */
+    disableAutoScroll() {
+        if (this.isAtBottom) {
+            this.#userHasScrolled = false;
+        }
+        else {
+            this.#userHasScrolled = true;
+        }
+    }
+    /** Scrolls the container to the bottom */
+    scrollToBottom(auto = false) {
+        if (!this.#ref)
+            return;
+        // don't auto scroll if user has scrolled
+        if (auto && this.#userHasScrolled)
+            return;
+        this.#ref.scrollTo(0, this.#ref.scrollHeight);
+    }
+}

package/dist/hooks/use-boolean.svelte.d.ts

@@ -0,0 +1,31 @@
+/** A hook for easy use of boolean values
+ *
+ * ## Usage
+ * ```svelte
+ * <script lang="ts">
+ *      const open = new UseBoolean();
+ * </script>
+ *
+ * <p>Value is: {open.current}</p>
+ * <button onclick={open.toggle}>Toggle</button>
+ * <button onclick={open.setTrue}>Set True</button>
+ * <button onclick={open.setFalse}>Set False</button>
+ * <button onclick={() => {
+ *      open.current = true;
+ * }}>
+ *      Custom
+ * </button>
+ * ```
+ */
+export declare class UseBoolean {
+    #private;
+    constructor(defaultValue?: boolean);
+    /** Toggles the current state */
+    toggle(): void;
+    /** Sets the current state to true */
+    setTrue(): void;
+    /** Sets the current state to false */
+    setFalse(): void;
+    get current(): boolean;
+    set current(val: boolean);
+}