npm - @flightlesslabs/dodo-ui - Versions diffs - 0.19.1 → 1.0.0--beta-2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (678) hide show

package/dist/stories/developer tools/philosophy/Colors/utils/color.d.ts DELETED Viewed

@@ -1,4 +0,0 @@
-export declare const colorPaletteBase: string[];
-export declare const colorPaletteNeutral: string[];
-export declare const colorPalette: string[];
-export declare const colorPaletteValues: string[];

package/dist/stories/developer tools/philosophy/Colors/utils/color.js DELETED Viewed

@@ -1,38 +0,0 @@
-export const colorPaletteBase = [
-    'red',
-    'orange',
-    'amber',
-    'yellow',
-    'lime',
-    'green',
-    'emerald',
-    'teal',
-    'cyan',
-    'blue',
-    'indigo',
-    'violet',
-    'purple',
-    'fuchsia',
-    'pink',
-    'rose',
-    'slate',
-    'gray',
-    'zinc',
-    'neutral',
-    'stone',
-];
-export const colorPaletteNeutral = ['black', 'white'];
-export const colorPalette = ['primary', 'secondary', 'neutral', 'safe', 'warning', 'danger'];
-export const colorPaletteValues = [
-    '50',
-    '100',
-    '200',
-    '300',
-    '400',
-    '500',
-    '600',
-    '700',
-    '800',
-    '900',
-    '950',
-];

package/dist/stories/developer tools/philosophy/Themes.mdx DELETED Viewed

@@ -1,23 +0,0 @@
-import { Source } from '@storybook/addon-docs/blocks';
-import darkThemeToggleImage from '$lib/stories/assets/dark-theme-toggle.png';
-# Themes
-## Dark theme
-dark theme can be activated by adding `.dodo-theme--dark` class on the top container.
-<Source
-  dark
-  language="html"
-  code={`
- <body class="dodo-theme--dark">
- ...
-`}
-/>
-## Toggle theme in documentation
-Use the moon icon to toogle theme in documentation mode
-<img src={darkThemeToggleImage} />

package/dist/types/colors.d.ts DELETED Viewed

@@ -1,7 +0,0 @@
-/** Component Color*/
-export type ComponentColorPriority = 'primary' | 'secondary' | 'neutral';
-export declare const componentColorPriorityArray: ComponentColorPriority[];
-export type ComponentColorSeverity = 'safe' | 'warning' | 'danger';
-export declare const componentColorSeverityArray: ComponentColorSeverity[];
-export type ComponentColor = ComponentColorPriority | ComponentColorSeverity;
-export declare const componentColorArray: ComponentColor[];

package/dist/types/colors.js DELETED Viewed

@@ -1,10 +0,0 @@
-export const componentColorPriorityArray = [
-    'primary',
-    'secondary',
-    'neutral',
-];
-export const componentColorSeverityArray = ['safe', 'warning', 'danger'];
-export const componentColorArray = [
-    ...componentColorPriorityArray,
-    ...componentColorSeverityArray,
-];

package/dist/types/position.d.ts DELETED Viewed

@@ -1,4 +0,0 @@
-export type PositionY = 'top' | 'middle' | 'bottom';
-export type PositionX = 'left' | 'center' | 'right';
-export declare const positionYArray: PositionY[];
-export declare const positionXArray: PositionX[];

package/dist/types/position.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- export const positionYArray = ['top', 'bottom'];
2	- export const positionXArray = ['left', 'center', 'right'];

package/dist/types/roundness.d.ts DELETED Viewed

@@ -1,3 +0,0 @@
-/** Component Roundness */
-export type ComponentRoundness = 0 | 1 | 2 | 3 | 'full';
-export declare const componentRoundnessArray: ComponentRoundness[];

package/dist/types/roundness.js DELETED Viewed

	@@ -1 +0,0 @@
1	- export const componentRoundnessArray = [0, 1, 2, 3, 'full'];

package/dist/types/shadow.d.ts DELETED Viewed

@@ -1,3 +0,0 @@
-/** Component Shadow */
-export type ComponentShadow = 0 | 1 | 2 | 3 | 4 | 5;
-export declare const componentShadowArray: ComponentShadow[];

package/dist/types/shadow.js DELETED Viewed

	@@ -1 +0,0 @@
1	- export const componentShadowArray = [0, 1, 2, 3, 4, 5];

package/dist/types/size.d.ts DELETED Viewed

@@ -1,3 +0,0 @@
-/** Component Size */
-export type ComponentSize = 'normal' | 'small' | 'large';
-export declare const componentSizeArray: ComponentSize[];

