@flightlesslabs/dodo-ui 0.3.0 → 0.5.0

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

@@ -0,0 +1,27 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { fn } from '@storybook/test';
+  import UtilityButton from '../UtilityButton.svelte';
+  import { storyUtilityButtonArgTypes } from '../UtilityButton.stories.svelte';
+  import Icon from '@iconify/svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: UtilityButton,
+    tags: ['autodocs'],
+    argTypes: storyUtilityButtonArgTypes,
+    args: {
+      onclick: fn(),
+    },
+  });
+</script>
+
+<Story name="Normal" args={{ disabled: false }}>
+  <UtilityButton><Icon icon="mdi:eye" width="24" height="24" /></UtilityButton>
+</Story>
+<Story name="Small" args={{ size: 'small' }}>
+  <UtilityButton size="small"><Icon icon="mdi:eye" width="22" height="22" /></UtilityButton>
+</Story>
+<Story name="Large" args={{ size: 'large' }}>
+  <UtilityButton size="large"><Icon icon="mdi:eye" width="28" height="28" /></UtilityButton>
+</Story>

package/dist/stories/developer tools/components/UtilityButton/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/developer tools/components/UtilityButton/UtilityButton.stories.svelte

@@ -0,0 +1,29 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import UtilityButton from './UtilityButton.svelte';
+import Icon from '@iconify/svelte';
+import { fn } from '@storybook/test';
+export const storyUtilityButtonArgTypes = {
+    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: UtilityButton,
+    tags: ['autodocs'],
+    argTypes: storyUtilityButtonArgTypes,
+    args: {
+        onclick: fn(),
+    },
+});
+</script>
+
+<!-- Button with default style -->
+<Story name="Default">
+  <UtilityButton><Icon icon="mdi:eye" width="24" height="24" /></UtilityButton>
+</Story>
+
+<Story name="Disabled" args={{ disabled: true }}>
+  <UtilityButton disabled><Icon icon="mdi:eye" width="24" height="24" /></UtilityButton>
+</Story>

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

@@ -0,0 +1,21 @@
+import UtilityButton from './UtilityButton.svelte';
+import type { StoryBookArgTypes } from '../../../../storybook-types.js';
+export declare const storyUtilityButtonArgTypes: 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 UtilityButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type UtilityButton = InstanceType<typeof UtilityButton>;
+export default UtilityButton;

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

@@ -0,0 +1,79 @@
+<script lang="ts">let { children, size = 'normal', name, id, title, class: className = '', disabled = false, onclick, ref = $bindable(), } = $props();
+export {};
+</script>
+
+<button
+  class={['dodo-ui-UtilityButton', `size--${size}`, className].join(' ')}
+  {name}
+  {id}
+  {title}
+  {disabled}
+  {onclick}
+  bind:this={ref}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</button>
+
+<style>:global(:root) {
+  --dodo-ui-UtilityButton-hover: var(--dodo-color-primary-600);
+  --dodo-ui-UtilityButton-active: var(--dodo-color-primary-600);
+  --dodo-ui-UtilityButton-disabled-color: var(--dodo-color-default-400);
+}
+
+:global(.dodo-theme--dark) {
+  --dodo-ui-UtilityButton-hover: var(--dodo-color-primary-600);
+  --dodo-ui-UtilityButton-active: var(--dodo-color-primary-600);
+  --dodo-ui-UtilityButton-disabled-color: var(--dodo-color-default-500);
+}
+
+.dodo-ui-UtilityButton {
+  cursor: pointer;
+  outline: none;
+  transition: all 150ms;
+  text-decoration: none;
+  margin: 0;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-family: inherit;
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+  padding: 0;
+  color: var(--dodo-color-default-700);
+  border-radius: 50%;
+  font-family: inherit;
+}
+.dodo-ui-UtilityButton:hover {
+  color: var(--dodo-ui-UtilityButton-hover);
+}
+.dodo-ui-UtilityButton:active {
+  color: var(--dodo-ui-UtilityButton-active);
+}
+.dodo-ui-UtilityButton.size--normal {
+  height: var(--dodo-ui-element-height-normal);
+  width: var(--dodo-ui-element-height-normal);
+  font-size: 1rem;
+}
+.dodo-ui-UtilityButton.size--small {
+  height: var(--dodo-ui-element-height-small);
+  width: var(--dodo-ui-element-height-small);
+  font-size: 0.9rem;
+}
+.dodo-ui-UtilityButton.size--large {
+  height: var(--dodo-ui-element-height-large);
+  width: var(--dodo-ui-element-height-large);
+  font-size: 1.1rem;
+}
+.dodo-ui-UtilityButton[disabled] {
+  cursor: initial;
+  color: var(--dodo-ui-UtilityButton-disabled-color);
+}
+.dodo-ui-UtilityButton[disabled]:hover {
+  color: var(--dodo-ui-UtilityButton-disabled-color);
+}
+.dodo-ui-UtilityButton[disabled]:active {
+  color: var(--dodo-ui-UtilityButton-disabled-color);
+}</style>

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

