@flightlesslabs/dodo-ui 0.6.5 → 0.7.0

package/dist/stories/components/Form/Button/Size/Size.stories.svelte

@@ -1,6 +1,5 @@
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { fn } from '@storybook/test';
   import Button from '../Button.svelte';
   import { storyButtonArgTypes } from '../Button.stories.svelte';
 
@@ -9,14 +8,9 @@
     component: Button,
     tags: ['autodocs'],
     argTypes: storyButtonArgTypes,
-    args: {
-      onclick: fn(),
-    },
   });
 </script>
 
-<Story name="Normal" args={{ outline: false, disabled: false, compact: false }}>
-  <Button>Click me!</Button>
-</Story>
-<Story name="Small" args={{ size: 'small' }}><Button size="small">Click me!</Button></Story>
-<Story name="Large" args={{ size: 'large' }}><Button size="large">Click me!</Button></Story>
+<Story name="Normal">Click me!</Story>
+<Story name="Small" args={{ size: 'small' }}>Click me!</Story>
+<Story name="Large" args={{ size: 'large' }}>Click me!</Story>

package/dist/stories/components/Form/Button/Variant/Variant.stories.svelte

@@ -1,6 +1,5 @@
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { fn } from '@storybook/test';
   import Button from '../Button.svelte';
   import { storyButtonArgTypes } from '../Button.stories.svelte';
 
@@ -9,13 +8,11 @@
     component: Button,
     tags: ['autodocs'],
     argTypes: storyButtonArgTypes,
-    args: {
-      onclick: fn(),
-    },
   });
 </script>
 
-<Story name="Text" args={{ outline: false, disabled: false, compact: false }}>
-  <Button>Click me!</Button>
-</Story>
-<Story name="Solid" args={{ variant: 'solid' }}><Button variant="solid">Click me!</Button></Story>
+<Story name="Solid">Click me!</Story>
+
+<Story name="Text" args={{ variant: 'text' }}>Click me!</Story>
+
+<Story name="Text Outline" args={{ variant: 'text', outline: true }}>Click me!</Story>

package/dist/stories/components/Form/FormControl/FormControl.stories.svelte

