@flightlesslabs/dodo-ui 0.17.1 → 0.18.0

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/Config.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">import Button from '../../../../../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>.Config {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: calc(var(--dodo-ui-space) * 2);
+}
+@media (min-width: 64rem) {
+  .Config {
+    max-width: 300px;
+    height: calc(100vh - 130px);
+    overflow: auto;
+  }
+}
+.Config .Reset {
+  margin-top: calc(var(--dodo-ui-space) * 4);
+}</style>

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/Config.svelte.d.ts

@@ -0,0 +1,18 @@
+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 Config: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Config = InstanceType<typeof Config>;
+export default Config;

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/Export.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">import Button from '../../../../../components/Form/Button/Button.svelte';
+import { colorPalette, colorPaletteValues, } from '../../../../philosophy/Colors/utils/color.js';
+import { downloadFile } from '../helpers/download-file.js';
+import { autoCustomizeConfigdefaultData, useAutoCustomizeConfigStore, } from '../stores/config.svelte.js';
+async function onclick() {
+    try {
+        let rawText = `/* dodo-ui-custom.css */
+:root {`;
+        for (let index = 0; index < colorPalette.length; index++) {
+            const colorName = colorPalette[index];
+            const fieldName = `${colorName}`;
+            const dataPoint = useAutoCustomizeConfigStore.data.colors &&
+                useAutoCustomizeConfigStore.data.colors[fieldName]
+                ? useAutoCustomizeConfigStore.data.colors[fieldName]
+                : undefined;
+            const defaultValue = autoCustomizeConfigdefaultData.colors && autoCustomizeConfigdefaultData.colors[fieldName]
+                ? autoCustomizeConfigdefaultData.colors[fieldName]
+                : undefined;
+            const pass = dataPoint && dataPoint !== defaultValue ? true : false;
+            if (!pass) {
+                continue;
+            }
+            rawText += `
+  /* ${colorName} color */`;
+            for (let index = 0; index < colorPaletteValues.length; index++) {
+                const weight = colorPaletteValues[index];
+                rawText += `
+  --dodo-color-${colorName}-${weight}: var(--dodo-color-base-${dataPoint}-${weight});`;
+                if (colorPaletteValues[index] === colorPaletteValues[colorPaletteValues.length - 1]) {
+                    rawText += `
+`;
+                }
+            }
+        }
+        if (useAutoCustomizeConfigStore.data.components?.roundness) {
+            const roundness = useAutoCustomizeConfigStore.data.components?.roundness / 8;
+            rawText += `
+
+  /* Component: Roundness */
+  --dodo-ui-element-roundness-1: ${0.4375 + roundness}em;
+  --dodo-ui-element-roundness-2: ${0.8125 + roundness}em;
+  --dodo-ui-element-roundness-3: ${1.9375 + roundness}em;`;
+        }
+        if (useAutoCustomizeConfigStore.data.components?.elementHeight) {
+            const elementHeight = useAutoCustomizeConfigStore.data.components.elementHeight + 2;
+            const elementHeightTrack = useAutoCustomizeConfigStore.data.components.elementHeight / 2;
+            rawText += `
+
+  /* Component: Size */
+  --dodo-ui-element-height-small: ${34 + elementHeight}px;
+  --dodo-ui-element-height-normal: ${40 + elementHeight}px;
+  --dodo-ui-element-height-large: ${50 + elementHeight}px;
+  --dodo-ui-track-element-height-small: ${6 + elementHeightTrack}px;
+  --dodo-ui-track-element-height-normal: ${8 + elementHeightTrack}px;
+  --dodo-ui-track-element-height-large: ${10 + elementHeightTrack}px;`;
+        }
+        if (useAutoCustomizeConfigStore.data.components?.borderWidth) {
+            const borderWidth = useAutoCustomizeConfigStore.data.components.borderWidth;
+            rawText += `
+
+  /* Component: Border */
+  --dodo-ui-element-border-width: ${2 + borderWidth}px;`;
+        }
+        if (useAutoCustomizeConfigStore.data.space) {
+            const space = useAutoCustomizeConfigStore.data.space;
+            rawText += `
+
+  /* Space */
+  --dodo-ui-space-small: ${6 + space}px;
+  --dodo-ui-space: ${8 + space}px;
+  --dodo-ui-space-large: ${10 + space}px;`;
+        }
+        // end
+        rawText += `
+}`;
+        rawText += `
+
+.dodo-theme--dark {`;
+        for (let index = 0; index < colorPalette.length; index++) {
+            const colorName = colorPalette[index];
+            const fieldName = `${colorName}`;
+            const dataPoint = useAutoCustomizeConfigStore.data.colors &&
+                useAutoCustomizeConfigStore.data.colors[fieldName]
+                ? useAutoCustomizeConfigStore.data.colors[fieldName]
+                : undefined;
+            const defaultValue = autoCustomizeConfigdefaultData.colors && autoCustomizeConfigdefaultData.colors[fieldName]
+                ? autoCustomizeConfigdefaultData.colors[fieldName]
+                : undefined;
+            const pass = dataPoint && dataPoint !== defaultValue ? true : false;
+            if (!pass) {
+                continue;
+            }
+            rawText += `
+
+  /* Dark: ${colorName} color */`;
+            const colorPaletteValuesReversed = [...colorPaletteValues].reverse();
+            for (let index = 0; index < colorPaletteValues.length; index++) {
+                const weight = colorPaletteValues[index];
+                const weightReversed = colorPaletteValuesReversed[index];
+                rawText += `
+  --dodo-color-${colorName}-${weight}: var(--dodo-color-base-${dataPoint}-${weightReversed});`;
+            }
+            if (colorPaletteValuesReversed[index] ===
+                colorPaletteValuesReversed[colorPaletteValuesReversed.length - 1]) {
+                rawText += `
+`;
+            }
+        }
+        // end
+        rawText += `
+}`;
+        const data = new Blob([rawText], { type: 'text/plain' });
+        await downloadFile(`dodo-ui-custom.css`, data);
+    }
+    catch (e) {
+        console.error(e);
+    }
+}
+</script>
+
+<Button {onclick}>Export CSS</Button>
+
+<style></style>

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/Export.svelte.d.ts

