@flightlesslabs/dodo-ui 0.3.0 → 0.5.0

package/dist/index.d.ts

@@ -1,11 +1,25 @@
 import './styles/global.css';
 export type { ComponentSize, ComponentRoundness, ComponentRoundnessFull } from './types.js';
+/** developer tools: components: UtilityButton */
+export { default as UtilityButton } from './stories/developer tools/components/UtilityButton/UtilityButton.svelte';
+/** developer tools: components: InputEnclosure */
+export { default as InputEnclosure } from './stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
 /** Form: Button */
 export { default as Button } from './stories/components/Form/Button/Button.svelte';
 export type { ButtonColor, ButtonRoundness, ButtonLinkTarget, ButtonLinkReferrerpolicy, } from './stories/components/Form/Button/Button.svelte';
 /** Form: TextInput */
 export { default as TextInput } from './stories/components/Form/TextInput/TextInput.svelte';
-export type { TextInputRoundness, TextInputType, TextInputFocusEvent, TextInputClipboardEvent, } from './stories/components/Form/TextInput/TextInput.svelte';
+export type { TextInputType, TextInputFocusEvent, TextInputClipboardEvent, } from './stories/components/Form/TextInput/TextInput.svelte';
 /** Form: PasswordInput */
 export { default as PasswordInput } from './stories/components/Form/PasswordInput/PasswordInput.svelte';
 export type { PasswordInputToggleEvent } from './stories/components/Form/PasswordInput/PasswordInput.svelte';
+/** Form: Label */
+export { default as Label } from './stories/components/Form/Label/Label.svelte';
+/** Form: FormControl */
+export { default as FormControl } from './stories/components/Form/FormControl/FormControl.svelte';
+/** Form: Message */
+export { default as Message } from './stories/components/Form/Message/Message.svelte';
+export type { MessageColor } from './stories/components/Form/Message/Message.svelte';
+/** Form: SimpleSelect */
+export { default as SimpleSelect } from './stories/components/Form/SimpleSelect/SimpleSelect.svelte';
+export type { SimpleSelectFocusEvent, SimpleSelectOption, } from './stories/components/Form/SimpleSelect/SimpleSelect.svelte';

package/dist/index.js

@@ -1,7 +1,19 @@
 import './styles/global.css';
+/** developer tools: components: UtilityButton */
+export { default as UtilityButton } from './stories/developer tools/components/UtilityButton/UtilityButton.svelte';
+/** developer tools: components: InputEnclosure */
+export { default as InputEnclosure } from './stories/developer tools/components/InputEnclosure/InputEnclosure.svelte';
 /** Form: Button */
 export { default as Button } from './stories/components/Form/Button/Button.svelte';
 /** Form: TextInput */
 export { default as TextInput } from './stories/components/Form/TextInput/TextInput.svelte';
 /** Form: PasswordInput */
 export { default as PasswordInput } from './stories/components/Form/PasswordInput/PasswordInput.svelte';
+/** Form: Label */
+export { default as Label } from './stories/components/Form/Label/Label.svelte';
+/** Form: FormControl */
+export { default as FormControl } from './stories/components/Form/FormControl/FormControl.svelte';
+/** Form: Message */
+export { default as Message } from './stories/components/Form/Message/Message.svelte';
+/** Form: SimpleSelect */
+export { default as SimpleSelect } from './stories/components/Form/SimpleSelect/SimpleSelect.svelte';

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts">const { children, type = 'button', size = 'normal', color = 'default', roundness = '1x', variant = 'text', outline = false, compact = false, fullWidth = false, name, id, title, class: className = '', disabled = false, onclick, before, after, href, download, hreflang, media, ping, rel, target, anchorMediaType, referrerpolicy, _unsafeChildrenStringForTesting, } = $props();
+<script lang="ts">let { children, type = 'button', size = 'normal', color = 'default', roundness = '1x', variant = 'text', outline = false, compact = false, fullWidth = false, name, id, title, class: className = '', disabled = false, onclick, before, after, href, download, hreflang, media, ping, rel, target, anchorMediaType, referrerpolicy, _unsafeChildrenStringForTesting, ref = $bindable(), } = $props();
 export {};
 </script>
 
@@ -50,6 +50,7 @@ export {};
       `roundness--${roundness}`,
       className,
     ].join(' ')}
+    bind:this={ref}
   >
     {@render buttonContent()}
   </a>
