@flightlesslabs/dodo-ui 0.19.1 → 1.0.0--beta-2

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

@@ -1,58 +0,0 @@
-<script lang="ts" module>export {};
-</script>
-
-<script lang="ts">"use strict";
-let { children, size = 'normal', id, class: className = '', disabled = false, ref = $bindable(), } = $props();
-</script>
-
-<span
-  class={['dodo-ui-UtilityIcon', `size--${size}`, className].join(' ')}
-  class:disabled
-  {id}
-  bind:this={ref}
->
-  {#if children}
-    {@render children()}
-  {/if}
-</span>
-
-<style>:global(:root) {
-  --dodo-ui-UtilityIcon-disabled-color: var(--dodo-color-neutral-400);
-}
-
-:global(.dodo-theme--dark) {
-  --dodo-ui-UtilityIcon-disabled-color: var(--dodo-color-neutral-500);
-}
-
-.dodo-ui-UtilityIcon {
-  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;
-  color: var(--dodo-color-neutral-600);
-  font-family: inherit;
-}
-.dodo-ui-UtilityIcon.size--normal {
-  height: var(--dodo-ui-element-height-normal);
-  width: var(--dodo-ui-element-height-normal);
-  font-size: 1rem;
-}
-.dodo-ui-UtilityIcon.size--small {
-  height: var(--dodo-ui-element-height-small);
-  width: var(--dodo-ui-element-height-small);
-  font-size: 0.9rem;
-}
-.dodo-ui-UtilityIcon.size--large {
-  height: var(--dodo-ui-element-height-large);
-  width: var(--dodo-ui-element-height-large);
-  font-size: 1.1rem;
-}
-.dodo-ui-UtilityIcon.disabled {
-  cursor: initial;
-  color: var(--dodo-ui-UtilityIcon-disabled-color);
-}</style>

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

@@ -1,19 +0,0 @@
-import type { ComponentSize } from '../../../../types/size.js';
-import type { Snippet } from 'svelte';
-export interface UtilityIconProps {
-    /** Button contents goes here*/
-    children?: Snippet;
-    /** Button ref */
-    ref?: HTMLSpanElement;
-    /** How large should the button be? */
-    size?: ComponentSize;
-    /** Button disabled state */
-    disabled?: boolean;
-    /** Id */
-    id?: string;
-    /** Custom css class*/
-    class?: string;
-}
-declare const UtilityIcon: import("svelte").Component<UtilityIconProps, {}, "ref">;
-type UtilityIcon = ReturnType<typeof UtilityIcon>;
-export default UtilityIcon;

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

@@ -1,4 +0,0 @@
-import { Meta, Story } from '@storybook/addon-docs/blocks';
-import * as ToolStories from './Tool/Tool.stories.svelte';
-
-<Story of={ToolStories.Main} />

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

@@ -1,42 +0,0 @@
-<script lang="ts">import Icon from '@iconify/svelte';
-const { color, selectedColor, onclick } = $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>.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;
-}
-.ColorButton :global(svg) {
-  position: absolute;
-  display: none;
-}
-.ColorButton.selectedColor {
-  border-color: var(--dodo-color-primary-600);
-}
-.ColorButton.selectedColor :global(svg) {
-  display: block;
-}</style>

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

@@ -1,8 +0,0 @@
-interface ColorButtonProps {
-    color: string;
-    selectedColor?: string;
-    onclick?: (color: string) => void;
-}
-declare const ColorButton: import("svelte").Component<ColorButtonProps, {}, "">;
-type ColorButton = ReturnType<typeof ColorButton>;
-export default ColorButton;

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

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

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

@@ -1,9 +0,0 @@
-interface ColorToolProps {
-    label?: string;
-    colors?: string[];
-    selectedColor?: string;
-    onclick?: (color: string) => void;
-}
-declare const ColorTool: import("svelte").Component<ColorToolProps, {}, "">;
-type ColorTool = ReturnType<typeof ColorTool>;
-export default ColorTool;

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

@@ -1,144 +0,0 @@
-<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

@@ -1,18 +0,0 @@
-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

@@ -1,123 +0,0 @@
-<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

@@ -1,18 +0,0 @@
-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

@@ -1,32 +0,0 @@
-<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

@@ -1,11 +0,0 @@
-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;