package/dist/types/size.js DELETED Viewed

	@@ -1 +0,0 @@
1	- export const componentSizeArray = ['normal', 'small', 'large'];

package/dist/types/special.d.ts DELETED Viewed

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

package/dist/types/special.js DELETED Viewed

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

package/dist/types/weight.d.ts DELETED Viewed

@@ -1,3 +0,0 @@
-/** Component Weight */
-export type ComponentWeight = 'solid' | 'text';
-export declare const componentWeightArray: ComponentWeight[];

package/dist/types/weight.js DELETED Viewed

	@@ -1 +0,0 @@
1	- export const componentWeightArray = ['solid', 'text'];

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

@@ -1,357 +0,0 @@
-<script lang="ts" module>
-  import type { ComponentColor } from '$lib/types/colors.js';
-  import type { ComponentRoundness } from '$lib/types/roundness.js';
-  import type { ComponentSize } from '$lib/types/size.js';
-  import type { ComponentWeight } from '$lib/types/weight.js';
-  import type { Snippet } from 'svelte';
-  import type { MouseEventHandler } from 'svelte/elements';
-  export type ButtonLinkTarget =
-    | '_self'
-    | '_blank'
-    | '_parent'
-    | '_top'
-    | (string & {})
-    | undefined
-    | null;
-  export type ButtonLinkReferrerpolicy = ReferrerPolicy | undefined | null;
-  export type ButtonType = 'button' | 'submit' | 'reset';
-  export const buttonTypeArray: ButtonType[] = ['button', 'submit', 'reset'];
-  export type ButtonClickEvent = MouseEvent & {
-    currentTarget: EventTarget & HTMLButtonElement;
-  };
-  export interface ButtonProps {
-    /** Button contents goes here */
-    children?: Snippet;
-    /** Button ref */
-    ref?: HTMLButtonElement | HTMLAnchorElement;
-    /** Regular button or submit button? */
-    type?: ButtonType;
-    /** How large should the button be? */
-    size?: ComponentSize;
-    /** Full width button? */
-    fullWidth?: boolean;
-    /** What color to use? */
-    color?: ComponentColor;
-    /** How round should the border radius be? */
-    roundness?: ComponentRoundness;
-    /** How should the button appear? */
-    variant?: ComponentWeight;
-    /** Add a border around the button */
-    outline?: boolean;
-    /** Compact button for icons */
-    compact?: boolean;
-    /** Button disabled state */
-    disabled?: boolean;
-    /** Name */
-    name?: string;
-    /** Id */
-    id?: string;
-    /** Title (for tooltip) */
-    title?: string;
-    /** Icon before button content */
-    before?: Snippet;
-    /** Icon after button content */
-    after?: Snippet;
-    /** Custom css class*/
-    class?: string;
-    /** The onclick event handler */
-    onclick?: MouseEventHandler<HTMLButtonElement>;
-    /** Aria label */
-    'aria-label'?: string;
-    /** Turn Button into link */
-    href?: string;
-    /** Link button: download  */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    download?: any;
-    /** Link button: hreflang  */
-    hreflang?: string | undefined | null;
-    /** Link button: media  */
-    media?: string | undefined | null;
-    /** Link button: ping  */
-    ping?: string | undefined | null;
-    /** Link button: rel  */
-    rel?: string | undefined | null;
-    /** Link button: target  */
-    target?: ButtonLinkTarget;
-    /** Link button: Type  */
-    anchorMediaType?: string | undefined | null;
-    /** Link button: referrerpolicy  */
-    referrerpolicy?: ButtonLinkReferrerpolicy;
-  }
-</script>
-<script lang="ts">
-  let {
-    children,
-    type = 'button',
-    size = 'normal',
-    color = 'primary',
-    roundness = 1,
-    variant = 'solid',
-    outline = false,
-    compact = false,
-    fullWidth = false,
-    name,
-    id,
-    title,
-    class: className = '',
-    disabled = false,
-    onclick,
-    before,
-    after,
-    'aria-label': ariaLabel,
-    href,
-    download,
-    hreflang,
-    media,
-    ping,
-    rel,
-    target,
-    anchorMediaType,
-    referrerpolicy,
-    ref = $bindable<HTMLButtonElement | HTMLAnchorElement>(),
-  }: ButtonProps = $props();
-</script>
-{#snippet buttonContent()}
-  {#if before}
-    <span class="content--before">
-      {@render before()}
-    </span>
-  {/if}
-  {#if children}
-    {@render children()}
-  {/if}
-  {#if after}
-    <span class="content--after">
-      {@render after()}
-    </span>
-  {/if}
-{/snippet}
-{#if href}
-  <a
-    {title}
-    {id}
-    {href}
-    {download}
-    {hreflang}
-    {media}
-    {ping}
-    {rel}
-    {target}
-    type={anchorMediaType}
-    {referrerpolicy}
-    aria-label={ariaLabel}
-    class:outline
-    class:compact
-    class:disabled
-    class:fullWidth
-    class={[
-      'dodo-ui-Button',
-      `size--${size}`,
-      `color--${color}`,
-      `variant--${variant}`,
-      `roundness--${roundness}`,
-      className,
-    ].join(' ')}
-    bind:this={ref}
-  >
-    {@render buttonContent()}
-  </a>
-{:else}
-  <button
-    class:outline
-    class:compact
-    class:fullWidth
-    aria-label={ariaLabel}
-    class={[
-      'dodo-ui-Button',
-      `size--${size}`,
-      `color--${color}`,
-      `variant--${variant}`,
-      `roundness--${roundness}`,
-      className,
-    ].join(' ')}
-    {type}
-    {name}
-    {id}
-    {title}
-    {disabled}
-    {onclick}
-    bind:this={ref}
-  >
-    {@render buttonContent()}
-  </button>
-{/if}
-<style lang="scss">
-  @use 'utils/scss/mixins.scss' as *;
-  :global(:root) {
-    --dodo-ui-Button-disabled-color: var(--dodo-color-neutral-400);
-    --dodo-ui-Button-disabled-bg: var(--dodo-color-neutral-200);
-    @include generate-dodo-ui-button-colors(neutral);
-    @include generate-dodo-ui-button-colors(primary);
-    @include generate-dodo-ui-button-colors(secondary);
-    @include generate-dodo-ui-button-colors(safe);
-    @include generate-dodo-ui-button-colors(warning);
-    @include generate-dodo-ui-button-colors(danger);
-  }
-  :global(.dodo-theme--dark) {
-    --dodo-ui-Button-disabled-bg: var(--dodo-color-neutral-100);
-    --dodo-ui-Button-disabled-color: var(--dodo-color-neutral-500);
-    @include generate-dodo-ui-button-colors-dark(neutral);
-    @include generate-dodo-ui-button-colors-dark(primary);
-    @include generate-dodo-ui-button-colors-dark(secondary);
-    @include generate-dodo-ui-button-colors-dark(safe);
-    @include generate-dodo-ui-button-colors-dark(warning);
-    @include generate-dodo-ui-button-colors-dark(danger);
-  }
-  .dodo-ui-Button {
-    cursor: pointer;
-    transition: all 150ms;
-    text-decoration: none;
-    margin: 0;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    font-family: inherit;
-    background-color: transparent;
-    border-style: solid;
-    border-width: var(--dodo-ui-element-border-width);
-    border-color: transparent;
-    color: inherit;
-    letter-spacing: 0.3px;
-    &.size {
-      &--normal {
-        height: var(--dodo-ui-element-height-normal);
-        font-size: 1rem;
-        padding: 0 calc(var(--dodo-ui-space-small) * 2);
-        min-width: 45px;
-      }
-      &--small {
-        height: var(--dodo-ui-element-height-small);
-        padding: 0 var(--dodo-ui-space);
-        font-size: 0.9rem;
-        min-width: 35px;
-      }
-      &--large {
-        height: var(--dodo-ui-element-height-large);
-        font-size: 1.1rem;
-        padding: 0 calc(var(--dodo-ui-space) * 2);
-        min-width: 85px;
-      }
-    }
-    &.roundness {
-      &--1 {
-        border-radius: var(--dodo-ui-element-roundness-1);
-      }
-      &--2 {
-        border-radius: var(--dodo-ui-element-roundness-2);
-      }
-      &--3 {
-        border-radius: var(--dodo-ui-element-roundness-3);
-      }
-      &--full {
-        border-radius: 50%;
-      }
-    }
-    &.color {
-      @include generate-dodo-ui-button-color(neutral);
-      @include generate-dodo-ui-button-color(primary);
-      @include generate-dodo-ui-button-color(secondary);
-      @include generate-dodo-ui-button-color(safe);
-      @include generate-dodo-ui-button-color(warning);
-      @include generate-dodo-ui-button-color(danger);
-    }
-    &[disabled] {
-      cursor: initial;
-      &.variant {
-        &--text,
-        &--solid {
-          background-color: var(--dodo-ui-Button-disabled-bg);
-          color: var(--dodo-ui-Button-disabled-color);
-          &:hover {
-            background-color: var(--dodo-ui-Button-disabled-bg);
-            color: var(--dodo-ui-Button-disabled-color);
-          }
-          &:active {
-            background-color: var(--dodo-ui-Button-disabled-bg);
-            color: var(--dodo-ui-Button-disabled-color);
-          }
-          &.outline {
-            border-color: transparent;
-          }
-        }
-      }
-    }
-    &.compact {
-      &.size {
-        &--normal,
-        &--small,
-        &--large {
-          min-width: initial;
-          padding: 0;
-        }
-        &--normal {
-          width: var(--dodo-ui-element-height-normal);
-        }
-        &--small {
-          width: var(--dodo-ui-element-height-small);
-        }
-        &--large {
-          width: var(--dodo-ui-element-height-large);
-        }
-      }
-    }
-    &.fullWidth {
-      width: 100%;
-    }
-    .content {
-      &--after,
-      &--before {
-        display: inline-flex;
-        height: 100%;
-        align-items: center;
-      }
-      &--before {
-        margin-right: 6px;
-      }
-      &--after {
-        margin-left: 6px;
-      }
-    }
-  }
-</style>

package/src/lib/stories/components/Form/Button/utils/scss/mixins.scss DELETED Viewed

@@ -1,86 +0,0 @@
-/// Mixin: generate-dodo-ui-button-colors
-/// Generates CSS custom properties for Dodo UI button styles (text & solid)
-/// across different interaction states (default, hover, active).
-/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
-@mixin generate-dodo-ui-button-colors($color-name) {
-  --dodo-ui-Button-outline-#{$color-name}: var(--dodo-color-#{$color-name}-400);
-  --dodo-ui-Button-text-#{$color-name}-bg: var(--dodo-color-#{$color-name}-100);
-  --dodo-ui-Button-text-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-200);
-  --dodo-ui-Button-text-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-300);
-  --dodo-ui-Button-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-500);
-  --dodo-ui-Button-solid-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-600);
-  --dodo-ui-Button-solid-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-700);
-}
-/// Mixin: generate-dodo-ui-button-colors
-/// Generates CSS custom properties for Dodo UI button styles (text & solid)
-/// across different interaction states (default, hover, active).
-/// @param {String} $color-name - The theme color name (e.g., "primary", "safe", etc.)
-@mixin generate-dodo-ui-button-colors-dark($color-name) {
-  --dodo-ui-Button-outline-#{$color-name}: color-mix(
-    in oklab,
-    var(--dodo-color-#{$color-name}-300) 90%,
-    #fff
-  );
-  --dodo-ui-Button-text-#{$color-name}-bg: color-mix(
-    in oklab,
-    var(--dodo-color-#{$color-name}-50) 90%,
-    #fff
-  );
-  --dodo-ui-Button-text-#{$color-name}-hover-bg: color-mix(
-    in oklab,
-    var(--dodo-color-#{$color-name}-100) 90%,
-    #fff
-  );
-  --dodo-ui-Button-text-#{$color-name}-active-bg: color-mix(
-    in oklab,
-    var(--dodo-color-#{$color-name}-200) 90%,
-    #fff
-  );
-  --dodo-ui-Button-solid-#{$color-name}-bg: var(--dodo-color-#{$color-name}-400);
-  --dodo-ui-Button-solid-#{$color-name}-hover-bg: var(--dodo-color-#{$color-name}-300);
-  --dodo-ui-Button-solid-#{$color-name}-active-bg: var(--dodo-color-#{$color-name}-200);
-}
-/// Mixin: generate-dodo-ui-button-color
-/// Auto-generates .color--[theme] > .variant--text & .variant--solid styles
-/// @param {String} $theme - e.g., default, safe, danger, etc.
-@mixin generate-dodo-ui-button-color($theme) {
-  &--#{$theme} {
-    &.variant {
-      &--text {
-        color: var(--dodo-color-#{$theme}-800);
-        background-color: var(--dodo-ui-Button-text-#{$theme}-bg);
-        &:hover {
-          background-color: var(--dodo-ui-Button-text-#{$theme}-hover-bg);
-        }
-        &:active {
-          background-color: var(--dodo-ui-Button-text-#{$theme}-active-bg);
-        }
-        &.outline {
-          border-color: var(--dodo-ui-Button-outline-#{$theme});
-        }
-      }
-      &--solid {
-        color: var(--dodo-color-constant-white);
-        background-color: var(--dodo-ui-Button-solid-#{$theme}-bg);
-        &:hover {
-          background-color: var(--dodo-ui-Button-solid-#{$theme}-hover-bg);
-        }
-        &:active {
-          background-color: var(--dodo-ui-Button-solid-#{$theme}-active-bg);
-        }
-      }
-    }
-  }
-}