@flightlesslabs/dodo-ui 0.6.5 → 0.7.0

package/src/lib/stories/developer tools/components/InputEnclosure/InputEnclosure.svelte

@@ -1,8 +1,9 @@
-<script lang="ts">
-  import type { ComponentRoundness, ComponentSize } from '$lib/types.js';
+<script lang="ts" module>
+  import type { ComponentRoundness } from '$lib/types/roundness.js';
+  import type { ComponentSize } from '$lib/types/size.js';
   import type { Snippet } from 'svelte';
 
-  interface InputEnclosureProps {
+  export interface InputEnclosureProps {
     /** InputEnclosure contents goes here */
     children?: Snippet;
     /** InputEnclosure ref */
@@ -10,7 +11,7 @@
     /** How large should the button be? */
     size?: ComponentSize;
     /** How round should the border radius be? */
-    roundness?: ComponentRoundness | false;
+    roundness?: ComponentRoundness;
     /** Add a border around the button. Default True */
     outline?: boolean;
     /** disabled state */
@@ -26,10 +27,12 @@
     /** Custom css class*/
     class?: string;
   }
+</script>
 
+<script lang="ts">
   let {
     size = 'normal',
-    roundness = '1x',
+    roundness = 1,
     outline = true,
     class: className = '',
     disabled = false,
@@ -61,6 +64,7 @@
   {#if children}
     {@render children()}
   {/if}
+
   {#if after}
     <span class="content--after">
       {@render after()}
@@ -70,27 +74,27 @@
 
 <style lang="scss">
   :global(:root) {
-    --dodo-ui-InputEnclosure-border-color: var(--dodo-color-default-500);
+    --dodo-ui-InputEnclosure-border-color: var(--dodo-color-neutral-500);
     --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-500);
     --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-500);
 
-    --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-default-400);
-    --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-default-200);
+    --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-neutral-400);
+    --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-neutral-200);
   }
 
   :global(.dodo-theme--dark) {
-    --dodo-ui-InputEnclosure-border-color: var(--dodo-color-default-600);
+    --dodo-ui-InputEnclosure-border-color: var(--dodo-color-neutral-600);
     --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-600);
     --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-600);
 