@@ -72,6 +73,7 @@ export {};
     {title}
     {disabled}
     {onclick}
+    bind:this={ref}
   >
     {@render buttonContent()}
   </button>
@@ -188,6 +190,7 @@ export {};
   outline: 0;
   color: inherit;
   letter-spacing: 0.3px;
+  font-family: inherit;
 }
 .dodo-ui-Button.size--normal {
   height: var(--dodo-ui-element-height-normal);

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

@@ -6,8 +6,10 @@ import type { ComponentRoundness, ComponentRoundnessFull, ComponentSize } from '
 import type { Snippet } from 'svelte';
 import type { MouseEventHandler } from 'svelte/elements';
 interface ButtonProps {
-    /** Button contents goes here*/
+    /** Button contents goes here */
     children?: Snippet;
+    /** Button ref */
+    ref?: HTMLButtonElement | HTMLAnchorElement;
     /** Regular button or submit button? */
     type?: 'button' | 'submit';
     /** How large should the button be? */
@@ -61,6 +63,6 @@ interface ButtonProps {
     /** Test: ⚠️ Unsafe Children String. Do Not use*/
     _unsafeChildrenStringForTesting?: string;
 }
-declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;
 export default Button;

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

@@ -0,0 +1,27 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import FormControl from './FormControl.svelte';
+import TextInput from '../TextInput/TextInput.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: FormControl,
+    tags: ['autodocs'],
+});
+</script>
+
+<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>
+
+<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>

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

@@ -0,0 +1,19 @@
+import FormControl from './FormControl.svelte';
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const FormControl: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type FormControl = InstanceType<typeof FormControl>;
+export default FormControl;

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

@@ -0,0 +1,34 @@
+<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();
+</script>
+
+<div class={['dodo-ui-FormControl', className].join(' ')} bind:this={ref}>
+  {#if label}
+    <div class="LabelSection">
+      <Label for={htmlFor} {form}>{label}</Label>
+    </div>
+  {/if}
+  <div class="content">
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+  {#if errorMessage}
+    <div class="errorMessage">
+      <Message color="danger">{errorMessage}</Message>
+    </div>
+  {/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);
+}
+.dodo-ui-FormControl .errorMessage {
+  margin-top: var(--dodo-ui-FormControl-errorMessage-gap);
+}</style>

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

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+interface FormControlProps {
+    /** FormControl contents goes here */
+    children?: Snippet;
+    /** Label for FormControl */
+    label?: string;
+    /** is there any associated Error Message ? */
+    errorMessage?: string;
+    /** Label ref */
+    ref?: HTMLDivElement;
+    /** id of the form element the label should be bound to */
+    for?: string;
+    /** Specifies which form the label belongs to */
+    form?: string;
+    /** Custom css class*/
+    class?: string;
+}
+declare const FormControl: import("svelte").Component<FormControlProps, {}, "ref">;
+type FormControl = ReturnType<typeof FormControl>;
+export default FormControl;

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

@@ -0,0 +1,21 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Label from './Label.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Label,
+    tags: ['autodocs'],
+});
+</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>

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

@@ -0,0 +1,19 @@
+import Label from './Label.svelte';
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Label: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Label = InstanceType<typeof Label>;
+export default Label;

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

@@ -0,0 +1,19 @@
+<script lang="ts">let { children, class: className = '', for: htmlFor, form, _unsafeChildrenStringForTesting, ref = $bindable(), } = $props();
+export {};
+</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);
+  display: flex;
+  align-items: center;
+  font-family: inherit;
+}</style>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+interface LabelProps {
+    /** Label contents goes here */
+    children?: Snippet;
+    /** Label ref */
+    ref?: HTMLLabelElement;
+    /** id of the form element the label should be bound to */
+    for?: string;
+    /** Specifies which form the label belongs to */
+    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>;
+export default Label;

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

@@ -0,0 +1,36 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Message from '../Message.svelte';
+  import { storyMessageArgTypes } from '../Message.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Message,
+    tags: ['autodocs'],
+    argTypes: storyMessageArgTypes,
+  });
+</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>
+</Story>
+
+<Story name="Safe" args={{ color: 'safe' }}>
+  <Message color="safe">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Warning" args={{ color: 'warning' }}>
+  <Message color="warning">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Danger" args={{ color: 'danger' }}>
+  <Message color="danger">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Info" args={{ color: 'info' }}>
+  <Message color="info">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>

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

