@flightlesslabs/dodo-ui 0.17.1 → 0.18.0

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export type { ComponentRoundness } from './types/roundness.js';
 export type { ComponentSize } from './types/size.js';
 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 './stories/developer tools/helpers/logger/logger.js';
 export type { LogLevel, LoggerOptions, } from './stories/developer tools/helpers/logger/logger.js';
@@ -50,7 +51,7 @@ export { default as Message } from './stories/components/Form/Message/Message.sv
 export type { MessageProps } from './stories/components/Form/Message/Message.svelte';
 /** Form: Select */
 export { default as Select } from './stories/components/Form/Select/Select.svelte';
-export type { SelectOption, SelectDropdownArrowPosition, SelectProps, } from './stories/components/Form/Select/Select.svelte';
+export type { SelectOption, SelectProps } from './stories/components/Form/Select/Select.svelte';
 /** Form: NumericInput */
 export { default as NumericInput } from './stories/components/Form/NumericInput/NumericInput.svelte';
 export type { NumericInputProps } from './stories/components/Form/NumericInput/NumericInput.svelte';
@@ -89,6 +90,9 @@ export { default as Row } from './stories/components/Layout/Grid/Row/Row.svelte'
 export type { GridRowProps } from './stories/components/Layout/Grid/Row/Row.svelte';
 export { default as Column } from './stories/components/Layout/Grid/Column/Column.svelte';
 export type { GridColumnSize, GridColumnProps, } from './stories/components/Layout/Grid/Column/Column.svelte';
+/** Layout: Accordian */
+export { default as Accordian } from './stories/components/Layout/Accordian/Accordian.svelte';
+export type { AccordianProps, AccordianToggleEvent, } from './stories/components/Layout/Accordian/Accordian.svelte';
 /** Info: Calendar */
 export { default as Calendar } from './stories/components/Info/Calendar/Calendar.svelte';
 export type { CalendarProps, CalendarActiveSection, } from './stories/components/Info/Calendar/Calendar.svelte';

package/dist/index.js

@@ -55,6 +55,8 @@ export { default as DynamicMenu } from './stories/components/Layout/Menu/Dynamic
 export { default as Grid } from './stories/components/Layout/Grid/Grid.svelte';
 export { default as Row } from './stories/components/Layout/Grid/Row/Row.svelte';
 export { default as Column } from './stories/components/Layout/Grid/Column/Column.svelte';
+/** Layout: Accordian */
+export { default as Accordian } from './stories/components/Layout/Accordian/Accordian.svelte';
 /** Info: Calendar */
 export { default as Calendar } from './stories/components/Info/Calendar/Calendar.svelte';
 export { default as CalendarDatesChart } from './stories/components/Info/Calendar/SubComponents/CalendarDatesChart/CalendarDatesChart.svelte';

package/dist/stories/Home.mdx

@@ -11,7 +11,7 @@ import item from '../../../package.json?raw';
 
 <h3 style={{ fontWeight: 400 }}>An open-source, opinionated UI framework for Svelte.</h3>
 
-### [Github](https://github.com/flightlesslabs/dodo-ui) - [npm](https://www.npmjs.com/package/@flightlesslabs/dodo-ui)
+### [Github](https://github.com/flightlesslabs/dodo-ui) - [npm](https://www.npmjs.com/package/@flightlesslabs/dodo-ui) - [Customize](?path=/docs/developer-tools-customize-autocustomize--docs)
 
 </main>
 