@@ -0,0 +1,18 @@
+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 Export: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Export = InstanceType<typeof Export>;
+export default Export;

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/ValueSilder/ValueSilder.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">import FormControl from '../../../../../../components/Form/FormControl/FormControl.svelte';
+import RangeSlider from '../../../../../../components/Form/RangeSlider/RangeSlider.svelte';
+const { label, value, min, max, oninput } = $props();
+let displayValue = $state(0);
+function oninputMod(e) {
+    const target = e.target;
+    if (oninput) {
+        oninput(Number(target.value));
+    }
+}
+$effect(() => {
+    if (value === 0) {
+        displayValue = 1;
+    }
+    else if (value < 0) {
+        displayValue = value;
+    }
+    else {
+        displayValue = value + 1;
+    }
+});
+</script>
+
+<div class="ValueSilder">
+  <FormControl label={`${label} ${displayValue}x`}>
+    <RangeSlider {value} {min} {max} oninput={oninputMod} size="small" />
+  </FormControl>
+</div>
+
+<style>.ValueSilder {
+  margin-bottom: calc(var(--dodo-ui-space) * 2.5);
+}</style>

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Config/ValueSilder/ValueSilder.svelte.d.ts

@@ -0,0 +1,11 @@
+interface ValueSilderProps {
+    label?: string;
+    value: number;
+    min: number;
+    max: number;
+    /** oninput event handler */
+    oninput?: (value: number) => void;
+}
+declare const ValueSilder: import("svelte").Component<ValueSilderProps, {}, "">;
+type ValueSilder = ReturnType<typeof ValueSilder>;
+export default ValueSilder;

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Preview/Preview.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">import Button from '../../../../../components/Form/Button/Button.svelte';
+import RangeSlider from '../../../../../components/Form/RangeSlider/RangeSlider.svelte';
+import Column from '../../../../../components/Layout/Grid/Column/Column.svelte';
+import Grid from '../../../../../components/Layout/Grid/Grid.svelte';
+import Paper from '../../../../../components/Layout/Paper/Paper.svelte';
+import { colorPalette, colorPaletteValues, } from '../../../../philosophy/Colors/utils/color.js';
+import { useAutoCustomizeConfigStore, } from '../stores/config.svelte.js';
+let cssVariables = $state([]);
+$effect(() => {
+    const newCssvariables = [];
+    for (let index = 0; index < colorPalette.length; index++) {
+        const colorName = colorPalette[index];
+        const fieldName = `${colorName}`;
+        const dataPoint = useAutoCustomizeConfigStore.data.colors &&
+            useAutoCustomizeConfigStore.data.colors[fieldName]
+            ? useAutoCustomizeConfigStore.data.colors[fieldName]
+            : undefined;
+        if (dataPoint) {
+            for (let index = 0; index < colorPaletteValues.length; index++) {
+                const weight = colorPaletteValues[index];
+                newCssvariables.push(`--dodo-color-${colorName}-${weight}: var(--dodo-color-base-${dataPoint}-${weight})`);
+            }
+            newCssvariables.push(...[
+                `--dodo-ui-Button-outline-${colorName}: var(--dodo-color-base-${dataPoint}-400)`,
+                `--dodo-ui-Button-text-${colorName}-bg: var(--dodo-color-base-${dataPoint}-100)`,
+                `--dodo-ui-Button-text-${colorName}-hover-bg: var(--dodo-color-base-${dataPoint}-200)`,
+                `--dodo-ui-Button-text-${colorName}-active-bg: var(--dodo-color-base-${dataPoint}-300)`,
+                `--dodo-ui-Button-solid-${colorName}-bg: var(--dodo-color-base-${dataPoint}-500)`,
+                `--dodo-ui-Button-solid-${colorName}-hover-bg: var(--dodo-color-base-${dataPoint}-600)`,
+                `--dodo-ui-Button-solid-${colorName}-active-bg: var(--dodo-color-base-${dataPoint}-700)`,
+                `--dodo-ui-RangeSlider-thumb-${colorName}-bg: var(--dodo-color-base-${dataPoint}-500)`,
+                `--dodo-ui-RangeSlider-thumb-${colorName}-hover-bg: var(--dodo-color-base-${dataPoint}-600)`,
+                `--dodo-ui-RangeSlider-thumb-${colorName}-active-bg: var(--dodo-color-base-${dataPoint}-700)`,
+                `--dodo-ui-RangeSlider-track-filled-${colorName}-bg: var(--dodo-color-base-${dataPoint}-500)`,
+            ]);
+        }
+    }
+    if (useAutoCustomizeConfigStore.data.components?.roundness) {
+        const roundness = useAutoCustomizeConfigStore.data.components.roundness / 8;
+        newCssvariables.push(`--dodo-ui-element-roundness-1: ${0.4375 + roundness}em`);
+        newCssvariables.push(`--dodo-ui-element-roundness-2: ${0.8125 + roundness}em`);
+        newCssvariables.push(`--dodo-ui-element-roundness-3: ${1.9375 + roundness}em`);
+    }
+    if (useAutoCustomizeConfigStore.data.components?.elementHeight) {
+        const elementHeight = useAutoCustomizeConfigStore.data.components.elementHeight + 2;
+        const elementHeightTrack = useAutoCustomizeConfigStore.data.components.elementHeight / 2;
+        newCssvariables.push(`--dodo-ui-element-height-small: ${34 + elementHeight}px`);
+        newCssvariables.push(`--dodo-ui-element-height-normal: ${40 + elementHeight}px`);
+        newCssvariables.push(`--dodo-ui-element-height-large: ${50 + elementHeight}px`);
+        newCssvariables.push(`--dodo-ui-track-element-height-small: ${6 + elementHeightTrack}px`);
+        newCssvariables.push(`--dodo-ui-track-element-height-normal: ${8 + elementHeightTrack}px`);
+        newCssvariables.push(`--dodo-ui-track-element-height-large: ${10 + elementHeightTrack}px`);
+    }
+    if (useAutoCustomizeConfigStore.data.components?.borderWidth) {
+        const borderWidth = useAutoCustomizeConfigStore.data.components.borderWidth;
+        newCssvariables.push(`--dodo-ui-element-border-width: ${1 + borderWidth}px`);
+    }
+    if (useAutoCustomizeConfigStore.data.space) {
+        const space = useAutoCustomizeConfigStore.data.space;
+        newCssvariables.push(`--dodo-ui-space-small: ${6 + space}px`);
+        newCssvariables.push(`--dodo-ui-space: ${8 + space}px`);
+        newCssvariables.push(`--dodo-ui-space-large: ${10 + space}px`);
+    }
+    cssVariables = [...newCssvariables];
+});
+</script>
+
+<div class="Preview" style={cssVariables.join(';')}>
+  <div class="section">
+    <div class="column">
+      <Button>Primary</Button>
+    </div>
+    <div class="column">
+      <Button color="secondary">Secondary</Button>
+    </div>
+    <div class="column">
+      <Button color="neutral">Neutral</Button>
+    </div>
+    <div class="column">
+      <Button color="safe">Safe</Button>
+    </div>
+    <div class="column">
+      <Button color="warning">Warning</Button>
+    </div>
+    <div class="column">
+      <Button color="danger">Danger</Button>
+    </div>
+  </div>
+
+  <div class="section">
+    <div class="column">
+      <Button variant="text" outline>Primary</Button>
+    </div>
+    <div class="column">
+      <Button variant="text" outline color="secondary">Secondary</Button>
+    </div>
+    <div class="column">
+      <Button variant="text" outline color="neutral">Neutral</Button>
+    </div>
+    <div class="column">
+      <Button variant="text" outline color="safe">Safe</Button>
+    </div>
+    <div class="column">
+      <Button variant="text" outline color="warning">Warning</Button>
+    </div>
+    <div class="column">
+      <Button variant="text" outline color="danger">Danger</Button>
+    </div>
+  </div>
+
+  <div class="section">
+    <div class="column">
+      <Paper shadow={1} width="150px" height="180px">
+        <div style="padding: var(--dodo-ui-space)">Hola!</div>
+      </Paper>
+    </div>
+    <div class="column">
+      <RangeSlider value={50} min={20} max={70} />
+    </div>
+  </div>
+
+  <div class="section">
+    <Grid class="GridSection">
+      <Column md={6}>
+        <Paper shadow={1}>
+          <div style="padding: var(--dodo-ui-space)">Hola!</div>
+        </Paper>
+      </Column>
+      <Column md={6}>
+        <Paper shadow={1}>
+          <div style="padding: var(--dodo-ui-space)">Hola!</div>
+        </Paper>
+      </Column>
+      <Column md={4}>
+        <Paper shadow={1}>
+          <div style="padding: var(--dodo-ui-space)">Hola!</div>
+        </Paper>
+      </Column>
+      <Column md={3}>
+        <Paper shadow={1}>
+          <div style="padding: var(--dodo-ui-space)">Hola!</div>
+        </Paper>
+      </Column>
+      <Column md={2}>
+        <Paper shadow={1}>
+          <div style="padding: var(--dodo-ui-space)">Hola!</div>
+        </Paper>
+      </Column>
+      <Column md={3}>
+        <Paper shadow={1}>
+          <div style="padding: var(--dodo-ui-space)">Hola!</div>
+        </Paper>
+      </Column>
+    </Grid>
+  </div>
+</div>
+
+<style>:global(:root) {
+  --AutoCustomize-Preview-bgColor: var(--dodo-color-base-gray-100);
+}
+
+:global(.dodo-theme--dark) {
+  --AutoCustomize-Preview-bgColor: var(--dodo-color-base-gray-800);
+}
+
+.Preview {
+  background-color: var(--AutoCustomize-Preview-bgColor);
+  padding: calc(var(--dodo-ui-space) * 2);
+  border-radius: var(--dodo-ui-element-roundness-2);
+  width: 100%;
+}
+@media (min-width: 64rem) {
+  .Preview {
+    flex: 1;
+    width: initial;
+    height: calc(100vh - 130px);
+    overflow: auto;
+  }
+}
+.Preview .section {
+  width: 100%;
+  margin: var(--dodo-ui-space) 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+.Preview .column {
+  margin: 4px;
+  display: inline-flex;
+}
+.Preview :global(.GridSection) {
+  width: 100%;
+}</style>

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Preview/Preview.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Preview: import("svelte").Component<Record<string, never>, {}, "">;
+type Preview = ReturnType<typeof Preview>;
+export default Preview;

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Tool.stories.svelte

@@ -0,0 +1,9 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Tool from './Tool.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Tool,
+});
+</script>
+
+<Story name="Main" />

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Tool.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Tool from './Tool.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 Tool: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Tool = InstanceType<typeof Tool>;
+export default Tool;

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Tool.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">import Config from './Config/Config.svelte';
+import Preview from './Preview/Preview.svelte';
+</script>
+
+<div class="Tool">
+  <Config />
+  <Preview />
+</div>
+
+<style>.Tool {
+  display: flex;
+  flex-wrap: wrap;
+}</style>

