@flightlesslabs/dodo-ui 0.6.6 → 0.7.1

package/dist/stories/developer tools/components/UtilityButton/UtilityButton.svelte

@@ -1,5 +1,8 @@
-<script lang="ts">let { children, size = 'normal', name, id, title, class: className = '', disabled = false, onclick, ref = $bindable(), } = $props();
-export {};
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">"use strict";
+let { children, size = 'normal', name, id, title, class: className = '', disabled = false, onclick, ref = $bindable(), } = $props();
 </script>
 
 <button

package/dist/stories/developer tools/components/UtilityButton/UtilityButton.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentSize } from '../../../../types/size.js';
 import type { Snippet } from 'svelte';
 import type { MouseEventHandler } from 'svelte/elements';
-interface UtilityButtonProps {
+export interface UtilityButtonProps {
     /** Button contents goes here*/
     children?: Snippet;
     /** Button ref */

package/dist/stories/developer tools/directives/clickOutside/clickOutside.d.ts

@@ -0,0 +1,3 @@
+export declare function clickOutside(node: Element, callback: () => void): {
+    destroy(): void;
+};

package/dist/stories/developer tools/directives/clickOutside/clickOutside.js

@@ -0,0 +1,14 @@
+export function clickOutside(node, callback) {
+    const handleClick = (event) => {
+        const target = event.target;
+        if (node && !node.contains(target) && !event.defaultPrevented) {
+            callback();
+        }
+    };
+    document.addEventListener('click', handleClick, true);
+    return {
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        },
+    };
+}

package/dist/stories/developer tools/directives/clickOutside/index.mdx

@@ -0,0 +1,25 @@
+import { Source } from '@storybook/blocks';
+
+# Click Outside
+
+Event that fires after clicking outside the target component
+
+<Source
+  dark
+  language="js"
+  code={`
+import { clickOutside } '@flightlesslabs/dodo-ui';
+`}
+/>
+
+Attach it to a component
+
+<Source
+  dark
+  language="js"
+  code={`
+<div
+  use:clickOutside={onClickOutside}
+  ...
+`}
+/>

package/dist/styles/_z-index.css

@@ -0,0 +1,9 @@
+:root {
+  /* zIndex */
+  --dodo-ui-z-index-0: 0;
+  --dodo-ui-z-index-1: 1;
+  --dodo-ui-z-index-2: 100;
+  --dodo-ui-z-index-3: 1000;
+  --dodo-ui-z-index-4: 5000;
+  --dodo-ui-z-index-5: 5001;
+}

package/dist/styles/global.css

@@ -2,6 +2,7 @@
 @import '_colors-base.css';
 @import '_colors.css';
 @import '_space.css';
+@import '_z-index.css';
 @import '_breakpoint.css';
 @import '_shadow.css';
 @import '_components.css';

package/dist/types/position.d.ts

@@ -0,0 +1,4 @@
+export type PositionY = 'top' | 'middle' | 'bottom';
+export type PositionX = 'left' | 'center' | 'right';
+export declare const positionYArray: PositionY[];
+export declare const positionXArray: PositionX[];

package/dist/types/position.js

@@ -0,0 +1,2 @@
+export const positionYArray = ['top', 'bottom'];
+export const positionXArray = ['left', 'center', 'right'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.6.6",
+  "version": "0.7.1",
   "scripts": {
     "build": "vite build && pnpm run prepack",
     "preview": "vite preview",
@@ -68,7 +68,7 @@
     "@vitest/coverage-v8": "^3.1.4",
     "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-svelte": "^3.8.1",
+    "eslint-plugin-svelte": "^3.9.0",
     "globals": "^16.1.0",
     "playwright": "^1.52.0",
     "prettier": "^3.5.3",
@@ -77,7 +77,7 @@
     "sass": "^1.89.0",
     "storybook": "^8.6.14",
     "storybook-dark-mode": "^4.0.2",
-    "svelte": "^5.31.1",
+    "svelte": "^5.32.1",
     "svelte-check": "^4.2.1",
     "svelte-preprocess": "^6.0.3",
     "typescript": "^5.8.3",

package/src/lib/index.ts

@@ -12,11 +12,33 @@ export type { ComponentSize } from './types/size.js';
 
 export type { ComponentWeight } from './types/weight.js';
 
+export type { PositionY, PositionX } from './types/position.js';
+
+/** developer tools: directives: clickOutside */
+export { clickOutside } from '$lib/stories/developer tools/directives/clickOutside/clickOutside.js';
+
 /** developer tools: components: UtilityButton */
 export { default as UtilityButton } from '$lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte';
+export type { UtilityButtonProps } from '$lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte';
 
 /** developer tools: components: InputEnclosure */
 export { default as InputEnclosure } from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
+export type { InputEnclosureProps } from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
+
+/** developer tools: components: DynamicInput */
+export { default as DynamicInput } from '$lib/stories/developer tools/components/DynamicInput/DynamicInput.svelte';
+export type {
+  DynamicInputVariant,
+  DynamicInputProps,
+  DynamicInputClickEvent,
+  DynamicInputFocusEvent,
+} from '$lib/stories/developer tools/components/DynamicInput/DynamicInput.svelte';
+
+/** developer tools: components: Popper */
+export { default as Popper } from '$lib/stories/developer tools/components/Popper/Popper.svelte';
+export type { PopperProps } from '$lib/stories/developer tools/components/Popper/Popper.svelte';
+export { default as PopperPopup } from '$lib/stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte';
+export type { PopperPopupProps } from '$lib/stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte';
 
 /** Form: Button */
 export { default as Button } from '$lib/stories/components/Form/Button/Button.svelte';
@@ -24,6 +46,8 @@ export type {
   ButtonLinkTarget,
   ButtonLinkReferrerpolicy,
   ButtonType,
+  ButtonProps,
+  ButtonClickEvent,
 } from '$lib/stories/components/Form/Button/Button.svelte';
 
 /** Form: TextInput */
@@ -32,28 +56,45 @@ export type {
   TextInputType,
   TextInputFocusEvent,
   TextInputClipboardEvent,
+  TextInputInputEvent,
+  TextInputProps,
 } from '$lib/stories/components/Form/TextInput/TextInput.svelte';
 
 /** Form: PasswordInput */
 export { default as PasswordInput } from '$lib/stories/components/Form/PasswordInput/PasswordInput.svelte';
-export type { PasswordInputToggleEvent } from '$lib/stories/components/Form/PasswordInput/PasswordInput.svelte';
+export type {
+  PasswordInputToggleEvent,
+  PasswordInputProps,
+} from '$lib/stories/components/Form/PasswordInput/PasswordInput.svelte';
 
 /** Form: Label */
 export { default as Label } from '$lib/stories/components/Form/Label/Label.svelte';
+export type { LabelProps } from '$lib/stories/components/Form/Label/Label.svelte';
 
 /** Form: FormControl */
 export { default as FormControl } from '$lib/stories/components/Form/FormControl/FormControl.svelte';
+export type { FormControlProps } from '$lib/stories/components/Form/FormControl/FormControl.svelte';
 
 /** Form: Message */
 export { default as Message } from '$lib/stories/components/Form/Message/Message.svelte';
-
-/** Form: SimpleSelect */
-export { default as SimpleSelect } from '$lib/stories/components/Form/SimpleSelect/SimpleSelect.svelte';
-export type {
-  SimpleSelectFocusEvent,
-  SimpleSelectOption,
-} from '$lib/stories/components/Form/SimpleSelect/SimpleSelect.svelte';
+export type { MessageProps } from '$lib/stories/components/Form/Message/Message.svelte';
 
 /** Layout: Paper */
 export { default as Paper } from '$lib/stories/components/Layout/Paper/Paper.svelte';
-export type { PaperColor } from '$lib/stories/components/Layout/Paper/Paper.svelte';
+export type { PaperColor, PaperProps } from '$lib/stories/components/Layout/Paper/Paper.svelte';
+
+/** Layout: Separator */
+export { default as Separator } from '$lib/stories/components/Layout/Separator/Separator.svelte';
+export type {
+  SeparatorProps,
+  SeparatorOrientation,
+} from '$lib/stories/components/Layout/Separator/Separator.svelte';
+
+/** Layout: Menu */
+export { default as Menu } from '$lib/stories/components/Layout/Menu/Menu.svelte';
+export type { MenuProps } from '$lib/stories/components/Layout/Menu/Menu.svelte';
+export { default as MenuItem } from '$lib/stories/components/Layout/Menu/MenuItem/MenuItem.svelte';
+export type {
+  MenuItemType,
+  MenuItemProps,
+} from '$lib/stories/components/Layout/Menu/MenuItem/MenuItem.svelte';

package/src/lib/stories/components/Form/Button/Button.svelte

@@ -1,4 +1,12 @@
 <script lang="ts" module>
+  import type { ComponentColor } from '$lib/types/colors.js';
+  import type { ComponentRoundness } from '$lib/types/roundness.js';
+  import type { ComponentSize } from '$lib/types/size.js';
+  import type { ComponentWeight } from '$lib/types/weight.js';
+
+  import type { Snippet } from 'svelte';
+  import type { MouseEventHandler } from 'svelte/elements';
+
   export type ButtonLinkTarget =
     | '_self'
     | '_blank'
@@ -10,18 +18,12 @@
   export type ButtonLinkReferrerpolicy = ReferrerPolicy | undefined | null;
   export type ButtonType = 'button' | 'submit';
   export const buttonTypeArray: ButtonType[] = ['button', 'submit'];
-</script>
 
-<script lang="ts">
-  import type { ComponentColor } from '$lib/types/colors.js';
-  import type { ComponentRoundness } from '$lib/types/roundness.js';
-  import type { ComponentSize } from '$lib/types/size.js';
-  import type { ComponentWeight } from '$lib/types/weight.js';
+  export type ButtonClickEvent = MouseEvent & {
+    currentTarget: EventTarget & HTMLButtonElement;
+  };
 
-  import type { Snippet } from 'svelte';
-  import type { MouseEventHandler } from 'svelte/elements';
-
-  interface ButtonProps {
+  export interface ButtonProps {
     /** Button contents goes here */
     children?: Snippet;
     /** Button ref */
@@ -78,7 +80,9 @@
     /** Link button: referrerpolicy  */
     referrerpolicy?: ButtonLinkReferrerpolicy;
   }
+</script>
 
+<script lang="ts">
   let {
     children,
     type = 'button',

package/src/lib/stories/components/Form/FormControl/FormControl.svelte

@@ -1,9 +1,7 @@
-<script lang="ts">
+<script lang="ts" module>
   import type { Snippet } from 'svelte';
-  import Label from '../Label/Label.svelte';
-  import Message from '../Message/Message.svelte';
 
-  interface FormControlProps {
+  export interface FormControlProps {
     /** FormControl contents goes here */
     children?: Snippet;
     /** Label for FormControl */
@@ -19,6 +17,11 @@
     /** Custom css class*/
     class?: string;
   }
+</script>
+
+<script lang="ts">
+  import Label from '../Label/Label.svelte';
+  import Message from '../Message/Message.svelte';
 
   let {
     children,

package/src/lib/stories/components/Form/Label/Label.svelte

@@ -1,7 +1,7 @@
-<script lang="ts">
+<script lang="ts" module>
   import type { Snippet } from 'svelte';
 
-  interface LabelProps {
+  export interface LabelProps {
     /** Label contents goes here */
     children?: Snippet;
     /** Label ref */
@@ -13,7 +13,9 @@
     /** Custom css class*/
     class?: string;
   }
+</script>
 
+<script lang="ts">
   let {
     children,
     class: className = '',

package/src/lib/stories/components/Form/Message/Message.svelte

@@ -1,11 +1,11 @@
-<script lang="ts">
+<script lang="ts" module>
   import type { ComponentColor } from '$lib/types/colors.js';
 
   import type { ComponentSize } from '$lib/types/size.js';
 
   import type { Snippet } from 'svelte';
 
-  interface MessageProps {
+  export interface MessageProps {
     /** Message contents goes here */
     children?: Snippet;
     /** Message ref */
@@ -17,7 +17,9 @@
     /** Custom css class*/
     class?: string;
   }
+</script>
 
+<script lang="ts">
   let {
     children,
     class: className = '',

package/src/lib/stories/components/Form/PasswordInput/PasswordInput.svelte

@@ -1,11 +1,6 @@
 <script lang="ts" module>
-  export type PasswordInputToggleEvent = {
-    event: Event;
-    toggle: boolean;
-  };
-</script>
-
-<script lang="ts">
+  import type { ComponentSize } from '$lib/types/size.js';
+  import type { ComponentRoundness } from '$lib/types/roundness.js';
   import type { Snippet } from 'svelte';
   import type {
     ChangeEventHandler,
@@ -13,14 +8,13 @@
     FocusEventHandler,
     FormEventHandler,
   } from 'svelte/elements';
-  import type { TextInputFocusEvent } from '../TextInput/TextInput.svelte';
-  import Icon from '@iconify/svelte';
-  import UtilityButton from '$lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte';
-  import InputEnclosure from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
-  import type { ComponentSize } from '$lib/types/size.js';
-  import type { ComponentRoundness } from '$lib/types/roundness.js';
 
-  interface PasswordInputProps {
+  export type PasswordInputToggleEvent = {
+    event: Event;
+    toggle: boolean;
+  };
+
+  export interface PasswordInputProps {
     /** How large should the button be? */
     size?: ComponentSize;
     /** Input ref */
@@ -72,6 +66,14 @@
     /** ontoggle event handler */
     ontoggle?: (e: PasswordInputToggleEvent) => void;
   }
+</script>
+
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import UtilityButton from '$lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte';
+  import InputEnclosure from '$lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
+  import type { TextInputFocusEvent } from '../TextInput/TextInput.svelte';
+  import { DynamicInput, type DynamicInputFocusEvent } from '$lib/index.js';
 
   let {
     size = 'normal',
@@ -107,19 +109,21 @@
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let customPasswordToggleIconTyped = customPasswordToggleIcon as any;
 
-  function onfocusMod(e: TextInputFocusEvent) {
+  function onfocusMod(e: DynamicInputFocusEvent) {
+    const eTyped = e as TextInputFocusEvent;
     focused = true;
 
     if (onfocus) {
-      onfocus(e);
+      onfocus(eTyped);
     }
   }
 
-  function onblurMod(e: TextInputFocusEvent) {
+  function onblurMod(e: DynamicInputFocusEvent) {
+    const eTyped = e as TextInputFocusEvent;
     focused = false;
 
     if (onblur) {
-      onblur(e);
+      onblur(eTyped);
     }
   }
 
@@ -146,11 +150,12 @@
   class={['dodo-ui-PasswordInput', `size--${size}`, `roundness--${roundness}`, className].join(' ')}
 >
   <InputEnclosure {outline} {disabled} {error} {focused} {size} {roundness} {before} {after}>
-    <input
+    <DynamicInput
       type={passwordToggle && toggle ? 'text' : 'password'}
       {name}
       {id}
       {disabled}
+      bind:ref
       {oninput}
       {onchange}
       onfocus={onfocusMod}
@@ -160,56 +165,50 @@
       {oncut}
       {placeholder}
       bind:value
-      bind:this={ref}
       {readonly}
+      variant="input"
     />
 
     {#if passwordToggle && !disabled}
-      <UtilityButton {size} title="Toggle password" class="passwordToggle" onclick={ontoggleMod}>
-        {#if customPasswordToggleIcon}
-          {@render customPasswordToggleIconTyped(toggle)}
-        {:else if toggle}
-          <Icon icon="mdi:eye-off" width="24" height="24" />
-        {:else}
-          <Icon icon="mdi:eye" width="24" height="24" />
-        {/if}
-      </UtilityButton>
+      <div class:after class="passwordToggle">
+        <UtilityButton {size} title="Toggle password" onclick={ontoggleMod}>
+          {#if customPasswordToggleIcon}
+            {@render customPasswordToggleIconTyped(toggle)}
+          {:else if toggle}
+            <Icon icon="mdi:eye-off" width="24" height="24" />
+          {:else}
+            <Icon icon="mdi:eye" width="24" height="24" />
+          {/if}
+        </UtilityButton>
+      </div>
     {/if}
   </InputEnclosure>
 </div>
 
 <style lang="scss">
   .dodo-ui-PasswordInput {
-    input {
-      flex: 1;
-      border: 0;
-      outline: 0;
-      height: 100%;
-      background-color: transparent;
-      font-family: inherit;
-      color: inherit;
-      letter-spacing: 0.3px;
-    }
-
     &.size {
       &--normal {
-        input {
-          font-size: 1rem;
-          padding: 0 calc(var(--dodo-ui-space-small) * 2);
+        .passwordToggle {
+          &.after {
+            margin-right: calc(var(--dodo-ui-space-small) * 2);
+          }
         }
       }
 
       &--small {
-        input {
-          padding: 0 var(--dodo-ui-space);
-          font-size: 0.9rem;
+        .passwordToggle {
+          &.after {
+            margin-right: var(--dodo-ui-space);
+          }
         }
       }
 
       &--large {
-        input {
-          font-size: 1.1rem;
-          padding: 0 calc(var(--dodo-ui-space) * 2);
+        .passwordToggle {
+          &.after {
+            margin-right: calc(var(--dodo-ui-space) * 2);
+          }
         }
       }
     }