@@ -10,18 +10,17 @@ const { Story } = defineMeta({
 
 <Story name="Default" args={{ label: 'Hello there' }} />
 
-<Story name="Example TextInput" args={{ label: 'Whats your first name?' }}>
-  <FormControl label="Whats your first name?" for="first-name-01">
-    <TextInput placeholder="First name" id="first-name-01" />
-  </FormControl>
+<Story name="Example TextInput" args={{ label: 'Whats your first name?', for: 'first-name-01' }}>
+  <TextInput placeholder="First name" id="first-name-01" />
 </Story>
 
-<Story name="ErrorMessage" args={{ label: 'Whats your first name?' }}>
-  <FormControl
-    label="Whats your first name?"
-    for="first-name-02"
-    errorMessage="This is an error message"
-  >
-    <TextInput value="John Smith" id="first-name-02" error />
-  </FormControl>
+<Story
+  name="ErrorMessage"
+  args={{
+    label: 'Whats your first name?',
+    for: 'first-name-02',
+    errorMessage: 'This is an error message',
+  }}
+>
+  <TextInput value="John Smith" id="first-name-02" error />
 </Story>

package/dist/stories/components/Form/FormControl/FormControl.svelte

@@ -1,3 +1,6 @@
+<script lang="ts" module>export {};
+</script>
+
 <script lang="ts">import Label from '../Label/Label.svelte';
 import Message from '../Message/Message.svelte';
 let { children, label, class: className = '', for: htmlFor, form, ref = $bindable(), errorMessage, } = $props();
@@ -21,14 +24,9 @@ let { children, label, class: className = '', for: htmlFor, form, ref = $bindabl
   {/if}
 </div>
 
-<style>:global(:root) {
-  --dodo-ui-FormControl-LabelSection-gap: 8px;
-  --dodo-ui-FormControl-errorMessage-gap: 10px;
-}
-
-.dodo-ui-FormControl .LabelSection {
-  margin-bottom: var(--dodo-ui-FormControl-LabelSection-gap);
+<style>.dodo-ui-FormControl .LabelSection {
+  margin-bottom: var(--dodo-ui-space);
 }
 .dodo-ui-FormControl .errorMessage {
-  margin-top: var(--dodo-ui-FormControl-errorMessage-gap);
+  margin-top: var(--dodo-ui-space-large);
 }</style>

package/dist/stories/components/Form/FormControl/FormControl.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-interface FormControlProps {
+export interface FormControlProps {
     /** FormControl contents goes here */
     children?: Snippet;
     /** Label for FormControl */

package/dist/stories/components/Form/Label/Label.stories.svelte

@@ -7,15 +7,5 @@ const { Story } = defineMeta({
 });
 </script>
 
-<!-- ⚠️ Test Label: Do not use! -->
-<Story
-  name="Test Label"
-  args={{
-    _unsafeChildrenStringForTesting: 'This is a form label',
-  }}
-/>
-
 <!-- Label with default style -->
-<Story name="Default">
-  <Label>This is a form label</Label>
-</Story>
+<Story name="Default">This is a form label</Story>

package/dist/stories/components/Form/Label/Label.svelte

@@ -1,18 +1,19 @@
-<script lang="ts">let { children, class: className = '', for: htmlFor, form, _unsafeChildrenStringForTesting, ref = $bindable(), } = $props();
-export {};
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">"use strict";
+let { children, class: className = '', for: htmlFor, form, ref = $bindable(), } = $props();
 </script>
 
 <label class={['dodo-ui-Label', className].join(' ')} for={htmlFor} {form} bind:this={ref}>
   {#if children}
     {@render children()}
-  {:else if _unsafeChildrenStringForTesting}
-    {_unsafeChildrenStringForTesting}
   {/if}
 </label>
 
 <style>.dodo-ui-Label {
   font-size: 0.95rem;
-  color: var(--dodo-color-default-700);
+  color: var(--dodo-color-neutral-700);
   display: flex;
   align-items: center;
   font-family: inherit;

package/dist/stories/components/Form/Label/Label.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-interface LabelProps {
+export interface LabelProps {
     /** Label contents goes here */
     children?: Snippet;
     /** Label ref */
@@ -10,8 +10,6 @@ interface LabelProps {
     form?: string;
     /** Custom css class*/
     class?: string;
-    /** Test: ⚠️ Unsafe Children String. Do Not use*/
-    _unsafeChildrenStringForTesting?: string;
 }
 declare const Label: import("svelte").Component<LabelProps, {}, "ref">;
 type Label = ReturnType<typeof Label>;

package/dist/stories/components/Form/Message/Color/Color.stories.svelte

@@ -11,26 +11,26 @@
   });
 </script>
 
-<Story name="Default">
-  <Message>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
-</Story>
-
 <Story name="Primary" args={{ color: 'primary' }}>
-  <Message color="primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </Story>
 
 <Story name="Secondary" args={{ color: 'secondary' }}>
-  <Message color="secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit
+</Story>
+
+<Story name="Neutral" args={{ color: 'neutral' }}>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </Story>
 
 <Story name="Safe" args={{ color: 'safe' }}>
-  <Message color="safe">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </Story>
 
 <Story name="Warning" args={{ color: 'warning' }}>
-  <Message color="warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </Story>
 
 <Story name="Danger" args={{ color: 'danger' }}>
-  <Message color="danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </Story>

package/dist/stories/components/Form/Message/Message.stories.svelte

@@ -1,13 +1,15 @@
 <script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
 import Message from './Message.svelte';
+import { componentColorArray } from '../../../../types/colors.js';
+import { componentSizeArray } from '../../../../types/size.js';
 export const storyMessageArgTypes = {
     color: {
         control: { type: 'select' },
-        options: ['default', 'primary', 'secondary', 'safe', 'warning', 'danger'],
+        options: componentColorArray,
     },
     size: {
         control: { type: 'select' },
-        options: ['normal', 'small', 'large'],
+        options: componentSizeArray,
     },
 };
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
@@ -18,14 +20,4 @@ const { Story } = defineMeta({
 });
 </script>
 
-<!-- ⚠️ Test Message: Do not use! -->
-<Story
-  name="Test Message"
-  args={{
-    _unsafeChildrenStringForTesting: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-  }}
-/>
-
-<Story name="Default">
-  <Message>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
-</Story>
+<Story name="Primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Story>

package/dist/stories/components/Form/Message/Message.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts">let { children, class: className = '', color = 'default', ref = $bindable(), _unsafeChildrenStringForTesting, size = 'normal', } = $props();
-export {};
+<script lang="ts">"use strict";
+let { children, class: className = '', color = 'primary', ref = $bindable(), size = 'normal', } = $props();
 </script>
 
 <div
@@ -11,8 +11,6 @@ export {};
 >
   {#if children}
     {@render children()}
-  {:else if _unsafeChildrenStringForTesting}
-    {_unsafeChildrenStringForTesting}
   {/if}
 </div>
 
@@ -30,15 +28,15 @@ export {};
 .dodo-ui-Message.size--large {
   font-size: 1.1rem;
 }
-.dodo-ui-Message.color--default {
-  color: var(--dodo-color-default-800);
-}
 .dodo-ui-Message.color--primary {
   color: var(--dodo-color-primary-600);
 }
 .dodo-ui-Message.color--secondary {
   color: var(--dodo-color-secondary-600);
 }
+.dodo-ui-Message.color--neutral {
+  color: var(--dodo-color-neutral-600);
+}
 .dodo-ui-Message.color--safe {
   color: var(--dodo-color-safe-600);
 }

package/dist/stories/components/Form/Message/Message.svelte.d.ts

@@ -1,19 +1,17 @@
-export type MessageColor = 'default' | 'primary' | 'secondary' | 'safe' | 'warning' | 'danger';
-import type { ComponentSize } from '../../../../types.js';
+import type { ComponentColor } from '../../../../types/colors.js';
+import type { ComponentSize } from '../../../../types/size.js';
 import type { Snippet } from 'svelte';
-interface MessageProps {
+export interface MessageProps {
     /** Message contents goes here */
     children?: Snippet;
     /** Message ref */
     ref?: HTMLDivElement;
     /** What color to use? */
-    color?: MessageColor;
+    color?: ComponentColor;
     /** Message size */
     size?: ComponentSize;
     /** Custom css class*/
     class?: string;
-    /** Test: ⚠️ Unsafe Children String. Do Not use*/
-    _unsafeChildrenStringForTesting?: string;
 }
 declare const Message: import("svelte").Component<MessageProps, {}, "ref">;
 type Message = ReturnType<typeof Message>;

package/dist/stories/components/Form/Message/Size/Size.stories.svelte

@@ -11,14 +11,12 @@
   });
 </script>
 
-<Story name="Normal">
-  <Message>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
-</Story>
+<Story name="Normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Story>
 
 <Story name="Small" args={{ size: 'small' }}>
-  <Message size="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </Story>
 
 <Story name="Large" args={{ size: 'large' }}>
-  <Message size="large">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </Story>

package/dist/stories/components/Form/PasswordInput/Events/Events.stories.svelte

@@ -18,15 +18,7 @@ const { Story } = defineMeta({
       console.log('Input Event', target.value);
     },
   }}
->
-  <PasswordInput
-    oninput={(e: Event) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('Input Event', target.value);
-    }}
-  />
-</Story>
+/>
 
 <Story
   name="Change"
@@ -37,15 +29,7 @@ const { Story } = defineMeta({
       console.log('onChange Event', target.value);
     },
   }}
->
-  <PasswordInput
-    onchange={(e: Event) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onchange Event', target.value);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: PasswordInputToggleEvent` -->
 <Story
@@ -57,15 +41,7 @@ const { Story } = defineMeta({
       console.log('ontoggle Event', e, target);
     },
   }}
->
-  <PasswordInput
-    ontoggle={(e: PasswordInputToggleEvent) => {
-      const target = e.event.target as HTMLButtonElement;
-
-      console.log('ontoggle Event', e, target);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: TextInputFocusEvent` -->
 <Story
@@ -77,15 +53,7 @@ const { Story } = defineMeta({
       console.log('onfocus Event', target);
     },
   }}
->
-  <PasswordInput
-    onfocus={(e: TextInputFocusEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onfocus Event', target);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: TextInputFocusEvent` -->
 <Story
@@ -97,15 +65,7 @@ const { Story } = defineMeta({
       console.log('onblur Event', target);
     },
   }}
->
-  <PasswordInput
-    onblur={(e: TextInputFocusEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onblur Event', target);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: TextInputClipboardEvent` -->
 <Story
@@ -117,15 +77,7 @@ const { Story } = defineMeta({
       console.log('oncopy Event', target);
     },
   }}
->
-  <PasswordInput
-    oncopy={(e: TextInputClipboardEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('oncopy Event', target);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: TextInputClipboardEvent` -->
 <Story
@@ -137,15 +89,7 @@ const { Story } = defineMeta({
       console.log('oncut Event', target);
     },
   }}
->
-  <PasswordInput
-    oncut={(e: TextInputClipboardEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('oncut Event', target);
-    }}
-  />
-</Story>
+/>
 
 <!-- `e: TextInputClipboardEvent` -->
 <Story
@@ -157,12 +101,4 @@ const { Story } = defineMeta({
       console.log('onpaste Event', target);
     },
   }}
->
-  <PasswordInput
-    onpaste={(e: TextInputClipboardEvent) => {
-      const target = e.target as HTMLInputElement;
-
-      console.log('onpaste Event', target);
-    }}
-  />
-</Story>
+/>

package/dist/stories/components/Form/PasswordInput/PasswordInput.stories.svelte

@@ -1,14 +1,16 @@
 <script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
 import PasswordInput from './PasswordInput.svelte';
 import Icon from '@iconify/svelte';
+import { componentRoundnessArray } from '../../../../types/roundness.js';
+import { componentSizeArray } from '../../../../types/size.js';
 export const storyPasswordInputArgTypes = {
     roundness: {
         control: { type: 'select' },
-        options: [false, '1x', '2x', '3x'],
+        options: componentRoundnessArray,
     },
     size: {
         control: { type: 'select' },
-        options: ['normal', 'small', 'large'],
+        options: componentSizeArray,
     },
 };
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
@@ -40,7 +42,7 @@ const { Story } = defineMeta({
 <Story name="Read only" args={{ readonly: true }} />
 
 <!-- Show Password by default -->
-<Story name="Custom toggle icon">
+<Story name="Custom toggle icon" asChild>
   <PasswordInput value="Hello world!">
     {#snippet customPasswordToggleIcon(toggle)}
       {#if toggle}

package/dist/stories/components/Form/PasswordInput/PasswordInput.svelte

@@ -4,21 +4,24 @@
 <script lang="ts">import Icon from '@iconify/svelte';
 import UtilityButton from '../../../developer tools/components/UtilityButton/UtilityButton.svelte';
 import InputEnclosure from '../../../developer tools/components/InputEnclosure/InputEnclosure.svelte';
-let { size = 'normal', roundness = '1x', outline = true, name, id, class: className = '', disabled = false, oninput, onchange, onblur, onfocus, onpaste, oncopy, oncut, before, after, customPasswordToggleIcon, error = false, passwordToggle = true, passwordToggleState = $bindable(), value = $bindable(), placeholder, ontoggle, ref = $bindable(), readonly = false, } = $props();
+import { DynamicInput } from '../../../../index.js';
+let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, oninput, onchange, onblur, onfocus, onpaste, oncopy, oncut, before, after, customPasswordToggleIcon, error = false, passwordToggle = true, passwordToggleState = $bindable(), value = $bindable(), placeholder, ontoggle, ref = $bindable(), readonly = false, } = $props();
 let focused = $state(false);
 let toggle = $state(passwordToggleState);
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let customPasswordToggleIconTyped = customPasswordToggleIcon;
 function onfocusMod(e) {
+    const eTyped = e;
     focused = true;
     if (onfocus) {
-        onfocus(e);
+        onfocus(eTyped);
     }
 }
 function onblurMod(e) {
+    const eTyped = e;
     focused = false;
     if (onblur) {
-        onblur(e);
+        onblur(eTyped);
     }
 }
 function ontoggleMod(e) {
@@ -42,11 +45,12 @@ function ontoggleMod(e) {
   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}
@@ -56,43 +60,32 @@ function ontoggleMod(e) {
       {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>.dodo-ui-PasswordInput input {
-  flex: 1;
-  border: 0;
-  outline: 0;
-  height: 100%;
-  background-color: transparent;
-  font-family: inherit;
-  color: inherit;
-  letter-spacing: 0.3px;
+<style>.dodo-ui-PasswordInput.size--normal .passwordToggle.after {
+  margin-right: calc(var(--dodo-ui-space-small) * 2);
 }
-.dodo-ui-PasswordInput.size--normal input {
-  font-size: 1rem;
-  padding: 0 12px;
+.dodo-ui-PasswordInput.size--small .passwordToggle.after {
+  margin-right: var(--dodo-ui-space);
 }
-.dodo-ui-PasswordInput.size--small input {
-  padding: 0 8px;
-  font-size: 0.9rem;
-}
-.dodo-ui-PasswordInput.size--large input {
-  font-size: 1.1rem;
-  padding: 0 14px;
+.dodo-ui-PasswordInput.size--large .passwordToggle.after {
+  margin-right: calc(var(--dodo-ui-space) * 2);
 }</style>

package/dist/stories/components/Form/PasswordInput/PasswordInput.svelte.d.ts

@@ -1,11 +1,12 @@
+import type { ComponentSize } from '../../../../types/size.js';
+import type { ComponentRoundness } from '../../../../types/roundness.js';
+import type { Snippet } from 'svelte';
+import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler } from 'svelte/elements';
 export type PasswordInputToggleEvent = {
     event: Event;
     toggle: boolean;
 };
-import type { ComponentRoundness, ComponentSize } from '../../../../types.js';
-import type { Snippet } from 'svelte';
-import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler } from 'svelte/elements';
-interface PasswordInputProps {
+export interface PasswordInputProps {
     /** How large should the button be? */
     size?: ComponentSize;
     /** Input ref */
@@ -17,7 +18,7 @@ interface PasswordInputProps {
     /** Toggle Password Icon */
     customPasswordToggleIcon?: (toggle: boolean) => Snippet;
     /** How round should the border radius be? */
-    roundness?: ComponentRoundness | false;
+    roundness?: ComponentRoundness;
     /** Add a border around the button. Default True */
     outline?: boolean;
     /** Input value */

package/dist/stories/components/Form/PasswordInput/Roundness/Roundness.stories.svelte

@@ -11,10 +11,10 @@
   });
 </script>
 
-<Story name="Roundness 1x" />
+<Story name="Roundness 1" />
 
-<Story name="Roundness 2x" args={{ roundness: '2x' }} />
+<Story name="Roundness 2" args={{ roundness: 2 }} />
 
-<Story name="Roundness 3x" args={{ roundness: '3x' }} />
+<Story name="Roundness 3" args={{ roundness: 3 }} />
 
-<Story name="Roundness False" args={{ roundness: false }} />
+<Story name="Roundness 0" args={{ roundness: 0 }} />

package/dist/stories/components/Form/PasswordInput/WithIcon/WithIcon.stories.svelte

@@ -13,7 +13,7 @@
 </script>
 
 <!-- PasswordInput icon in front. -->
-<Story name="Icon Before">
+<Story name="Icon Before" asChild>
   <PasswordInput>
     {#snippet before()}
       <Icon icon="material-symbols:content-copy" />
@@ -22,7 +22,7 @@
 </Story>
 
 <!-- PasswordInput icon in front. -->
-<Story name="Icon After">
+<Story name="Icon After" asChild>
   <PasswordInput>
     {#snippet after()}
       <Icon icon="material-symbols:download-2" />