@@ -0,0 +1,26 @@
+import type { ComponentSize } from '../../../../types.js';
+import type { Snippet } from 'svelte';
+import type { MouseEventHandler } from 'svelte/elements';
+interface UtilityButtonProps {
+    /** Button contents goes here*/
+    children?: Snippet;
+    /** Button ref */
+    ref?: HTMLButtonElement;
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** Button disabled state */
+    disabled?: boolean;
+    /** Name */
+    name?: string;
+    /** Id */
+    id?: string;
+    /** Title (for tooltip) */
+    title?: string;
+    /** Custom css class*/
+    class?: string;
+    /** The onclick event handler */
+    onclick?: MouseEventHandler<HTMLButtonElement>;
+}
+declare const UtilityButton: import("svelte").Component<UtilityButtonProps, {}, "ref">;
+type UtilityButton = ReturnType<typeof UtilityButton>;
+export default UtilityButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "scripts": {
     "build": "vite build && pnpm run prepack",
     "preview": "vite preview",
@@ -48,42 +48,42 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3",
-    "@eslint/compat": "^1.2.5",
-    "@eslint/js": "^9.18.0",
-    "@storybook/addon-essentials": "^8.6.7",
-    "@storybook/addon-svelte-csf": "^5.0.0-next.0",
-    "@storybook/blocks": "^8.6.7",
-    "@storybook/experimental-addon-test": "^8.6.7",
+    "@chromatic-com/storybook": "^3.2.6",
+    "@eslint/compat": "^1.2.8",
+    "@eslint/js": "^9.24.0",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-svelte-csf": "5.0.0-next.28",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/experimental-addon-test": "^8.6.12",
     "@storybook/manager-api": "^8.6.12",
-    "@storybook/svelte": "^8.6.7",
-    "@storybook/sveltekit": "^8.6.7",
-    "@storybook/test": "^8.6.7",
+    "@storybook/svelte": "^8.6.12",
+    "@storybook/sveltekit": "^8.6.12",
+    "@storybook/test": "^8.6.12",
     "@storybook/theming": "^8.6.12",
-    "@sveltejs/adapter-auto": "^4.0.0",
-    "@sveltejs/kit": "^2.16.0",
-    "@sveltejs/package": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^5.0.0",
-    "@vitest/browser": "^3.0.9",
-    "@vitest/coverage-v8": "^3.0.9",
-    "eslint": "^9.18.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-svelte": "^3.0.0",
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.20.5",
+    "@sveltejs/package": "^2.3.10",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@vitest/browser": "^3.1.1",
+    "@vitest/coverage-v8": "^3.1.1",
+    "eslint": "^9.24.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-svelte": "^3.5.1",
     "globals": "^16.0.0",
     "playwright": "^1.51.1",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
-    "publint": "^0.3.2",
-    "sass": "^1.86.0",
-    "storybook": "^8.6.7",
+    "publint": "^0.3.11",
+    "sass": "^1.86.3",
+    "storybook": "^8.6.12",
     "storybook-dark-mode": "^4.0.2",
-    "svelte": "^5.0.0",
-    "svelte-check": "^4.0.0",
+    "svelte": "^5.25.10",
+    "svelte-check": "^4.1.5",
     "svelte-preprocess": "^6.0.3",
-    "typescript": "^5.0.0",
-    "typescript-eslint": "^8.20.0",
-    "vite": "^6.0.0",
-    "vitest": "^3.0.9"
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.29.1",
+    "vite": "^6.2.5",
+    "vitest": "^3.1.1"
   },
   "keywords": [
     "svelte"

package/src/lib/index.ts

@@ -2,6 +2,12 @@ import '$lib/styles/global.css';
 
 export type { ComponentSize, ComponentRoundness, ComponentRoundnessFull } from './types.js';
 
+/** developer tools: components: UtilityButton */
+export { default as UtilityButton } 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';
+
 /** Form: Button */
 export { default as Button } from '$lib/stories/components/Form/Button/Button.svelte';
 export type {
@@ -14,7 +20,6 @@ export type {
 /** Form: TextInput */
 export { default as TextInput } from '$lib/stories/components/Form/TextInput/TextInput.svelte';
 export type {
-  TextInputRoundness,
   TextInputType,
   TextInputFocusEvent,
   TextInputClipboardEvent,
@@ -23,3 +28,20 @@ export type {
 /** 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';
+
+/** Form: Label */
+export { default as Label } from '$lib/stories/components/Form/Label/Label.svelte';
+
+/** Form: FormControl */
+export { default as FormControl } from '$lib/stories/components/Form/FormControl/FormControl.svelte';
+
+/** Form: Message */
+export { default as Message } from '$lib/stories/components/Form/Message/Message.svelte';
+export type { MessageColor } 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';

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

@@ -18,8 +18,10 @@
   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? */
@@ -75,7 +77,7 @@
     _unsafeChildrenStringForTesting?: string;
   }
 
-  const {
+  let {
     children,
     type = 'button',
     size = 'normal',
@@ -103,6 +105,7 @@
     anchorMediaType,
     referrerpolicy,
     _unsafeChildrenStringForTesting,
+    ref = $bindable<HTMLButtonElement | HTMLAnchorElement>(),
   }: ButtonProps = $props();
 </script>
 
@@ -151,6 +154,7 @@
       `roundness--${roundness}`,
       className,
     ].join(' ')}
+    bind:this={ref}
   >
     {@render buttonContent()}
   </a>
@@ -173,6 +177,7 @@
     {title}
     {disabled}
     {onclick}
+    bind:this={ref}
   >
     {@render buttonContent()}
   </button>
@@ -222,6 +227,7 @@
     outline: 0;
     color: inherit;
     letter-spacing: 0.3px;
+    font-family: inherit;
 
     &.size {
       &--normal {

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

@@ -0,0 +1,29 @@
+<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/src/lib/stories/components/Form/FormControl/FormControl.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Label from '../Label/Label.svelte';
+  import Message from '../Message/Message.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;
+  }
+
+  let {
+    children,
+    label,
+    class: className = '',
+    for: htmlFor,
+    form,
+    ref = $bindable<HTMLDivElement>(),
+    errorMessage,
+  }: FormControlProps = $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 lang="scss">
+  :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);
+    }
+
+    .errorMessage {
+      margin-top: var(--dodo-ui-FormControl-errorMessage-gap);
+    }
+  }
+</style>

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

@@ -0,0 +1,23 @@
+<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/src/lib/stories/components/Form/Label/Label.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  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;
+  }
+
+  let {
+    children,
+    class: className = '',
+    for: htmlFor,
+    form,
+    _unsafeChildrenStringForTesting,
+    ref = $bindable<HTMLLabelElement>(),
+  }: LabelProps = $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 lang="scss">
+  .dodo-ui-Label {
+    font-size: 0.95rem;
+    color: var(--dodo-color-default-700);
+    display: flex;
+    align-items: center;
+    font-family: inherit;
+  }
+</style>

package/src/lib/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/src/lib/stories/components/Form/Message/Message.stories.svelte

@@ -0,0 +1,35 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Message from './Message.svelte';
+  import type { StoryBookArgTypes } from '$lib/storybook-types.js';
+
+  export const storyMessageArgTypes: StoryBookArgTypes = {
+    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>