@profidev/pleiades 1.7.0

package/dist/components/ui-extra/password/password.svelte.js

@@ -0,0 +1,169 @@
+import { Context, watch } from 'runed';
+let zxcvbnRunnerPromise = null;
+const loadZxcvbnRunner = async () => {
+    if (zxcvbnRunnerPromise)
+        return zxcvbnRunnerPromise;
+    return Promise.all([
+        import('@zxcvbn-ts/core'),
+        import('@zxcvbn-ts/language-common'),
+        import('@zxcvbn-ts/language-en')
+    ])
+        .then(([core, common, en]) => {
+        core.zxcvbnOptions.setOptions({
+            translations: en.translations,
+            graphs: common.adjacencyGraphs,
+            dictionary: {
+                ...common.dictionary,
+                ...en.dictionary
+            }
+        });
+        return core.zxcvbn;
+    })
+        .catch((error) => {
+        zxcvbnRunnerPromise = null;
+        throw error;
+    });
+};
+const defaultPasswordState = {
+    value: '',
+    copyMounted: false,
+    toggleMounted: false,
+    strengthMounted: false,
+    tainted: false
+};
+class PasswordRootState {
+    opts;
+    passwordState = $state(defaultPasswordState);
+    strength = $state(undefined);
+    strengthLoading = $state(false);
+    #requestId = 0;
+    constructor(opts) {
+        this.opts = opts;
+    }
+    resetStrength() {
+        this.#requestId += 1;
+        this.strength = undefined;
+        this.strengthLoading = false;
+    }
+    async updateStrength() {
+        const password = this.passwordState.value;
+        if (!this.passwordState.strengthMounted || password.length === 0) {
+            this.resetStrength();
+            return;
+        }
+        const requestId = ++this.#requestId;
+        this.strengthLoading = true;
+        try {
+            const zxcvbn = await loadZxcvbnRunner();
+            const result = zxcvbn(password);
+            if (requestId !== this.#requestId)
+                return;
+            this.strength = result;
+        }
+        catch {
+            if (requestId !== this.#requestId)
+                return;
+            this.strength = undefined;
+        }
+        finally {
+            if (requestId === this.#requestId) {
+                this.strengthLoading = false;
+            }
+        }
+    }
+}
+class PasswordInputState {
+    root;
+    opts;
+    constructor(root, opts) {
+        this.root = root;
+        this.opts = opts;
+        watch(() => this.opts.value.current, () => {
+            if (this.root.passwordState.value !== this.opts.value.current) {
+                this.root.passwordState.tainted = true;
+                this.root.passwordState.value = this.opts.value.current;
+                this.root.updateStrength();
+            }
+        });
+        $effect(() => {
+            if (!this.root.passwordState.strengthMounted)
+                return;
+            // if the password is empty, we let the `required` attribute handle the validation
+            if (this.root.passwordState.value !== '' &&
+                !this.root.strengthLoading &&
+                (this.root.strength?.score ?? 0) < this.root.opts.minScore.current) {
+                this.opts.ref.current?.setCustomValidity('Password is too weak');
+            }
+            else {
+                this.opts.ref.current?.setCustomValidity('');
+            }
+        });
+    }
+    props = $derived.by(() => ({
+        'aria-invalid': !this.root.strengthLoading &&
+            (this.root.strength?.score ?? 0) < this.root.opts.minScore.current &&
+            this.root.passwordState.tainted &&
+            this.root.passwordState.strengthMounted
+    }));
+}
+class PasswordToggleVisibilityState {
+    root;
+    constructor(root) {
+        this.root = root;
+        this.root.passwordState.toggleMounted = true;
+        // this way we go back to the correct padding when toggle is unmounted
+        $effect(() => {
+            return () => {
+                this.root.passwordState.toggleMounted = false;
+            };
+        });
+    }
+}
+class PasswordCopyState {
+    root;
+    constructor(root) {
+        this.root = root;
+        this.root.passwordState.copyMounted = true;
+        // this way we go back to the correct padding when copy is unmounted
+        $effect(() => {
+            return () => {
+                this.root.passwordState.copyMounted = false;
+            };
+        });
+    }
+}
+class PasswordStrengthState {
+    root;
+    opts;
+    constructor(root, opts) {
+        this.root = root;
+        this.opts = opts;
+        this.root.passwordState.strengthMounted = true;
+        this.root.updateStrength();
+        $effect(() => {
+            return () => {
+                this.root.passwordState.strengthMounted = false;
+                this.root.resetStrength();
+            };
+        });
+        watch(() => this.root.strength, (strength) => {
+            this.opts.strength.current = strength;
+        });
+    }
+}
+const ctx = new Context('password-root-state');
+export function usePassword(props) {
+    return ctx.set(new PasswordRootState(props));
+}
+export function usePasswordInput(props) {
+    return new PasswordInputState(ctx.get(), props);
+}
+export function usePasswordToggleVisibility() {
+    return new PasswordToggleVisibilityState(ctx.get());
+}
+export function usePasswordCopy() {
+    return new PasswordCopyState(ctx.get());
+}
+export function usePasswordStrength(props) {
+    return new PasswordStrengthState(ctx.get(), props);
+}

package/dist/components/ui-extra/password/types.d.ts

@@ -0,0 +1,25 @@
+import type { WithChildren, WithoutChildren, Meter as MeterPrimitive, Toggle as TogglePrimitive } from 'bits-ui';
+import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
+import type { CopyButtonProps } from '../copy-button/copy-button.svelte';
+import type { ZxcvbnResult } from '@zxcvbn-ts/core';
+export type PasswordRootPropsWithoutHTML = WithChildren<{
+    ref?: HTMLDivElement | null;
+    hidden?: boolean;
+    /** The minimum acceptable score for a password. (0-4)
+     *
+     * @default 3
+     */
+    minScore?: 0 | 1 | 2 | 3 | 4;
+}>;
+export type PasswordRootProps = WithoutChildren<HTMLAttributes<HTMLDivElement>> & PasswordRootPropsWithoutHTML;
+export type PasswordInputPropsWithoutHTML = WithChildren<{
+    ref?: HTMLInputElement | null;
+    value?: string;
+}>;
+export type PasswordInputProps = Omit<WithoutChildren<HTMLInputAttributes>, 'type' | 'files' | 'aria-invalid' | 'value'> & PasswordInputPropsWithoutHTML;
+export type PasswordToggleVisibilityProps = Omit<TogglePrimitive.RootProps, 'children' | 'pressed' | 'aria-label' | 'tabindex'>;
+export type PasswordCopyButtonProps = Omit<CopyButtonProps, 'children' | 'text'>;
+export type PasswordStrengthPropsWithoutHTML = {
+    strength?: ZxcvbnResult;
+};
+export type PasswordStrengthProps = PasswordStrengthPropsWithoutHTML & WithoutChildren<MeterPrimitive.RootProps>;

package/dist/components/ui-extra/password/types.js

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

package/dist/components/ui-extra/phone-input/country-selector.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import * as Popover from '../popover';
+  import Button from '../../../blocks/button.svelte';
+  import * as Command from '../command';
+  import { ScrollArea } from '../scroll-area';
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
+  import { cn } from '../../../blocks/utils.js';
+  import Flag from './flag.svelte';
+  import type { Country, CountryCode } from 'svelte-tel-input/types';
+
+  interface Props {
+    /** List of countries */
+    countries: Country[];
+    disabled?: boolean;
+    selected?: CountryCode | null;
+    onselect?: (val: CountryCode | null) => void;
+    /** Default ordering is alphabetical by country name supply this function to customize the sorting behavior  */
+    order?: (a: Country, b: Country) => number;
+  }
+
+  let {
+    countries,
+    disabled = false,
+    selected = $bindable(null),
+    onselect = undefined,
+    order = (a, b) => {
+      return a.name.localeCompare(b.name);
+    }
+  }: Props = $props();
+
+  let selectedCountry = $derived(countries.find((a) => a.iso2 == selected));
+
+  let open = $state(false);
+  let selectedValue = $state(false);
+
+  function selectCountry(country: Country) {
+    selected = country.iso2;
+    selectedValue = true;
+    open = false;
+    onselect?.(selected);
+  }
+</script>
+
+<Popover.Root bind:open>
+  <Popover.Trigger>
+    {#snippet child({ props })}
+      <Button
+        {...props}
+        type="button"
+        variant="outline"
+        class={cn('flex shrink-0 gap-1 rounded-l-lg rounded-r-none px-3')}
+        {disabled}
+      >
+        <Flag country={selectedCountry} />
+        <ChevronsUpDownIcon
+          class={cn(
+            '-mr-2 h-4 w-4 opacity-50',
+            disabled ? 'hidden' : 'opacity-100'
+          )}
+        />
+      </Button>
+    {/snippet}
+  </Popover.Trigger>
+  <Popover.Content
+    class="w-[300px] p-0"
+    align="start"
+    onCloseAutoFocus={(e) => {
+      if (selectedValue) {
+        selectedValue = false;
+        e.preventDefault();
+      }
+    }}
+  >
+    <Command.Root>
+      <Command.Input placeholder="Search..." />
+      <Command.List>
+        <ScrollArea class="h-72">
+          <Command.Empty>No country found.</Command.Empty>
+          <Command.Group class="overflow-clip">
+            {#each countries.sort(order) as country (country.id)}
+              <Command.Item
+                class="gap-2 [&_.cn-command-item-indicator]:hidden"
+                value={country.name}
+                onSelect={() => selectCountry(country)}
+              >
+                <Flag {country} />
+                <span class="flex-1 text-sm">{country.name}</span>
+                <span class="text-foreground/50 text-sm">
+                  +{country.dialCode}
+                </span>
+                <div class="w-4">
+                  {#if country.iso2 == selected}
+                    <CheckIcon class="phone-input-check-icon size-4" />
+                  {/if}
+                </div>
+              </Command.Item>
+            {/each}
+          </Command.Group>
+        </ScrollArea>
+      </Command.List>
+    </Command.Root>
+  </Popover.Content>
+</Popover.Root>

package/dist/components/ui-extra/phone-input/country-selector.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Country, CountryCode } from 'svelte-tel-input/types';
+interface Props {
+    /** List of countries */
+    countries: Country[];
+    disabled?: boolean;
+    selected?: CountryCode | null;
+    onselect?: (val: CountryCode | null) => void;
+    /** Default ordering is alphabetical by country name supply this function to customize the sorting behavior  */
+    order?: (a: Country, b: Country) => number;
+}
+declare const CountrySelector: import("svelte").Component<Props, {}, "selected">;
+type CountrySelector = ReturnType<typeof CountrySelector>;
+export default CountrySelector;

package/dist/components/ui-extra/phone-input/flag.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { Country } from 'svelte-tel-input/types';
+  import { getFlag } from './flags';
+
+  interface Props {
+    country?: Country | null;
+  }
+
+  let { country = null }: Props = $props();
+</script>
+
+<span
+  class="bg-foreground/20 flex h-4 w-6 shrink-0 overflow-clip rounded-sm [&>svg]:h-4! [&>svg]:w-6!"
+>
+  {#await getFlag(country) then flag}
+    {#if flag}
+      <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+      {@html flag}
+    {/if}
+  {/await}
+</span>

package/dist/components/ui-extra/phone-input/flag.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Country } from 'svelte-tel-input/types';
+interface Props {
+    country?: Country | null;
+}
+declare const Flag: import("svelte").Component<Props, {}, "">;
+type Flag = ReturnType<typeof Flag>;
+export default Flag;

package/dist/components/ui-extra/phone-input/flags.d.ts

@@ -0,0 +1,2 @@
+import type { Country } from 'svelte-tel-input/types';
+export declare function getFlag(country: Country | null): Promise<string | null>;

package/dist/components/ui-extra/phone-input/flags.js

@@ -0,0 +1,10 @@
+import { hasFlag } from 'country-flag-icons';
+let flagIcons = null;
+export async function getFlag(country) {
+    if (!country)
+        return null;
+    if (!hasFlag(country.iso2))
+        return null;
+    flagIcons ??= await import('country-flag-icons/string/3x2');
+    return flagIcons[country.iso2] ?? null;
+}

package/dist/components/ui-extra/phone-input/index.d.ts

@@ -0,0 +1,3 @@
+import PhoneInput, { defaultOptions } from './phone-input.svelte';
+export { PhoneInput, defaultOptions };
+export type { PhoneInputProps } from './types';

package/dist/components/ui-extra/phone-input/index.js

@@ -0,0 +1,2 @@
+import PhoneInput, { defaultOptions } from './phone-input.svelte';
+export { PhoneInput, defaultOptions };

package/dist/components/ui-extra/phone-input/phone-input.svelte

@@ -0,0 +1,68 @@
+<script lang="ts" module>
+  export const defaultOptions: TelInputOptions = {
+    spaces: true,
+    autoPlaceholder: true
+  };
+</script>
+
+<script lang="ts">
+  import CountrySelector from './country-selector.svelte';
+  import { type PhoneInputProps } from './';
+  import { cn } from '../../../blocks/utils.js';
+  import { TelInput, countries } from 'svelte-tel-input';
+  import 'svelte-tel-input/styles/flags.css';
+  import type { TelInputOptions } from 'svelte-tel-input/types';
+
+  let {
+    class: className = undefined,
+    defaultCountry = null,
+    country = $bindable(defaultCountry),
+    options = defaultOptions,
+    placeholder,
+    readonly = false,
+    disabled = false,
+    value = $bindable(''),
+    valid = $bindable(true),
+    detailedValue = $bindable(null),
+    order = undefined,
+    name = undefined,
+    ...rest
+  }: PhoneInputProps = $props();
+
+  let el: HTMLInputElement | undefined = $state();
+
+  function focus() {
+    // sort of an after update kinda thing
+    setTimeout(() => {
+      el?.focus();
+    }, 0);
+  }
+</script>
+
+<div class="flex place-items-center">
+  <CountrySelector
+    {order}
+    {countries}
+    bind:selected={country}
+    onselect={focus}
+  />
+  <TelInput
+    {name}
+    bind:country
+    bind:detailedValue
+    bind:value
+    bind:valid
+    {readonly}
+    {disabled}
+    {placeholder}
+    bind:el
+    {options}
+    class={cn(
+      'border-input border-l-none bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-l-none rounded-r-md border-y border-r px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+      className
+    )}
+    {...rest}
+  />
+</div>

package/dist/components/ui-extra/phone-input/phone-input.svelte.d.ts

@@ -0,0 +1,7 @@
+export declare const defaultOptions: TelInputOptions;
+import { type PhoneInputProps } from './';
+import 'svelte-tel-input/styles/flags.css';
+import type { TelInputOptions } from 'svelte-tel-input/types';
+declare const PhoneInput: import("svelte").Component<PhoneInputProps, {}, "value" | "country" | "valid" | "detailedValue">;
+type PhoneInput = ReturnType<typeof PhoneInput>;
+export default PhoneInput;

package/dist/components/ui-extra/phone-input/types.d.ts

@@ -0,0 +1,16 @@
+import type { Country, CountryCode, DetailedValue, TelInputOptions } from 'svelte-tel-input/types';
+export type PhoneInputProps = {
+    country?: CountryCode | null;
+    defaultCountry?: CountryCode | null;
+    name?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    class?: string;
+    value?: string;
+    valid?: boolean;
+    detailedValue?: Partial<DetailedValue> | null;
+    options?: TelInputOptions;
+    order?: ((a: Country, b: Country) => number) | undefined;
+};

package/dist/components/ui-extra/phone-input/types.js

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

package/dist/components/ui-extra/pm-command/index.d.ts

@@ -0,0 +1,2 @@
+import PMCommand from './pm-command.svelte';
+export { PMCommand };

package/dist/components/ui-extra/pm-command/index.js

@@ -0,0 +1,2 @@
+import PMCommand from './pm-command.svelte';
+export { PMCommand };

package/dist/components/ui-extra/pm-command/pm-command.svelte

@@ -0,0 +1,103 @@
+<script lang="ts" module>
+  import { tv, type VariantProps } from 'tailwind-variants';
+
+  const style = tv({
+    base: 'border-border w-full rounded-lg border',
+    variants: {
+      variant: {
+        default: 'bg-card',
+        secondary: 'bg-secondary/50 border-transparent'
+      }
+    }
+  });
+
+  type Variant = VariantProps<typeof style>['variant'];
+
+  export type PMCommandProps = {
+    variant?: Variant;
+    class?: string;
+    agents?: Agent[];
+    agent?: Agent;
+    command: Command;
+    args: string[];
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+  import type { Command, Agent } from 'package-manager-detector';
+  import { resolveCommand } from 'package-manager-detector/commands';
+  import CopyButton from '../copy-button/copy-button.svelte';
+  import ClipboardIcon from '@lucide/svelte/icons/clipboard';
+  import TerminalIcon from '@lucide/svelte/icons/terminal';
+  import * as Tooltip from '../tooltip';
+  import * as Tabs from '../tabs';
+
+  let {
+    variant = 'default',
+    class: className,
+    command,
+    agents = ['npm', 'pnpm', 'yarn', 'bun'],
+    args,
+    agent = $bindable('npm')
+  }: PMCommandProps = $props();
+
+  const cmd = $derived(resolveCommand(agent, command, args));
+
+  const commandText = $derived(`${cmd?.command} ${cmd?.args.join(' ')}`);
+</script>
+
+<div data-slot="pm-command" class={cn(style({ variant }), className)}>
+  <div
+    class="border-border flex place-items-center justify-between gap-2 border-b py-1 pr-2"
+  >
+    <div class="flex place-items-center gap-2 px-2">
+      <div
+        class="bg-foreground flex size-4 place-items-center justify-center opacity-50"
+      >
+        <TerminalIcon class="text-background size-3" />
+      </div>
+      <Tabs.Root bind:value={agent}>
+        <Tabs.List class="h-auto bg-transparent p-0">
+          {#each agents as pm (pm)}
+            <Tabs.Trigger value={pm} class="h-7 font-mono text-sm font-light">
+              {pm}
+            </Tabs.Trigger>
+          {/each}
+        </Tabs.List>
+      </Tabs.Root>
+    </div>
+    <Tooltip.Provider delayDuration={0}>
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <CopyButton
+              {...props}
+              text={commandText}
+              class="size-6 [&_svg]:size-3"
+            >
+              {#snippet icon()}
+                <ClipboardIcon />
+              {/snippet}
+            </CopyButton>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content>Copy to Clipboard</Tooltip.Content>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  </div>
+  <div class="no-scrollbar overflow-x-auto p-3">
+    <span
+      class="text-muted-foreground font-mono text-sm leading-none font-light text-nowrap"
+    >
+      {commandText}
+    </span>
+  </div>
+</div>
+
+<style>
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+</style>

package/dist/components/ui-extra/pm-command/pm-command.svelte.d.ts

@@ -0,0 +1,30 @@
+import { type VariantProps } from 'tailwind-variants';
+declare const style: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+    };
+}, undefined, "border-border w-full rounded-lg border", {
+    variant: {
+        default: string;
+        secondary: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        secondary: string;
+    };
+}, undefined, "border-border w-full rounded-lg border", unknown, unknown, undefined>>;
+type Variant = VariantProps<typeof style>['variant'];
+export type PMCommandProps = {
+    variant?: Variant;
+    class?: string;
+    agents?: Agent[];
+    agent?: Agent;
+    command: Command;
+    args: string[];
+};
+import type { Command, Agent } from 'package-manager-detector';
+declare const PmCommand: import("svelte").Component<PMCommandProps, {}, "agent">;
+type PmCommand = ReturnType<typeof PmCommand>;
+export default PmCommand;

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

@@ -0,0 +1,9 @@
+import Root from './popover.svelte';
+import Close from './popover-close.svelte';
+import Content from './popover-content.svelte';
+import Description from './popover-description.svelte';
+import Header from './popover-header.svelte';
+import Title from './popover-title.svelte';
+import Trigger from './popover-trigger.svelte';
+import Portal from './popover-portal.svelte';
+export { Root, Content, Description, Header, Title, Trigger, Close, Portal, Root as Popover, Content as PopoverContent, Description as PopoverDescription, Header as PopoverHeader, Title as PopoverTitle, Trigger as PopoverTrigger, Close as PopoverClose, Portal as PopoverPortal };

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

@@ -0,0 +1,11 @@
+import Root from './popover.svelte';
+import Close from './popover-close.svelte';
+import Content from './popover-content.svelte';
+import Description from './popover-description.svelte';
+import Header from './popover-header.svelte';
+import Title from './popover-title.svelte';
+import Trigger from './popover-trigger.svelte';
+import Portal from './popover-portal.svelte';
+export { Root, Content, Description, Header, Title, Trigger, Close, Portal, 
+//
+Root as Popover, Content as PopoverContent, Description as PopoverDescription, Header as PopoverHeader, Title as PopoverTitle, Trigger as PopoverTrigger, Close as PopoverClose, Portal as PopoverPortal };

package/dist/components/ui-extra/popover/popover-close.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Popover as PopoverPrimitive } from 'bits-ui';
+
+  let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps =
+    $props();
+</script>
+
+<PopoverPrimitive.Close bind:ref data-slot="popover-close" {...restProps} />

package/dist/components/ui-extra/popover/popover-close.svelte.d.ts

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