package/dist/stories/developer tools/customize/AutoCustomize/Tool/Tool.svelte.d.ts

@@ -0,0 +1,18 @@
+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 Tool: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Tool = InstanceType<typeof Tool>;
+export default Tool;

package/dist/stories/developer tools/customize/AutoCustomize/Tool/helpers/download-file.d.ts

@@ -0,0 +1 @@
+export declare function downloadFile(fileName: string, data: Blob): Promise<void>;

package/dist/stories/developer tools/customize/AutoCustomize/Tool/helpers/download-file.js

@@ -0,0 +1,10 @@
+import { saveAs } from 'file-saver';
+export async function downloadFile(fileName, data) {
+    try {
+        saveAs(data, fileName);
+        return Promise.resolve();
+    }
+    catch (e) {
+        return Promise.reject(e);
+    }
+}

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

@@ -0,0 +1,27 @@
+export type AutoCustomizeConfigDataColors = {
+    primary?: string;
+    secondary?: string;
+    neutral?: string;
+    safe?: string;
+    warning?: string;
+    danger?: string;
+};
+export type AutoCustomizeConfigDataComponents = {
+    roundness?: number;
+    elementHeight?: number;
+    borderWidth?: number;
+};
+export type AutoCustomizeConfigData = {
+    colors?: AutoCustomizeConfigDataColors;
+    components?: AutoCustomizeConfigDataComponents;
+    space?: number;
+};
+export declare const autoCustomizeConfigdefaultData: AutoCustomizeConfigData;
+export declare const useAutoCustomizeConfigStore: {
+    readonly data: AutoCustomizeConfigData;
+    readonly updatedAt: number;
+    updateData(newData: Partial<AutoCustomizeConfigData>): void;
+    updateDataColor(newData: Partial<AutoCustomizeConfigDataColors>): void;
+    updateDataComponents(newData: Partial<AutoCustomizeConfigDataComponents>): void;
+    reset(): void;
+};