@@ -0,0 +1,26 @@
+export default Color;
+type Color = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Color: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

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

@@ -0,0 +1,31 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Message from './Message.svelte';
+export const storyMessageArgTypes = {
+    color: {
+        control: { type: 'select' },
+        options: ['default', 'primary', 'safe', 'warning', 'danger', 'info'],
+    },
+    size: {
+        control: { type: 'select' },
+        options: ['normal', 'small', 'large'],
+    },
+};
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Message,
+    tags: ['autodocs'],
+    argTypes: storyMessageArgTypes,
+});
+</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>

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

@@ -0,0 +1,21 @@
+import Message from './Message.svelte';
+import type { StoryBookArgTypes } from '../../../../storybook-types.js';
+export declare const storyMessageArgTypes: StoryBookArgTypes;
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Message: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Message = InstanceType<typeof Message>;
+export default Message;

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

@@ -0,0 +1,50 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">let { children, class: className = '', color = 'default', ref = $bindable(), _unsafeChildrenStringForTesting, size = 'normal', } = $props();
+export {};
+</script>
+
+<div
+  class={['dodo-ui-Message', `color--${color}`, `size--${size}`, className].join(' ')}
+  bind:this={ref}
+>
+  {#if children}
+    {@render children()}
+  {:else if _unsafeChildrenStringForTesting}
+    {_unsafeChildrenStringForTesting}
+  {/if}
+</div>
+
+<style>.dodo-ui-Message {
+  letter-spacing: 0.3px;
+  display: flex;
+  font-family: inherit;
+}
+.dodo-ui-Message.size--normal {
+  font-size: 1rem;
+}
+.dodo-ui-Message.size--small {
+  font-size: 0.9rem;
+}
+.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--safe {
+  color: var(--dodo-color-safe-600);
+}
+.dodo-ui-Message.color--warning {
+  color: var(--dodo-color-warning-600);
+}
+.dodo-ui-Message.color--danger {
+  color: var(--dodo-color-danger-600);
+}
+.dodo-ui-Message.color--info {
+  color: var(--dodo-color-info-600);
+}</style>

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

@@ -0,0 +1,20 @@
+export type MessageColor = 'default' | 'primary' | 'safe' | 'warning' | 'danger' | 'info';
+import type { ComponentSize } from '../../../../types.js';
+import type { Snippet } from 'svelte';
+interface MessageProps {
+    /** Message contents goes here */
+    children?: Snippet;
+    /** Message ref */
+    ref?: HTMLDivElement;
+    /** What color to use? */
+    color?: MessageColor;
+    /** 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>;
+export default Message;

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

@@ -0,0 +1,24 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Message from '../Message.svelte';
+  import { storyMessageArgTypes } from '../Message.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Message,
+    tags: ['autodocs'],
+    argTypes: storyMessageArgTypes,
+  });
+</script>
+
+<Story name="Normal">
+  <Message>Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Small" args={{ size: 'small' }}>
+  <Message size="small">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>
+
+<Story name="Large" args={{ size: 'large' }}>
+  <Message size="large">Lorem ipsum dolor sit amet, consectetur adipiscing elit</Message>
+</Story>

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

@@ -0,0 +1,26 @@
+export default Size;
+type Size = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Size: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

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

@@ -1,5 +1,6 @@
 <script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
 import PasswordInput from './PasswordInput.svelte';
+import Icon from '@iconify/svelte';
 export const storyPasswordInputArgTypes = {
     roundness: {
         control: { type: 'select' },
@@ -34,4 +35,19 @@ const { Story } = defineMeta({
 <Story name="No toggle" args={{ passwordToggle: false }} />
 
 <!-- Show Password by default -->
-<Story name="Show Password" args={{ defaultPasswordToggleState: true }} />
+<Story name="Show Password" args={{ passwordToggleState: true }} />
+
+<Story name="Read only" args={{ readonly: true }} />
+
+<!-- Show Password by default -->
+<Story name="Custom toggle icon">
+  <PasswordInput value="Hello world!">
+    {#snippet customPasswordToggleIcon(toggle)}
+      {#if toggle}
+        <Icon icon="mingcute:eye-close-line" width="24" height="24" />
+      {:else}
+        <Icon icon="mingcute:eye-2-line" width="24" height="24" />
+      {/if}
+    {/snippet}
+  </PasswordInput>
+</Story>