@dvcol/neo-svelte 0.1.2 → 0.1.4

package/dist/inputs/NeoFilePickerCard.svelte

@@ -0,0 +1,314 @@
+<script lang="ts">
+  import { flip } from 'svelte/animate';
+  import { fade } from 'svelte/transition';
+
+  import type { NeoFilePickerCardProps } from './neo-file-picker.model.js';
+
+  import NeoButton from '../buttons/NeoButton.svelte';
+  import NeoCard from '../cards/NeoCard.svelte';
+  import IconAdd from '../icons/IconAdd.svelte';
+  import IconCircleLoading from '../icons/IconCircleLoading.svelte';
+  import IconClear from '../icons/IconClear.svelte';
+  import IconDownload from '../icons/IconDownload.svelte';
+  import IconPencil from '../icons/IconPencil.svelte';
+  import NeoAffix from './common/NeoAffix.svelte';
+  import NeoLabel from './common/NeoLabel.svelte';
+  import { enterDefaultTransition, leaveDefaultFadeTransition } from '../utils/transition.utils.js';
+
+  /* eslint-disable prefer-const -- necessary for binding checked */
+  let {
+    // Snippets
+    children,
+    label,
+
+    // States
+    ref = $bindable(),
+    hovered = $bindable(false),
+    focused = $bindable(false),
+
+    files,
+    valid,
+    clearable,
+    dragging,
+    multiple,
+    append,
+    placeholder,
+    dropText = placeholder,
+    detailText,
+
+    required,
+    loading,
+    rounded,
+    disabled,
+    skeleton,
+
+    // Style
+    maxHeight = '20rem',
+
+    // Events
+    onClear,
+    onRemove,
+    onEdit,
+
+    // Other props
+    labelRef = $bindable(),
+    labelProps,
+    addButtonProps,
+    editButtonProps,
+    removeButtonProps,
+
+    ...rest
+  }: NeoFilePickerCardProps = $props();
+  /* eslint-enable prefer-const */
+
+  const detail = $derived(detailText || `${files?.length ?? 0} file${files?.length !== 1 ? 's' : ''}`);
+
+  const close = $derived(clearable && !!files?.length && (hovered || focused));
+</script>
+
+{#snippet labelGroup()}
+  <div class="neo-expanded-count" class:neo-label={label}>
+    <NeoLabel bind:ref={labelRef} {label} {disabled} onclick={e => e.preventDefault()} {...labelProps}>
+      <span class="neo-expanded-detail">{detail}</span>
+    </NeoLabel>
+
+    <NeoAffix
+      {loading}
+      {valid}
+      {close}
+      {skeleton}
+      {disabled}
+      size="1.375rem"
+      closeProps={{
+        onclick: onClear,
+      }}
+    />
+  </div>
+{/snippet}
+
+<NeoCard
+  bind:ref
+  bind:hovered
+  bind:focused
+  {rounded}
+  {disabled}
+  {skeleton}
+  out={leaveDefaultFadeTransition}
+  flex="1 1 auto"
+  {...rest}
+  class={['neo-file-picker-card', rest?.class]}
+>
+  {#if children}
+    {@render children({
+      dragging,
+      multiple,
+      append,
+      files,
+    })}
+  {:else if files?.length}
+    {@render labelGroup()}
+    <div class="neo-expanded-list" class:neo-rounded={rounded} style:--neo-file-picker-card-max-height={maxHeight}>
+      <div class="neo-expanded-scroll">
+        {#each files as file, i (file)}
+          <div class="neo-file" transition:fade={{ duration: 200 }} animate:flip={{ duration: 200, delay: 100 }}>
+            <span class="neo-file-name" title={file.name}>{file.name}</span>
+            {#if clearable}
+              <span class="neo-file-remove">
+                <NeoButton
+                  text
+                  rounded
+                  {disabled}
+                  onclickcapture={e => onRemove?.(i, e)}
+                  title="Remove file"
+                  aria-label="Remove file"
+                  {...removeButtonProps}
+                  class={['neo-file-remove-button', removeButtonProps?.class]}
+                >
+                  {#snippet icon()}
+                    <IconClear width="1rem" height="1rem" scale="1.5" stroke="1" />
+                  {/snippet}
+                </NeoButton>
+              </span>
+            {/if}
+          </div>
+        {/each}
+      </div>
+    </div>
+    <div class="neo-expanded-edit">
+      <span>{placeholder}</span>
+      <NeoButton {disabled} rounded text onclick={onEdit} title="Edit files" aria-label="Edit files" {...editButtonProps}>
+        {#snippet icon()}
+          <IconPencil width="1.25rem" height="1.25rem" scale="1" />
+        {/snippet}
+      </NeoButton>
+    </div>
+  {:else}
+    {#if label}
+      {@render labelGroup()}
+    {/if}
+    <div
+      role="none"
+      class="neo-expanded-empty"
+      class:neo-dragging={dragging}
+      class:neo-rounded={rounded}
+      class:neo-disabled={disabled}
+      class:neo-label={label}
+      onclick={onEdit}
+      in:fade={enterDefaultTransition}
+    >
+      <div class="neo-expanded-button">
+        <NeoButton aria-label="Add files" title="Add files" text rounded {skeleton} {disabled} onclick={onEdit} {...addButtonProps}>
+          {#snippet icon()}
+            {#if dragging}
+              <IconDownload width="2.5rem" height="2.5rem" scale="1.25" stroke="0.5" />
+            {:else if loading}
+              <IconCircleLoading width="2.5rem" height="2.5rem" scale="1" />
+            {:else}
+              <IconAdd width="2.5rem" height="2.5rem" scale="1" stroke="0.5" />
+            {/if}
+          {/snippet}
+        </NeoButton>
+      </div>
+      <div class="neo-expanded-placeholder" style:min-width="max({dropText?.length ?? 0}ch,{placeholder?.length ?? 0}ch)">
+        {#if dragging}
+          <span class="neo-expanded-placeholder-drop">{dropText}</span>
+        {:else}
+          <span class="neo-expanded-placeholder-select">{placeholder}</span>
+        {/if}
+      </div>
+    </div>
+  {/if}
+</NeoCard>
+
+<style>.neo-expanded-placeholder, .neo-expanded-button {
+  align-self: center;
+  width: fit-content;
+}
+.neo-expanded-placeholder {
+  text-align: center;
+}
+.neo-expanded-empty, .neo-expanded-scroll {
+  min-width: var(--neo-file-picker-card-min-width);
+}
+.neo-expanded-empty {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 1rem;
+  cursor: pointer;
+  transition: color 0.3s ease;
+}
+.neo-expanded-empty::before {
+  position: absolute;
+  margin: -0.5rem;
+  border: var(--neo-border-width) dashed var(--neo-grey-soft);
+  border-radius: var(--neo-border-radius);
+  transition: margin 0.3s ease;
+  content: "";
+  inset: 0;
+}
+.neo-expanded-empty.neo-rounded::before {
+  border-radius: var(--neo-border-radius-md);
+}
+.neo-expanded-empty.neo-disabled {
+  cursor: no-drop;
+}
+.neo-expanded-empty.neo-dragging::before {
+  margin: -0.25rem;
+}
+.neo-expanded-empty.neo-label {
+  margin-top: 0.25rem;
+}
+.neo-expanded-edit, .neo-expanded-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.neo-expanded-edit {
+  margin-top: 0.25rem;
+}
+.neo-expanded-count {
+  --neo-label-margin: 0;
+  --neo-label-padding: 0;
+}
+.neo-expanded-count.neo-label {
+  margin-bottom: 0.5rem;
+}
+.neo-expanded-count.neo-label .neo-expanded-detail {
+  color: var(--neo-text-color-secondary);
+  font-size: var(--neo-font-size-sm);
+  line-height: var(--neo-line-height-sm);
+}
+.neo-expanded-list {
+  display: inline-flex;
+  flex: 1 1 auto;
+  margin: 0 var(--neo-shadow-margin, 0.625rem);
+  padding: 0 0.5rem;
+  border-radius: var(--neo-border-radius);
+  box-shadow: var(--neo-box-shadow-inset-1);
+}
+.neo-expanded-list.neo-rounded {
+  border-radius: var(--neo-border-radius-md);
+}
+.neo-expanded-list .neo-file {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: color 0.1s ease;
+}
+.neo-expanded-list .neo-file-name {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.neo-expanded-list .neo-file-remove {
+  flex: 0 0 auto;
+}
+.neo-expanded-list .neo-file:hover {
+  color: var(--neo-text-color-highlight);
+}
+.neo-expanded-scroll {
+  --neo-scrollbar-button-height: 0.375rem;
+  position: relative;
+  display: inline-flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--neo-gap-xxs);
+  max-height: var(--neo-file-picker-card-max-height);
+  padding: 0.625rem 0.25rem;
+  overflow: auto;
+  mask-image: linear-gradient(to top, transparent, transparent 1rem, black 1rem, black calc(100% - 1rem), transparent), linear-gradient(to bottom, transparent, transparent 1rem, black 1rem, black calc(100% - 1rem), transparent);
+  scrollbar-gutter: stable both-edges;
+}
+.neo-expanded-scroll::-webkit-scrollbar {
+  width: var(--neo-scrollbar-width, 0.375rem);
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+.neo-expanded-scroll::-webkit-scrollbar-button {
+  height: var(--neo-scrollbar-button-height, 2px);
+}
+.neo-expanded-scroll::-webkit-scrollbar-thumb {
+  background-color: var(--neo-scrollbar-color);
+  border: none;
+  border-radius: var(--neo-border-radius);
+  cursor: pointer;
+}
+.neo-expanded-scroll::-webkit-scrollbar-corner {
+  background-color: transparent;
+  background-clip: border-box;
+  border: none;
+  outline: none;
+}
+.neo-expanded-scroll::-webkit-resizer {
+  background: url("../assets/neo-icon-resizer-bottom-right.svg") no-repeat bottom;
+  background-clip: border-box;
+}</style>

package/dist/inputs/NeoFilePickerCard.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { NeoFilePickerCardProps } from './neo-file-picker.model.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NeoFilePickerCard: $$__sveltets_2_IsomorphicComponent<NeoFilePickerCardProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "ref" | "hovered" | "focused" | "labelRef">;
+type NeoFilePickerCard = InstanceType<typeof NeoFilePickerCard>;
+export default NeoFilePickerCard;

package/dist/inputs/NeoNumberStep.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+  import type { FocusEventHandler } from 'svelte/elements';
+  import type { NeoButtonProps } from '../buttons/neo-button.model.js';
+  import type { NeoNumberStepProps } from './neo-number-step.model.js';
+
+  import NeoButton from '../buttons/NeoButton.svelte';
+  import IconAdd from '../icons/IconAdd.svelte';
+  import IconMinus from '../icons/IconMinus.svelte';
+  import NeoInput from './common/NeoInput.svelte';
+  import { toTransition, toTransitionProps } from '../utils/action.utils.js';
+  import { computeButtonShadows, DefaultShadowElevation } from '../utils/shadow.utils.js';
+
+  /* eslint-disable prefer-const -- necessary for binding checked */
+  let {
+    // Snippets
+    label,
+
+    // State
+    defaultValue = 0,
+    ref = $bindable(),
+    value = $bindable(defaultValue),
+    valid = $bindable(),
+    dirty = $bindable(false),
+    touched = $bindable(false),
+    hovered = $bindable(false),
+    focused = $bindable(false),
+    type = 'number',
+    placeholder = '0',
+    center = !label,
+
+    // Transition
+    in: inAction,
+    out: outAction,
+    transition: transitionAction,
+
+    // Events
+    onStepUp,
+    onStepDown,
+
+    // Other props
+    labelRef = $bindable(),
+    buttonProps,
+    groupProps,
+    containerTag = 'div',
+    containerProps,
+    ...rest
+  }: NeoNumberStepProps = $props();
+  /* eslint-enable prefer-const */
+
+  const increment = (e: MouseEvent) => {
+    if (!ref || ref?.disabled) return;
+    ref.stepUp();
+    ref.dispatchEvent(
+      new InputEvent('input', {
+        bubbles: true,
+        cancelable: false,
+        data: ref?.valueAsNumber?.toString(),
+        inputType: 'stepUp',
+      }),
+    );
+    onStepUp?.(e, ref.valueAsNumber, ref.step);
+  };
+
+  const decrement = (e: MouseEvent) => {
+    if (!ref || ref?.disabled) return;
+    ref.stepDown();
+    ref.dispatchEvent(
+      new InputEvent('input', {
+        bubbles: true,
+        cancelable: false,
+        data: ref?.valueAsNumber?.toString(),
+        inputType: 'stepDown',
+      }),
+    );
+    onStepDown?.(e, ref.valueAsNumber, ref.step);
+  };
+
+  const elevation = $derived(rest?.elevation ?? DefaultShadowElevation);
+  const text = $derived(elevation >= 0 || !rest.pressed);
+  const style = $derived(computeButtonShadows(elevation, text));
+  const buttonsProps = $derived<NeoButtonProps>({
+    skeleton: rest.skeleton,
+    disabled: rest.disabled,
+    rounded: rest.rounded,
+    glass: rest.glass,
+    start: rest.start,
+    text,
+    style,
+    ...buttonProps,
+  });
+
+  let timeout: ReturnType<typeof setTimeout>;
+  const onFocusIn: FocusEventHandler<HTMLDivElement> = e => {
+    clearTimeout(timeout);
+    containerProps?.onfocusin?.(e);
+  };
+  const onFocusOut: FocusEventHandler<HTMLDivElement> = e => {
+    timeout = setTimeout(() => {
+      ref?.validate?.();
+      containerProps?.onfocusout?.(e);
+    }, 0);
+  };
+
+  const affix = $derived(rest.clearable || rest.loading !== undefined || rest.validation);
+
+  const inFn = $derived(toTransition(inAction ?? transitionAction));
+  const inProps = $derived(toTransitionProps(inAction ?? transitionAction));
+  const outFn = $derived(toTransition(outAction ?? transitionAction));
+  const outProps = $derived(toTransitionProps(outAction ?? transitionAction));
+</script>
+
+{#snippet before()}
+  <NeoButton aria-label="Decrement number" title="Decrement number" onclick={decrement} {...buttonsProps}>
+    {#snippet icon()}
+      <IconMinus width="1.25rem" height="1.25rem" />
+    {/snippet}
+  </NeoButton>
+{/snippet}
+
+{#snippet after()}
+  <NeoButton aria-label="Increment number" title="Increment number" onclick={increment} {...buttonsProps}>
+    {#snippet icon()}
+      <IconAdd width="1.25rem" height="1.25rem" />
+    {/snippet}
+  </NeoButton>
+{/snippet}
+
+<svelte:element
+  this={containerTag}
+  class:neo-number-step={true}
+  class:neo-label={label}
+  class:neo-center={center}
+  class:neo-affix={affix}
+  out:outFn={outProps}
+  in:inFn={inProps}
+  {...containerProps}
+  onfocusin={onFocusIn}
+  onfocusout={onFocusOut}
+>
+  <NeoInput
+    bind:ref
+    bind:labelRef
+    bind:value
+    bind:valid
+    bind:dirty
+    bind:touched
+    bind:hovered
+    bind:focused
+    {type}
+    {placeholder}
+    {before}
+    {after}
+    {label}
+    {defaultValue}
+    containerProps={groupProps}
+    {...rest}
+  />
+</svelte:element>
+
+<style>.neo-number-step :global(.neo-input[type="number"]) {
+  /* Hide arrows -Firefox */
+  appearance: textfield;
+  /* Hide arrows - Chrome, Safari, Edge, Opera */
+}
+.neo-number-step :global(.neo-input[type="number"])::-webkit-outer-spin-button, .neo-number-step :global(.neo-input[type="number"])::-webkit-inner-spin-button {
+  margin: 0;
+  appearance: none;
+}
+.neo-number-step.neo-center :global(.neo-input) {
+  text-align: center;
+}
+.neo-number-step.neo-center.neo-affix :global(.neo-input-before) {
+  margin-right: 1.75rem;
+}</style>

package/dist/inputs/NeoNumberStep.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { NeoNumberStepProps } from './neo-number-step.model.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const NeoNumberStep: $$__sveltets_2_IsomorphicComponent<NeoNumberStepProps, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value" | "ref" | "hovered" | "focused" | "touched" | "dirty" | "valid" | "labelRef">;
+type NeoNumberStep = InstanceType<typeof NeoNumberStep>;
+export default NeoNumberStep;

package/dist/inputs/NeoPassword.svelte

@@ -1,31 +1,100 @@
-<script lang="ts">
-  import type { NeoInputProps } from './neo-input.model.js';
+<script lang="ts" generics="T extends boolean = false">
+  import type { NeoButtonProps } from '../buttons/index.js';
+  import type { NeoPasswordProps } from './neo-password.model.js';
 
+  import NeoButton from '../buttons/NeoButton.svelte';
   import IconWatch from '../icons/IconWatch.svelte';
   import IconWatchOff from '../icons/IconWatchOff.svelte';
-  import NeoInput from './NeoInput.svelte';
+  import NeoPin from './NeoPin.svelte';
+  import NeoInput from './common/NeoInput.svelte';
+  import { computeButtonShadows, getDefaultElevation } from '../utils/shadow.utils.js';
 
-  const { type = 'password', placeholder = 'Enter your password', ...rest }: NeoInputProps = $props();
+  /* eslint-disable prefer-const -- necessary for binding checked */
+  let {
+    // Styles
+    pin,
+
+    // State
+    ref = $bindable(),
+    value = $bindable(),
+    valid = $bindable(),
+    dirty = $bindable(false),
+    touched = $bindable(false),
+    hovered = $bindable(false),
+    focused = $bindable(false),
+    type = 'password',
+    placeholder = pin ? undefined : 'Enter your password',
+
+    // Other props
+    labelRef = $bindable(),
+    buttonProps,
+    ...rest
+  }: NeoPasswordProps<T> = $props();
+  /* eslint-enable prefer-const */
 
   let show = $state(false);
-  const toggle = () => {
-    show = !show;
-  };
 
   const _type = $derived(show ? 'text' : type);
-  const _suffixProps = $derived({
-    onclick: toggle,
+
+  const elevation = $derived(rest?.elevation ?? getDefaultElevation(rest?.pressed));
+  const text = $derived(elevation >= 0 || !rest.pressed || pin);
+  const style = $derived(computeButtonShadows(elevation, text));
+  const afterProps = $derived<NeoButtonProps>({
     'aria-label': 'Toggle password visibility',
-    ...rest.suffixProps,
+    title: 'Toggle password visibility',
+    skeleton: rest.skeleton,
+    disabled: rest.disabled,
+    rounded: rest.rounded,
+    glass: rest.glass,
+    start: rest.start,
+    text,
+    style,
+    ...buttonProps,
+    toggle: true,
+    class: ['neo-password-toggle', buttonProps?.class],
   });
 </script>
 
-{#snippet suffix()}
-  {#if show}
-    <IconWatch width="1.75rem" height="1.75rem" />
-  {:else}
-    <IconWatchOff width="1.75rem" height="1.75rem" />
-  {/if}
+{#snippet after()}
+  <NeoButton bind:checked={show} {...afterProps}>
+    {#snippet icon()}
+      {#if show}
+        <IconWatchOff width="1.25rem" height="1.25rem" scale="var(--neo-input-icon-scale, 1.125)" />
+      {:else}
+        <IconWatch width="1.25rem" height="1.25rem" scale="var(--neo-input-icon-scale, 1.125)" />
+      {/if}
+    {/snippet}
+  </NeoButton>
 {/snippet}
 
-<NeoInput type={_type} {placeholder} {suffix} suffixProps={_suffixProps} {...rest} />
+{#if pin}
+  <NeoPin
+    bind:ref
+    bind:labelRef
+    bind:value
+    bind:valid
+    bind:dirty
+    bind:touched
+    bind:hovered
+    bind:focused
+    type={_type}
+    {placeholder}
+    {after}
+    {...rest}
+  />
+{:else}
+  <NeoInput
+    bind:ref
+    bind:labelRef
+    bind:value
+    bind:valid
+    bind:dirty
+    bind:touched
+    bind:hovered
+    bind:focused
+    type={_type}
+    {placeholder}
+    {after}
+    {...rest}
+  />
+{/if}

package/dist/inputs/NeoPassword.svelte.d.ts

@@ -1,19 +1,22 @@
-import type { NeoInputProps } from './neo-input.model.js';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
+import type { NeoPasswordProps } from './neo-password.model.js';
+declare class __sveltets_Render<T extends boolean = false> {
+    props(): NeoPasswordProps<T>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
     };
-    z_$$bindings?: Bindings;
+    slots(): {};
+    bindings(): "value" | "ref" | "hovered" | "focused" | "touched" | "dirty" | "valid" | "labelRef";
+    exports(): {};
 }
-declare const NeoPassword: $$__sveltets_2_IsomorphicComponent<NeoInputProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type NeoPassword = InstanceType<typeof NeoPassword>;
+interface $$IsomorphicComponent {
+    new <T extends boolean = false>(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 extends boolean = false>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {
+        $$events?: ReturnType<__sveltets_Render<T>['events']>;
+    }): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const NeoPassword: $$IsomorphicComponent;
+type NeoPassword<T extends boolean = false> = InstanceType<typeof NeoPassword<T>>;
 export default NeoPassword;