@flightlesslabs/dodo-ui 0.17.1 → 0.18.0

package/dist/stories/developer tools/customize/AutoCustomize/Tool/stores/config.svelte.js

@@ -0,0 +1,70 @@
+import { browser } from '$app/environment';
+const AUTO_CUSTOMIZE_TOOL_CONFIG = 'AUTO_CUSTOMIZE_TOOL_CONFIG';
+export const autoCustomizeConfigdefaultData = {
+    colors: {
+        primary: 'violet',
+        secondary: 'blue',
+        neutral: 'gray',
+        safe: 'emerald',
+        warning: 'amber',
+        danger: 'red',
+    },
+    components: {
+        roundness: 0,
+        elementHeight: 0,
+        borderWidth: 0,
+    },
+    space: 0,
+};
+function getDefaultData() {
+    if (!browser) {
+        return autoCustomizeConfigdefaultData;
+    }
+    let values = JSON.parse(localStorage.getItem(AUTO_CUSTOMIZE_TOOL_CONFIG) || `{}`);
+    values = { ...autoCustomizeConfigdefaultData, ...values };
+    return values;
+}
+function createAutoCustomizeConfigStore() {
+    let updatedAt = $state(Date.now());
+    let data = $state(getDefaultData());
+    return {
+        get data() {
+            return data;
+        },
+        get updatedAt() {
+            return updatedAt;
+        },
+        updateData(newData) {
+            data = {
+                ...data,
+                ...newData,
+            };
+            updatedAt = Date.now();
+            if (browser) {
+                localStorage.setItem(AUTO_CUSTOMIZE_TOOL_CONFIG, JSON.stringify(newData));
+            }
+        },
+        updateDataColor(newData) {
+            const colors = {
+                ...data.colors,
+                ...newData,
+            };
+            this.updateData({ colors });
+        },
+        updateDataComponents(newData) {
+            const components = {
+                ...data.components,
+                ...newData,
+            };
+            this.updateData({ components });
+        },
+        reset() {
+            data = autoCustomizeConfigdefaultData;
+            updatedAt = Date.now();
+            if (browser) {
+                localStorage.setItem(AUTO_CUSTOMIZE_TOOL_CONFIG, JSON.stringify(autoCustomizeConfigdefaultData));
+            }
+        },
+    };
+}
+export const useAutoCustomizeConfigStore = createAutoCustomizeConfigStore();

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

@@ -0,0 +1,8 @@
+# Customize
+
+Use our [Auto Customize](?path=/docs/developer-tools-customize-autocustomize--docs) to modify the look and feel of the components.
+
+## Explore More
+
+- [Tailwind CSS Color Generator](https://uicolors.app/generate/)
+- [Colors](?path=/docs/developer-tools-philosophy-colors--docs)

package/dist/styles/_colors.css

@@ -7,7 +7,7 @@
   --dodo-color-constant-black: var(--dodo-color-base-black);
   --dodo-color-constant-white: var(--dodo-color-base-white);
 
-  /* Default color */
+  /* Neutral color */
   --dodo-color-neutral-50: var(--dodo-color-base-gray-50);
   --dodo-color-neutral-100: var(--dodo-color-base-gray-100);
   --dodo-color-neutral-200: var(--dodo-color-base-gray-200);

package/dist/types/special.d.ts

@@ -0,0 +1 @@
+export type DropdownArrowPosition = false | 'before' | 'after';

package/dist/types/special.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.17.1",
+  "version": "0.18.0",
   "scripts": {
     "copy-css": "cpy src/lib/styles/global.css dist/styles --parents",
     "build": "vite build && pnpm copy-css && pnpm run prepack",
@@ -60,9 +60,10 @@
     "@storybook/addon-vitest": "^9.1.1",
     "@storybook/sveltekit": "^9.1.1",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.27.0",
+    "@sveltejs/kit": "^2.27.1",
     "@sveltejs/package": "^2.4.0",
     "@sveltejs/vite-plugin-svelte": "^6.1.0",
+    "@types/file-saver": "^2.0.7",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "@vueless/storybook-dark-mode": "^9.0.6",
@@ -76,14 +77,14 @@
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.12",
-    "sass": "^1.89.2",
+    "sass": "^1.90.0",
     "storybook": "^9.1.1",
-    "svelte": "^5.37.3",
+    "svelte": "^5.38.0",
     "svelte-check": "^4.3.1",
     "svelte-preprocess": "^6.0.3",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.39.0",
-    "vite": "^7.0.6",
+    "vite": "^7.1.0",
     "vitest": "^3.2.4"
   },
   "keywords": [
@@ -95,6 +96,7 @@
   },
   "dependencies": {
     "@iconify/svelte": "^5.0.1",
-    "dayjs": "^1.11.13"
+    "dayjs": "^1.11.13",
+    "file-saver": "^2.0.5"
   }
 }