-    --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-default-100);
-    --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-default-500);
+    --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-neutral-100);
+    --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-neutral-500);
   }
 
   .dodo-ui-InputEnclosure {
     display: flex;
     overflow: hidden;
-    color: var(--dodo-color-default-800);
+    color: var(--dodo-color-neutral-800);
     transition: all 150ms;
     border: 0;
 
@@ -182,16 +186,16 @@
     }
 
     &.roundness {
-      &--1x {
-        border-radius: var(--dodo-ui-element-roundness-1x);
+      &--1 {
+        border-radius: var(--dodo-ui-element-roundness-1);
       }
 
-      &--2x {
-        border-radius: var(--dodo-ui-element-roundness-2x);
+      &--2 {
+        border-radius: var(--dodo-ui-element-roundness-2);
       }
 
-      &--3x {
-        border-radius: var(--dodo-ui-element-roundness-3x);
+      &--3 {
+        border-radius: var(--dodo-ui-element-roundness-3);
       }
     }
   }

package/src/lib/stories/developer tools/components/Popper/Popper.svelte

@@ -0,0 +1,159 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+  import PopperPopup from './PopperPopup/PopperPopup.svelte';
+  import type { PaperProps } from '$lib/stories/components/Layout/Paper/Paper.svelte';
+  import { clickOutside } from '$lib/stories/developer tools/directives/clickOutside/clickOutside.js';
+  import type { PositionX, PositionY } from '$lib/types/position.js';
+
+  export interface PopperProps {
+    /** Popper contents goes here */
+    children?: Snippet;
+    /** Popper ref */
+    ref?: HTMLDivElement;
+    /** Id */
+    id?: string;
+    /** Title (for tooltip) */
+    title?: string;
+    /** Custom css class*/
+    class?: string;
+    /** Open popper */
+    open?: boolean;
+    /** Full width Popper? */
+    fullWidth?: boolean;
+    /** PopperPopup ref */
+    popupRef?: HTMLDivElement;
+    /** PopperPopup contents goes here */
+    popupChildren?: Snippet;
+    /** PaperProps: Paper component props for PopperPopup */
+    paperProps?: Partial<PaperProps>;
+    /** PopperPopup Max height. Use css compatible value */
+    popupMaxHeight?: string;
+    /** PopperPopup Width. Use css compatible value */
+    popupWidth?: string;
+    /** popup Custom css class*/
+    popupClass?: string;
+    /** Popup stick horizontally  */
+    popupPositionX?: PositionX;
+    /** Popup stick vertically  */
+    popupPositionY?: PositionY;
+    /** vertical offset/gap between Popup and content  */
+    popupOffsetY?: number;
+    /** Horizontal offset/gap between Popup and content  */
+    popupOffsetX?: number;
+    /** Lock positions, disable auto top, bottom position based  */
+    lockPoistions?: boolean;
+    /** Popper Height For Vertical Position, default 300 */
+    popperHeightForVerticalPosition?: number;
+    /** Click Outside event */
+    onClickOutside?: () => void;
+    /** Custom Popup */
+    customPopup?: (popperLocation?: DOMRect) => Snippet;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    children,
+    popupChildren,
+    id,
+    class: className = '',
+    ref = $bindable<HTMLDivElement>(),
+    open = false,
+    popupRef = $bindable<HTMLDivElement>(),
+    paperProps,
+    popupMaxHeight,
+    popupWidth,
+    popupClass,
+    popupPositionX,
+    popupPositionY,
+    popupOffsetX,
+    popupOffsetY,
+    onClickOutside = () => {},
+    customPopup,
+    popperHeightForVerticalPosition,
+    lockPoistions,
+    fullWidth = false,
+  }: PopperProps = $props();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customPopupTyped = customPopup as any;
+
+  let popperContainerRef = $state<HTMLDivElement>();
+  let popperLocation = $state<DOMRect>();
+
+  function capturePopperLocation() {
+    if (!popperContainerRef) {
+      return;
+    }
+
+    popperLocation = popperContainerRef.getBoundingClientRect();
+  }
+
+  $effect(() => {
+    if (!popperContainerRef) {
+      return;
+    }
+
+    capturePopperLocation();
+
+    window.addEventListener('resize', capturePopperLocation);
+
+    return () => {
+      window.removeEventListener('resize', capturePopperLocation);
+    };
+  });
+</script>
+
+<div
+  class:fullWidth
+  class={['dodo-ui-Popper', className].join(' ')}
+  bind:this={ref}
+  {id}
+  use:clickOutside={onClickOutside}
+>
+  <div class="PopperContainer" bind:this={popperContainerRef}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+
+  {#if customPopupTyped}
+    {@render customPopupTyped(popperLocation)}
+  {:else if open && popperLocation}
+    <PopperPopup
+      {popperLocation}
+      {paperProps}
+      {popupMaxHeight}
+      {popupWidth}
+      {popupPositionX}
+      {popupPositionY}
+      {popupOffsetX}
+      {popupOffsetY}
+      {popperHeightForVerticalPosition}
+      {lockPoistions}
+      class={popupClass}
+    >
+      {#if popupChildren}
+        {@render popupChildren()}
+      {/if}
+    </PopperPopup>
+  {/if}
+</div>
+
+<style lang="scss">
+  .dodo-ui-Popper {
+    position: relative;
+    display: inline-flex;
+    flex-wrap: wrap;
+
+    &.fullWidth {
+      display: flex;
+      width: 100%;
+
+      .PopperContainer {
+        display: block;
+        width: 100%;
+      }
+    }
+  }
+</style>

package/src/lib/stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte

@@ -0,0 +1,120 @@
+<script lang="ts" module>
+  import { Paper } from '$lib/index.js';
+  import type { PaperProps } from '$lib/stories/components/Layout/Paper/Paper.svelte';
+  import type { PositionX, PositionY } from '$lib/types/position.js';
+  import type { Snippet } from 'svelte';
+  import { getPopupPosition } from './utils/getPopupPosition.js';
+
+  export interface PopperPopupProps {
+    /** Popup contents goes here*/
+    children?: Snippet;
+    /** Popup ref */
+    ref?: HTMLDivElement;
+    /** PaperProps: Paper component props */
+    paperProps?: Partial<PaperProps>;
+    /** Max height. Use css compatible value */
+    popupMaxHeight?: string;
+    /** popup Width. Use css compatible value */
+    popupWidth?: string;
+    /** Custom css class */
+    class?: string;
+    /** Position of Popper content */
+    popperLocation?: DOMRect;
+    /** Popup stick horizontally  */
+    popupPositionX?: PositionX;
+    /** Popup stick vertically  */
+    popupPositionY?: PositionY;
+    /** vertical offset/gap between Popup and content  */
+    popupOffsetY?: number;
+    /** Horizontal offset/gap between Popup and content  */
+    popupOffsetX?: number;
+    /** Lock positions, disable auto top, bottom position based  */
+    lockPoistions?: boolean;
+    /** Popper Height For Vertical Position, default 300 */
+    popperHeightForVerticalPosition?: number;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    children,
+    paperProps = {},
+    class: className = '',
+    popupWidth: width,
+    popupMaxHeight: maxHeight,
+    popupPositionX: positionX = 'left',
+    popupPositionY: positionY = 'bottom',
+    popperLocation,
+    ref = $bindable<HTMLDivElement>(),
+    popupOffsetX: offsetX = 0,
+    popupOffsetY: offsetY = 12,
+    popperHeightForVerticalPosition = 100,
+    lockPoistions = false,
+  }: PopperPopupProps = $props();
+
+  const popperWidth = $derived(width || '100%');
+  const popupMaxHeight = $derived(maxHeight || '400px');
+
+  let left = $state<number | null>(null);
+  let right = $state<number | null>(null);
+  let top = $state<number | null>(null);
+  let bottom = $state<number | null>(null);
+
+  $effect(() => {
+    const values = getPopupPosition({
+      positionX,
+      positionY,
+      height: popperLocation?.height || 0,
+      width: popperLocation?.width || 0,
+      top: popperLocation?.top || 0,
+      bottom: popperLocation?.bottom || 0,
+      left: popperLocation?.left || 0,
+      right: popperLocation?.right || 0,
+      offsetX: offsetX,
+      offsetY: offsetY,
+      popperHeight: popperHeightForVerticalPosition,
+      lockPoistions,
+    });
+
+    left = values.left;
+    right = values.right;
+    top = values.top;
+    bottom = values.bottom;
+  });
+</script>
+
+<div
+  class={[
+    'dodo-ui-PopperPopup',
+    `positionX--${positionX}`,
+    `positionY--${positionY}`,
+    className,
+  ].join(' ')}
+  bind:this={ref}
+  style={`width: ${popperWidth};
+  ${left !== null ? `left: ${left}px;` : ''}
+  ${right !== null ? `right: ${right}px;` : ''}
+  ${top !== null ? `top: ${top}px;` : ''}
+  ${bottom !== null ? `bottom: ${bottom}px;` : ''}
+  ${positionX === 'center' ? `margin: auto;` : ''}
+  `}
+>
+  <Paper shadow={3} {...paperProps}>
+    <section style={`max-height: ${popupMaxHeight};`}>
+      {#if children}
+        {@render children()}
+      {/if}
+    </section>
+  </Paper>
+</div>
+
+<style lang="scss">
+  .dodo-ui-PopperPopup {
+    position: absolute;
+    z-index: var(--dodo-ui-z-index-4);
+
+    section {
+      overflow: auto;
+    }
+  }
+</style>

package/src/lib/stories/developer tools/components/Popper/PopperPopup/utils/getPopupPosition.ts

@@ -0,0 +1,87 @@
+import { browser } from '$app/environment';
+import type { PositionX, PositionY } from '$lib/types/position.js';
+
+export interface GetPopupPositionProps {
+  positionX: PositionX;
+  positionY: PositionY;
+  height: number;
+  width: number;
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+  offsetX?: number;
+  offsetY?: number;
+  popperHeight: number;
+  lockPoistions: boolean;
+}
+
+export function getPopupPosition(props: GetPopupPositionProps) {
+  let left: null | number = null;
+  let right: null | number = null;
+  let top: null | number = null;
+  let bottom: null | number = null;
+
+  // exit if not browser
+  if (!browser) {
+    return {
+      left,
+      right,
+      top,
+      bottom,
+    };
+  }
+
+  const innerHeight = window.innerHeight;
+
+  const gapBottom = innerHeight - props.bottom;
+  const popperHeight = props.popperHeight;
+
+  const offsetX = props.offsetX ? props.offsetX : 0;
+  const offsetY = props.offsetY ? props.offsetY : 0;
+
+  const positionX = props.positionX;
+  let positionY = props.positionY;
+
+  if (!props.lockPoistions) {
+    if (positionY === 'top' && props.top < popperHeight + offsetY) {
+      positionY = 'bottom';
+    } else if (positionY === 'bottom' && gapBottom < popperHeight + offsetY) {
+      positionY = 'top';
+    }
+  }
+
+  switch (positionX) {
+    case 'left':
+      left = offsetX;
+      right = null;
+      break;
+    case 'center':
+      left = 0;
+      right = 0;
+      break;
+    case 'right':
+      left = null;
+      right = offsetX;
+      break;
+  }
+
+  switch (positionY) {
+    case 'top':
+    case 'middle':
+      top = null;
+      bottom = props.height + offsetY;
+      break;
+    case 'bottom':
+      top = props.height + offsetY;
+      bottom = null;
+      break;
+  }
+
+  return {
+    left,
+    right,
+    top,
+    bottom,
+  };
+}

package/src/lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">
-  import type { ComponentSize } from '$lib/types.js';
+<script lang="ts" module>
+  import type { ComponentSize } from '$lib/types/size.js';
   import type { Snippet } from 'svelte';
   import type { MouseEventHandler } from 'svelte/elements';
 
-  interface UtilityButtonProps {
+  export interface UtilityButtonProps {
     /** Button contents goes here*/
     children?: Snippet;
     /** Button ref */
@@ -23,7 +23,9 @@
     /** The onclick event handler */
     onclick?: MouseEventHandler<HTMLButtonElement>;
   }
+</script>
 
+<script lang="ts">
   let {
     children,
     size = 'normal',
@@ -56,14 +58,14 @@
     --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);
+    --dodo-ui-UtilityButton-disabled-color: var(--dodo-color-neutral-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-disabled-color: var(--dodo-color-neutral-500);
   }
 
   .dodo-ui-UtilityButton {
@@ -80,7 +82,7 @@
     border: 0;
     outline: 0;
     padding: 0;
-    color: var(--dodo-color-default-700);
+    color: var(--dodo-color-neutral-700);
     border-radius: 50%;
     font-family: inherit;
 

package/src/lib/stories/developer tools/directives/clickOutside/clickOutside.ts

@@ -0,0 +1,17 @@
+export function clickOutside(node: Element, callback: () => void) {
+  const handleClick = (event: MouseEvent) => {
+    const target = event.target as Node;
+
+    if (node && !node.contains(target) && !event.defaultPrevented) {
+      callback();
+    }
+  };
+
+  document.addEventListener('click', handleClick, true);
+
+  return {
+    destroy() {
+      document.removeEventListener('click', handleClick, true);
+    },
+  };
+}

package/src/lib/stories/{philosophy/Colors/Swatches/Palette.svelte → developer tools/philosophy/Colors/Swatches/Palette.svelte }

@@ -25,7 +25,7 @@
     height: 60px;
     border-radius: 4px;
     border: 1px solid;
-    border-color: color-mix(in oklab, var(--dodo-color-default-800) 20%, transparent);
+    border-color: color-mix(in oklab, var(--dodo-color-neutral-800) 20%, transparent);
     background: transparent;
     min-width: initial;
     margin: 0;

package/src/lib/stories/{philosophy/Colors/Swatches/Swatch.svelte → developer tools/philosophy/Colors/Swatches/Swatch.svelte }

@@ -22,7 +22,7 @@
 
 <style lang="scss">
   .Swatch {
-    color: var(--dodo-color-default-900);
+    color: var(--dodo-color-neutral-900);
     display: flex;
     align-items: center;
     flex-direction: column;

package/src/lib/stories/{philosophy/Colors/Swatches/Swatches.svelte → developer tools/philosophy/Colors/Swatches/Swatches.svelte }

@@ -29,7 +29,7 @@
 
 <style lang="scss">
   .Swatches {
-    color: var(--dodo-color-default-900);
+    color: var(--dodo-color-neutral-900);
     margin: 0;
     padding: 0;
     width: 150px;

package/src/lib/stories/{philosophy/Colors/utils/color.ts → developer tools/philosophy/Colors/utils/color.ts }

@@ -24,7 +24,7 @@ export const colorPaletteBase = [
 
 export const colorPaletteNeutral = ['black', 'white'];
 
-export const colorPalette = ['default', 'primary', 'safe', 'warning', 'danger', 'secondary'];
+export const colorPalette = ['primary', 'secondary', 'neutral', 'safe', 'warning', 'danger'];
 
 export const colorPaletteValues = [
   '50',