@@ -68,4 +68,5 @@ import { Button } '@flightlesslabs/dodo-ui';
 
 - [Dark Theme](?path=/docs/developer-tools-philosophy-themes--docs#dark-theme)
 - [Colors](?path=/docs/developer-tools-philosophy-colors--docs)
+- [Customize](?path=/docs/developer-tools-customize-autocustomize--docs)
 - [Adjust Color Opacity](?path=/docs/developer-tools-philosophy-colors--docs#adjusting-opacity)

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

@@ -271,7 +271,6 @@ let { children, type = 'button', size = 'normal', color = 'primary', roundness =
 
 .dodo-ui-Button {
   cursor: pointer;
-  outline: none;
   transition: all 150ms;
   text-decoration: none;
   margin: 0;
@@ -283,7 +282,6 @@ let { children, type = 'button', size = 'normal', color = 'primary', roundness =
   border-style: solid;
   border-width: var(--dodo-ui-element-border-width);
   border-color: transparent;
-  outline: 0;
   color: inherit;
   letter-spacing: 0.3px;
 }

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

@@ -239,7 +239,6 @@ let { children, size = 'normal', color = 'primary', roundness = 'full', name, id
   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/dist/stories/components/Form/Select/Select.svelte.d.ts

@@ -7,7 +7,6 @@ export type SelectOption = {
     label: string;
     disabled?: boolean;
 };
-export type SelectDropdownArrowPosition = false | 'before' | 'after';
 export interface SelectProps {
     /** How large should the button be? */
     size?: ComponentSize;
@@ -90,7 +89,7 @@ export interface SelectProps {
     /** Dropdown Arrow Icon */
     customDropdownArrowIcon?: (open: boolean) => Snippet;
     /** Select Dropdown Arrow Position */
-    dropdownArrowPosition?: SelectDropdownArrowPosition;
+    dropdownArrowPosition?: DropdownArrowPosition;
     /** Popup stick horizontally  */
     popupPositionX?: PositionX;
     /** Popup stick vertically  */
@@ -103,6 +102,7 @@ export interface SelectProps {
     open?: boolean;
 }
 import { type MenuItemProps, type MenuProps, type PaperProps, type PopperProps, type PositionX, type PositionY } from '../../../../index.js';
+import type { DropdownArrowPosition } from '../../../../types/special.js';
 declare const Select: import("svelte").Component<SelectProps, {}, "ref" | "open">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/stories/components/Layout/Accordian/Accordian.stories.svelte

@@ -0,0 +1,52 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Accordian from './Accordian.svelte';
+import { componentSizeArray } from '../../../../types/size.js';
+export const storyAccordianArgTypes = {
+    size: {
+        control: { type: 'select' },
+        options: componentSizeArray,
+    },
+};
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Accordian,
+    tags: ['autodocs'],
+    argTypes: storyAccordianArgTypes,
+});
+</script>
+
+<Story name="Default" asChild>
+  <Accordian>
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>
+
+<Story name="Open by Default" asChild>
+  <Accordian defaultOpen={true}>
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>
+
+<Story name="Full Width Summary" asChild>
+  <Accordian fullWidthSummary>
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>

package/dist/stories/components/Layout/Accordian/Accordian.stories.svelte.d.ts

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

package/dist/stories/components/Layout/Accordian/Accordian.svelte

@@ -0,0 +1,121 @@
+<script lang="ts" module>import Icon from '@iconify/svelte';
+import { onMount } from 'svelte';
+</script>
+
+<script lang="ts">"use strict";
+let { class: className = '', ref = $bindable(), ontoggle, open = $bindable(), defaultOpen, summary, children, size = 'normal', fullWidthSummary = false, customDropdownArrowIcon: customDropdownArrowIconInternal, dropdownArrowPosition = 'before', } = $props();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customDropdownArrowIconTyped = customDropdownArrowIconInternal;
+let isUserInteraction = $state(false);
+function ontoggleMod(e) {
+    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>.dodo-ui-Accordian {
+  color: var(--dodo-color-neutral-900);
+  width: 100%;
+}
+.dodo-ui-Accordian summary {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  font-weight: 500;
+}
+.dodo-ui-Accordian.fullWidthSummary summary {
+  display: flex;
+  width: 100%;
+}
+.dodo-ui-Accordian[open] .IconOpen {
+  display: flex;
+}
+.dodo-ui-Accordian[open] .IconClose {
+  display: none;
+}
+.dodo-ui-Accordian:not([open]) .IconOpen {
+  display: none;
+}
+.dodo-ui-Accordian:not([open]) .IconClose {
+  display: flex;
+}
+.dodo-ui-Accordian.size--normal summary {
+  font-size: 1rem;
+  min-height: var(--dodo-ui-element-height-normal);
+}
+.dodo-ui-Accordian.size--small summary {
+  font-size: 0.9rem;
+  min-height: var(--dodo-ui-element-height-small);
+}
+.dodo-ui-Accordian.size--large summary {
+  font-size: 1.1rem;
+  min-height: var(--dodo-ui-element-height-large);
+}
+.dodo-ui-Accordian .AccordianContent {
+  margin-top: var(--dodo-ui-space);
+}</style>

package/dist/stories/components/Layout/Accordian/Accordian.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentSize } from '../../../../types/size.js';
+import type { DropdownArrowPosition } from '../../../../types/special.js';
+import { 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;
+}
+declare const Accordian: import("svelte").Component<AccordianProps, {}, "ref" | "open">;
+type Accordian = ReturnType<typeof Accordian>;
+export default Accordian;

package/dist/stories/components/Layout/Accordian/Customize/Customize.stories.svelte

@@ -0,0 +1,69 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Accordian from '../Accordian.svelte';
+import { storyAccordianArgTypes } from '../Accordian.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: Accordian,
+    tags: ['autodocs'],
+    argTypes: storyAccordianArgTypes,
+});
+let open = $state(true);
+</script>
+
+<Story name="DropdownArrowPositionBefore" asChild>
+  <Accordian>
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>
+
+<Story name="DropdownArrowPositionAfter" asChild>
+  <Accordian dropdownArrowPosition="after">
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>
+
+<Story name="HideDropdownArrow" asChild>
+  <Accordian dropdownArrowPosition={false}>
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>
+
+<!-- Format look and feel Dropdown Arrow icon  -->
+<Story name="CustomDropdownArrowIcon" asChild>
+  <Accordian {open} ontoggle={() => (open = !open)}>
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+
+    {#snippet customDropdownArrowIcon(open)}
+      {#if open}
+        <Icon icon="mingcute:up-fill" width="24" height="24" />
+      {:else}
+        <Icon icon="mingcute:down-fill" width="24" height="24" />
+      {/if}
+    {/snippet}
+  </Accordian>
+</Story>

package/dist/stories/components/Layout/Accordian/Customize/Customize.stories.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 Customize: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Customize = InstanceType<typeof Customize>;
+export default Customize;

package/dist/stories/components/Layout/Accordian/Events/Events.stories.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import { storyAccordianArgTypes } from '../Accordian.stories.svelte';
+import Accordian, {} from '../Accordian.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Accordian,
+    tags: ['autodocs'],
+    argTypes: storyAccordianArgTypes,
+});
+let open = $state(false);
+</script>
+
+<Story name="Toggle" asChild>
+  <Accordian
+    {open}
+    ontoggle={(e: AccordianToggleEvent) => {
+      open = !open;
+
+      console.log('Input Event', e);
+    }}
+  >
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>

package/dist/stories/components/Layout/Accordian/Events/Events.stories.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 Events: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Events = InstanceType<typeof Events>;
+export default Events;

package/dist/stories/components/Layout/Accordian/Size/Size.stories.svelte

@@ -0,0 +1,48 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Accordian from '../Accordian.svelte';
+  import { storyAccordianArgTypes } from '../Accordian.stories.svelte';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    component: Accordian,
+    tags: ['autodocs'],
+    argTypes: storyAccordianArgTypes,
+  });
+</script>
+
+<Story name="Normal" asChild>
+  <Accordian>
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>
+
+<Story name="Small" asChild>
+  <Accordian size="small">
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>
+
+<Story name="Larger" asChild>
+  <Accordian size="large">
+    {#snippet summary()}
+      Click me!
+    {/snippet}
+
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur nisi hic accusamus,
+    mollitia velit corporis, sit culpa nam ducimus quisquam aliquam eos atque doloribus architecto
+    at harum, explicabo et doloremque.
+  </Accordian>
+</Story>

package/dist/stories/components/Layout/Accordian/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/Intro.mdx

@@ -4,6 +4,7 @@ A set of components and tools used internally in dodo-ui.
 
 ## Explore More
 
+- [Customize](?path=/docs/developer-tools-customize-autocustomize--docs)
 - [Utility Button](?path=/docs/developer-tools-components-utilitybutton--docs)
 - [Colors](?path=/docs/developer-tools-philosophy-colors--docs)
 - [Adjust Color Opacity](?path=/docs/developer-tools-philosophy-colors--docs#adjusting-opacity)

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

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

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

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

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

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