package/src/lib/index.ts

@@ -12,6 +12,8 @@ export type { ComponentWeight } from './types/weight.js';
 
 export type { PositionY, PositionX } from './types/position.js';
 
+export type { DropdownArrowPosition } from './types/special.js';
+
 /** developer tools: helpers: logger */
 export { default as createLogger } from '$lib/stories/developer tools/helpers/logger/logger.js';
 export type {
@@ -103,11 +105,7 @@ export type { MessageProps } from '$lib/stories/components/Form/Message/Message.
 
 /** Form: Select */
 export { default as Select } from '$lib/stories/components/Form/Select/Select.svelte';
-export type {
-  SelectOption,
-  SelectDropdownArrowPosition,
-  SelectProps,
-} from '$lib/stories/components/Form/Select/Select.svelte';
+export type { SelectOption, SelectProps } from '$lib/stories/components/Form/Select/Select.svelte';
 
 /** Form: NumericInput */
 export { default as NumericInput } from '$lib/stories/components/Form/NumericInput/NumericInput.svelte';
@@ -172,6 +170,13 @@ export type {
   GridColumnProps,
 } from '$lib/stories/components/Layout/Grid/Column/Column.svelte';
 
+/** Layout: Accordian */
+export { default as Accordian } from '$lib/stories/components/Layout/Accordian/Accordian.svelte';
+export type {
+  AccordianProps,
+  AccordianToggleEvent,
+} from '$lib/stories/components/Layout/Accordian/Accordian.svelte';
+
 /** Info: Calendar */
 export { default as Calendar } from '$lib/stories/components/Info/Calendar/Calendar.svelte';
 export type {

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

@@ -220,7 +220,6 @@
 
   .dodo-ui-Button {
     cursor: pointer;
-    outline: none;
     transition: all 150ms;
     text-decoration: none;
     margin: 0;
@@ -232,7 +231,6 @@
     border-style: solid;
     border-width: var(--dodo-ui-element-border-width);
     border-color: transparent;
-    outline: 0;
     color: inherit;
     letter-spacing: 0.3px;
 

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

@@ -180,7 +180,6 @@
       border-style: solid;
       border-width: calc(var(--dodo-ui-element-border-width) * 2);
       border-color: var(--dodo-ui-Radio-border-color);
-      outline: 0;
       letter-spacing: 0.3px;
       border-radius: inherit;
       position: relative;

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

@@ -17,8 +17,6 @@
     disabled?: boolean;
   };
 
-  export type SelectDropdownArrowPosition = false | 'before' | 'after';
-
   export interface SelectProps {
     /** How large should the button be? */
     size?: ComponentSize;
@@ -105,7 +103,7 @@
     /** Dropdown Arrow Icon */
     customDropdownArrowIcon?: (open: boolean) => Snippet;
     /** Select Dropdown Arrow Position */
-    dropdownArrowPosition?: SelectDropdownArrowPosition;
+    dropdownArrowPosition?: DropdownArrowPosition;
     /** Popup stick horizontally  */
     popupPositionX?: PositionX;
     /** Popup stick vertically  */
@@ -138,6 +136,7 @@
   } from '$lib/index.js';
   import type { TextInputInputEvent } from '../TextInput/TextInput.svelte';
   import type { ButtonClickEvent } from '../Button/Button.svelte';
+  import type { DropdownArrowPosition } from '$lib/types/special.js';
 
   let {
     size = 'normal',

package/src/lib/stories/components/Layout/Accordian/Accordian.svelte

@@ -0,0 +1,195 @@
+<script lang="ts" module>
+  import type { ComponentSize } from '$lib/types/size.js';
+  import type { DropdownArrowPosition } from '$lib/types/special.js';
+  import Icon from '@iconify/svelte';
+  import { onMount, type Snippet } from 'svelte';
+  import type { EventHandler } from 'svelte/elements';
+
+  export type AccordianToggleEvent = Event & {
+    currentTarget: EventTarget & HTMLDetailsElement;
+  };
+
+  export interface AccordianProps {
+    /** Contents goes here */
+    children?: Snippet;
+    /** Accordian summary */
+    summary?: Snippet;
+    /** summary full width */
+    fullWidthSummary?: boolean;
+    /** Accordian ref */
+    ref?: HTMLDetailsElement;
+    /** Custom css class */
+    class?: string;
+    /** The toggle event handler */
+    ontoggle?: EventHandler<Event, HTMLDetailsElement>;
+    /**  Open state, for dynmaic Accordians */
+    open?: boolean;
+    /** default Open, for static Accordians */
+    defaultOpen?: boolean;
+    /** How large should the button be? */
+    size?: ComponentSize;
+    /** Select Dropdown Arrow Position */
+    dropdownArrowPosition?: DropdownArrowPosition;
+    /** Dropdown Arrow Icon */
+    customDropdownArrowIcon?: (open: boolean) => Snippet;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    class: className = '',
+    ref = $bindable<HTMLDetailsElement>(),
+    ontoggle,
+    open = $bindable<boolean>(),
+    defaultOpen,
+    summary,
+    children,
+    size = 'normal',
+    fullWidthSummary = false,
+    customDropdownArrowIcon: customDropdownArrowIconInternal,
+    dropdownArrowPosition = 'before',
+  }: AccordianProps = $props();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customDropdownArrowIconTyped = customDropdownArrowIconInternal as any;
+
+  let isUserInteraction = $state(false);
+
+  function ontoggleMod(e: AccordianToggleEvent) {
+    if (isUserInteraction) {
+      if (ontoggle) {
+        ontoggle(e);
+      }
+    }
+
+    isUserInteraction = false;
+  }
+
+  function onsummaryclick() {
+    isUserInteraction = true;
+  }
+
+  onMount(() => {
+    if (open === true) {
+      ref.open = true;
+    } else if (open === false) {
+      ref.open = false;
+    } else if (defaultOpen === true) {
+      ref.open = true;
+    } else if (defaultOpen === false) {
+      ref.open = false;
+    }
+  });
+</script>
+
+{#snippet dropdownArrowIcon()}
+  {#if customDropdownArrowIconTyped}
+    {@render customDropdownArrowIconTyped(open)}
+  {:else}
+    <div class="IconOpen">
+      <Icon icon="material-symbols:arrow-drop-up-rounded" width="32" height="32" />
+    </div>
+    <div class="IconClose">
+      <Icon icon="material-symbols:arrow-drop-down-rounded" width="32" height="32" />
+    </div>
+  {/if}
+{/snippet}
+
+<details
+  class:fullWidthSummary
+  class={['dodo-ui-Accordian', `size--${size}`, className].join(' ')}
+  bind:this={ref}
+  {open}
+  ontoggle={ontoggleMod}
+>
+  {#if summary}
+    <summary onclick={onsummaryclick}>
+      {#if dropdownArrowPosition === 'before'}
+        <div class:open class="DropdownArrow before">
+          {@render dropdownArrowIcon()}
+        </div>
+      {/if}
+      {@render summary()}
+      {#if dropdownArrowPosition === 'after'}
+        <div class:open class="DropdownArrow after">
+          {@render dropdownArrowIcon()}
+        </div>
+      {/if}
+    </summary>
+  {/if}
+
+  {#if children}
+    <div class="AccordianContent">
+      {@render children()}
+    </div>
+  {/if}
+</details>
+
+<style lang="scss">
+  .dodo-ui-Accordian {
+    color: var(--dodo-color-neutral-900);
+    width: 100%;
+
+    summary {
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+      user-select: none;
+      font-weight: 500;
+    }
+
+    &.fullWidthSummary {
+      summary {
+        display: flex;
+        width: 100%;
+      }
+    }
+
+    &[open] {
+      .IconOpen {
+        display: flex;
+      }
+
+      .IconClose {
+        display: none;
+      }
+    }
+
+    &:not([open]) {
+      .IconOpen {
+        display: none;
+      }
+
+      .IconClose {
+        display: flex;
+      }
+    }
+
+    &.size {
+      &--normal {
+        summary {
+          font-size: 1rem;
+          min-height: var(--dodo-ui-element-height-normal);
+        }
+      }
+
+      &--small {
+        summary {
+          font-size: 0.9rem;
+          min-height: var(--dodo-ui-element-height-small);
+        }
+      }
+
+      &--large {
+        summary {
+          font-size: 1.1rem;
+          min-height: var(--dodo-ui-element-height-large);
+        }
+      }
+    }
+
+    .AccordianContent {
+      margin-top: var(--dodo-ui-space);
+    }
+  }
+</style>

package/src/lib/stories/developer tools/customize/AutoCustomize/Tool/Config/ColorTool/ColorButton.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+
+  interface ColorButtonProps {
+    color: string;
+    selectedColor?: string;
+    onclick?: (color: string) => void;
+  }
+
+  const { color, selectedColor, onclick }: ColorButtonProps = $props();
+
+  function onClickMod() {
+    if (onclick) {
+      onclick(color);
+    }
+  }
+</script>
+
+<button
+  class="ColorButton"
+  class:selectedColor={selectedColor === color}
+  onclick={onClickMod}
+  aria-label={`color button ${color}`}
+  style={`background-color: var(--dodo-color-base-${color}-400);`}
+>
+  <Icon icon="material-symbols:check-small" width="24" height="24" />
+</button>
+
+<style lang="scss">
+  .ColorButton {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    margin: 4px;
+    cursor: pointer;
+    color: var(--dodo-color-constant-white);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    border: 3px solid transparent;
+
+    :global(svg) {
+      position: absolute;
+      display: none;
+    }
+
+    &.selectedColor {
+      border-color: var(--dodo-color-primary-600);
+
+      :global(svg) {
+        display: block;
+      }
+    }
+  }
+</style>

package/src/lib/stories/developer tools/customize/AutoCustomize/Tool/Config/ColorTool/ColorTool.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import FormControl from '$lib/stories/components/Form/FormControl/FormControl.svelte';
+  import { colorPaletteBase } from '$lib/stories/developer tools/philosophy/Colors/utils/color.js';
+  import ColorButton from './ColorButton.svelte';
+
+  interface ColorToolProps {
+    label?: string;
+    colors?: string[];
+    selectedColor?: string;
+    onclick?: (color: string) => void;
+  }
+
+  const { colors = colorPaletteBase, selectedColor, onclick, label }: ColorToolProps = $props();
+</script>
+
+<div class="ColorTool">
+  <FormControl {label}>
+    {#each colors as color (color)}
+      <ColorButton {color} {onclick} {selectedColor} />
+    {/each}
+  </FormControl>
+</div>
+
+<style lang="scss">
+  .ColorTool {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: calc(var(--dodo-ui-space) * 2.5);
+    margin-left: -4px;
+    margin-right: -4px;
+  }
+</style>

package/src/lib/stories/developer tools/customize/AutoCustomize/Tool/Config/Config.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import Button from '$lib/stories/components/Form/Button/Button.svelte';
+  import { useAutoCustomizeConfigStore } from '../stores/config.svelte.js';
+  import ColorTool from './ColorTool/ColorTool.svelte';
+  import Export from './Export.svelte';
+  import ValueSilder from './ValueSilder/ValueSilder.svelte';
+</script>
+
+<div class="Config">
+  <h3>Auto Customize</h3>
+  <ColorTool
+    label="Primary Color:"
+    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ primary: color })}
+    selectedColor={useAutoCustomizeConfigStore.data.colors?.primary}
+    colors={[
+      'violet',
+      'red',
+      'orange',
+      'amber',
+      'yellow',
+      'lime',
+      'green',
+      'emerald',
+      'teal',
+      'cyan',
+      'blue',
+      'indigo',
+      'purple',
+      'fuchsia',
+      'pink',
+      'rose',
+    ]}
+  />
+
+  <ColorTool
+    label="Secondary Color:"
+    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ secondary: color })}
+    selectedColor={useAutoCustomizeConfigStore.data.colors?.secondary}
+    colors={[
+      'blue',
+      'red',
+      'orange',
+      'amber',
+      'yellow',
+      'lime',
+      'green',
+      'emerald',
+      'teal',
+      'cyan',
+      'indigo',
+      'violet',
+      'purple',
+      'fuchsia',
+      'pink',
+      'rose',
+    ]}
+  />
+
+  <ColorTool
+    label="Neutral Color:"
+    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ neutral: color })}
+    selectedColor={useAutoCustomizeConfigStore.data.colors?.neutral}
+    colors={['gray', 'slate', 'zinc', 'neutral', 'stone']}
+  />
+
+  <ColorTool
+    label="Safe Color:"
+    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ safe: color })}
+    selectedColor={useAutoCustomizeConfigStore.data.colors?.safe}
+    colors={['emerald', 'lime', 'green', 'teal']}
+  />
+
+  <ColorTool
+    label="Warning Color:"
+    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ warning: color })}
+    selectedColor={useAutoCustomizeConfigStore.data.colors?.warning}
+    colors={['amber', 'red', 'rose', 'orange', 'yellow']}
+  />
+
+  <ColorTool
+    label="Danger Color:"
+    onclick={(color) => useAutoCustomizeConfigStore.updateDataColor({ danger: color })}
+    selectedColor={useAutoCustomizeConfigStore.data.colors?.danger}
+    colors={['red', 'orange', 'amber', 'yellow', 'pink', 'rose']}
+  />
+
+  <ValueSilder
+    label="Roundness:"
+    value={useAutoCustomizeConfigStore.data.components?.roundness || 0}
+    min={-5}
+    max={7}
+    oninput={(value) => useAutoCustomizeConfigStore.updateDataComponents({ roundness: value })}
+  />
+
+  <ValueSilder
+    label="Size:"
+    value={useAutoCustomizeConfigStore.data.components?.elementHeight || 0}
+    min={-5}
+    max={7}
+    oninput={(value) => useAutoCustomizeConfigStore.updateDataComponents({ elementHeight: value })}
+  />
+
+  <ValueSilder
+    label="Border:"
+    value={useAutoCustomizeConfigStore.data.components?.borderWidth || 0}
+    min={0}
+    max={7}
+    oninput={(value) => useAutoCustomizeConfigStore.updateDataComponents({ borderWidth: value })}
+  />
+
+  <ValueSilder
+    label="Space:"
+    value={useAutoCustomizeConfigStore.data.space || 0}
+    min={-5}
+    max={15}
+    oninput={(value) => useAutoCustomizeConfigStore.updateData({ space: value })}
+  />
+
+  <div class="Export">
+    <Export />
+  </div>
+
+  <div class="Reset">
+    <Button onclick={() => useAutoCustomizeConfigStore.reset()} variant="text" color="danger">
+      Reset
+    </Button>
+  </div>
+</div>
+
+<style lang="scss">
+  @use '../../../../../../styles/scss' as *;
+
+  .Config {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: calc(var(--dodo-ui-space) * 2);
+
+    @media (min-width: $breakpoints-lg) {
+      max-width: 300px;
+      height: calc(100vh - 130px);
+      overflow: auto;
+    }
+
+    .Reset {
+      margin-top: calc(var(--dodo-ui-space) * 4);
+    }
+  }
+</style>