@flightlesslabs/dodo-ui 0.3.0 → 0.4.0

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 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';
 /** 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';
@@ -9,3 +11,10 @@ export type { TextInputRoundness, TextInputType, TextInputFocusEvent, TextInputC
 /** 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';

package/dist/index.js

@@ -1,7 +1,15 @@
 import './styles/global.css';
+/** developer tools: components: UtilityButton */
+export { default as UtilityButton } from './stories/developer tools/components/UtilityButton/UtilityButton.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';

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: 16px;
+}
+
+.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/Message.stories.svelte

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

@@ -0,0 +1,19 @@
+import Message from './Message.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 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,39 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">let { children, class: className = '', color = 'default', ref = $bindable(), _unsafeChildrenStringForTesting, } = $props();
+export {};
+</script>
+
+<div class={['dodo-ui-Message', `color--${color}`, className].join(' ')} bind:this={ref}>
+  {#if children}
+    {@render children()}
+  {:else if _unsafeChildrenStringForTesting}
+    {_unsafeChildrenStringForTesting}
+  {/if}
+</div>
+
+<style>.dodo-ui-Message {
+  font-size: 1rem;
+  letter-spacing: 0.3px;
+  display: flex;
+  font-family: inherit;
+}
+.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,17 @@
+export type MessageColor = 'default' | 'primary' | 'safe' | 'warning' | 'danger' | 'info';
+import type { Snippet } from 'svelte';
+interface MessageProps {
+    /** Message contents goes here */
+    children?: Snippet;
+    /** Message ref */
+    ref?: HTMLDivElement;
+    /** What color to use? */
+    color?: MessageColor;
+    /** 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/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>

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

@@ -2,9 +2,12 @@
 </script>
 
 <script lang="ts">import Icon from '@iconify/svelte';
-let { size = 'normal', roundness = '1x', outline = true, name, id, class: className = '', disabled = false, oninput, onchange, onblur, onfocus, onpaste, oncopy, oncut, before, after, passwordToggleIcon, error = false, passwordToggle = true, defaultPasswordToggleState = false, value = $bindable(), placeholder, ontoggle, } = $props();
+import UtilityButton from '../../../developer tools/components/UtilityButton/UtilityButton.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();
 let focused = $state(false);
-let toggle = $state(defaultPasswordToggleState);
+let toggle = $state(passwordToggleState);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customPasswordToggleIconTyped = customPasswordToggleIcon;
 function onfocusMod(e) {
     focused = true;
     if (onfocus) {
@@ -56,18 +59,20 @@ function ontoggleMod(e) {
     {oncut}
     {placeholder}
     bind:value
+    bind:this={ref}
+    {readonly}
   />
 
   {#if passwordToggle && !disabled}
-    <button class="passwordToggle" title="Toggle password" onclick={ontoggleMod} class:toggle>
-      {#if passwordToggleIcon}
-        {@render passwordToggleIcon()}
+    <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}
-    </button>
+    </UtilityButton>
   {/if}
 
   {#if after}
@@ -83,7 +88,6 @@ function ontoggleMod(e) {
   --dodo-ui-PasswordInput-error-border-color: var(--dodo-color-danger-500);
   --dodo-ui-PasswordInput-disabled-color: var(--dodo-color-default-400);
   --dodo-ui-PasswordInput-disabled-bg: var(--dodo-color-default-200);
-  --dodo-ui-PasswordInput-ToggleButton-hover: var(--dodo-color-primary-700);
 }
 
 :global(.dodo-theme--dark) {
@@ -92,7 +96,6 @@ function ontoggleMod(e) {
   --dodo-ui-PasswordInput-error-border-color: var(--dodo-color-danger-600);
   --dodo-ui-PasswordInput-disabled-bg: var(--dodo-color-default-100);
   --dodo-ui-PasswordInput-disabled-color: var(--dodo-color-default-500);
-  --dodo-ui-PasswordInput-ToggleButton-hover: var(--dodo-color-primary-600);
 }
 
 .dodo-ui-PasswordInput {
@@ -152,9 +155,6 @@ function ontoggleMod(e) {
   margin-right: 12px;
   margin-left: -4px;
 }
-.dodo-ui-PasswordInput.size--normal .passwordToggle {
-  width: var(--dodo-ui-element-height-normal);
-}
 .dodo-ui-PasswordInput.size--small {
   height: var(--dodo-ui-element-height-small);
 }
@@ -170,9 +170,6 @@ function ontoggleMod(e) {
   margin-right: 8px;
   margin-left: -2px;
 }
-.dodo-ui-PasswordInput.size--small .passwordToggle {
-  width: var(--dodo-ui-element-height-small);
-}
 .dodo-ui-PasswordInput.size--large {
   height: var(--dodo-ui-element-height-large);
 }
@@ -188,9 +185,6 @@ function ontoggleMod(e) {
   margin-right: 14px;
   margin-left: -4px;
 }
-.dodo-ui-PasswordInput.size--large .passwordToggle {
-  width: var(--dodo-ui-element-height-large);
-}
 .dodo-ui-PasswordInput.roundness--1x {
   border-radius: var(--dodo-ui-element-roundness-1x);
 }
@@ -199,21 +193,4 @@ function ontoggleMod(e) {
 }
 .dodo-ui-PasswordInput.roundness--3x {
   border-radius: var(--dodo-ui-element-roundness-3x);
-}
-.dodo-ui-PasswordInput .passwordToggle {
-  background-color: transparent;
-  outline: 0;
-  border: 0;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  cursor: pointer;
-  padding: 0;
-  margin-right: 4px;
-  color: var(--dodo-color-default-700);
-  transition: all 150ms;
-}
-.dodo-ui-PasswordInput .passwordToggle:hover {
-  color: var(--dodo-ui-PasswordInput-ToggleButton-hover);
 }</style>

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

@@ -9,12 +9,14 @@ import type { TextInputRoundness } from '../TextInput/TextInput.svelte';
 interface PasswordInputProps {
     /** How large should the button be? */
     size?: ComponentSize;
+    /** Input ref */
+    ref?: HTMLInputElement;
     /** Toggle Password */
     passwordToggle?: boolean;
     /** Default Password Toggle State */
-    defaultPasswordToggleState?: boolean;
+    passwordToggleState?: boolean;
     /** Toggle Password Icon */
-    passwordToggleIcon?: Snippet;
+    customPasswordToggleIcon?: (toggle: boolean) => Snippet;
     /** How round should the border radius be? */
     roundness?: TextInputRoundness;
     /** Add a border around the button. Default True */
@@ -23,8 +25,10 @@ interface PasswordInputProps {
     value?: string;
     /** How round should the border radius be? */
     placeholder?: string;
-    /** Button disabled state */
+    /** disabled state */
     disabled?: boolean;
+    /** Read only ? */
+    readonly?: boolean;
     /** is there any associated Error ? */
     error?: boolean;
     /** Name */
@@ -54,6 +58,6 @@ interface PasswordInputProps {
     /** ontoggle event handler */
     ontoggle?: (e: PasswordInputToggleEvent) => void;
 }
-declare const PasswordInput: import("svelte").Component<PasswordInputProps, {}, "value">;
+declare const PasswordInput: import("svelte").Component<PasswordInputProps, {}, "ref" | "value" | "passwordToggleState">;
 type PasswordInput = ReturnType<typeof PasswordInput>;
 export default PasswordInput;

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

@@ -33,3 +33,5 @@ const { Story } = defineMeta({
 <Story name="Error" args={{ error: true }} />
 
 <Story name="Disabled" args={{ disabled: true }} />
+
+<Story name="Read only" args={{ readonly: true }} />

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

@@ -1,7 +1,7 @@
 <script lang="ts" module>export {};
 </script>
 
-<script lang="ts">let { type = 'text', size = 'normal', roundness = '1x', outline = true, name, id, class: className = '', disabled = false, oninput, onchange, onblur, onfocus, onpaste, oncopy, oncut, before, after, error = false, value = $bindable(), placeholder, } = $props();
+<script lang="ts">let { type = 'text', size = 'normal', roundness = '1x', outline = true, name, id, class: className = '', disabled = false, oninput, onchange, onblur, onfocus, onpaste, oncopy, oncut, before, after, error = false, value = $bindable(), placeholder, ref = $bindable(), readonly = false, } = $props();
 let focused = $state(false);
 function onfocusMod(e) {
     focused = true;
@@ -43,7 +43,9 @@ export {};
     {oncopy}
     {oncut}
     {placeholder}
+    {readonly}
     bind:value
+    bind:this={ref}
   />
   {#if after}
     <span class="content--after">

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

@@ -12,6 +12,8 @@ import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, Form
 interface TextInputProps {
     /** Input type? */
     type?: TextInputType;
+    /** Input ref */
+    ref?: HTMLInputElement;
     /** How large should the button be? */
     size?: ComponentSize;
     /** How round should the border radius be? */
@@ -22,8 +24,10 @@ interface TextInputProps {
     value?: string;
     /** How round should the border radius be? */
     placeholder?: string;
-    /** Button disabled state */
+    /** disabled state */
     disabled?: boolean;
+    /** Read only ? */
+    readonly?: boolean;
     /** is there any associated Error ? */
     error?: boolean;
     /** Name */
@@ -51,6 +55,6 @@ interface TextInputProps {
     /** oncut event handler */
     oncut?: ClipboardEventHandler<HTMLInputElement>;
 }
-declare const TextInput: import("svelte").Component<TextInputProps, {}, "value">;
+declare const TextInput: import("svelte").Component<TextInputProps, {}, "ref" | "value">;
 type TextInput = ReturnType<typeof TextInput>;
 export default TextInput;

package/dist/stories/developer tools/Intro.mdx

@@ -0,0 +1,7 @@
+# Developer Tools
+
+A set of components and tools used internally in dodo-ui.
+
+## Explore More
+
+- [Utility Button](?path=/docs/developer-tools-components-utilitybutton--docs)