@flightlesslabs/dodo-ui 0.19.1 → 0.20.0

package/dist/stories/developer tools/helpers/logger/index.mdx

@@ -1,63 +0,0 @@
-import { Source } from '@storybook/addon-docs/blocks';
-
-# Logger Utility
-
-A customizable logger function that supports:
-
-- Log levels (`info`, `warn`, `error`)
-- Optional labels
-- A `show` flag to toggle logging
-- Console output with timestamps
-
-## Import
-
-Import the logger creation function:
-
-<Source dark language="ts" code={`import { createLogger } from '@flightlesslabs/dodo-ui';`} />
-
-## Basic Usage
-
-Create a logger and log different types of messages:
-
-<Source
-  dark
-  language="ts"
-  code={`const logger = createLogger({
-  label: 'AuthService',
-});
-
-logger.info('User logged in');
-logger.warn('Token is about to expire');
-logger.error('Login failed', new Error('Invalid credentials'));
-`}
-/>
-
-## Disable Logging
-
-You can use the \`show\` flag to completely silence the logger (e.g., in production):
-
-<Source
-  dark
-  language="ts"
-  code={`const logger = createLogger({
-  show: false,
-});
-
-logger.info('This will not be logged');
-`}
-/>
-
-## Level Filtering
-
-The logger will only show messages **at or above** the configured `level`:
-
-<Source
-  dark
-  language="ts"
-  code={`const logger = createLogger();
-
-logger.info('This will NOT show');
-logger.warn('This WILL show');
-logger.error('This WILL show');
-`}
-/>

package/dist/stories/developer tools/helpers/logger/logger.d.ts

@@ -1,24 +0,0 @@
-export type LogLevel = 'info' | 'warn' | 'error';
-export interface LoggerOptions {
-    /**
-     * Optional label to prefix log entries.
-     */
-    label?: string;
-    /**
-     * Whether to actually show logs.
-     * Defaults to true.
-     */
-    show?: boolean;
-}
-/**
- * Formats the log message with timestamp, label, and level.
- */
-export declare function formatPrefix(level: LogLevel, label?: string): string;
-/**
- * Creates a logger that logs every call unless disabled by show=false.
- */
-export default function createLogger(options?: LoggerOptions): {
-    info: (msg: unknown, ...optionalParams: unknown[]) => void;
-    warn: (msg: unknown, ...optionalParams: unknown[]) => void;
-    error: (msg: unknown, ...optionalParams: unknown[]) => void;
-};

package/dist/stories/developer tools/helpers/logger/logger.js

@@ -1,31 +0,0 @@
-/**
- * Formats the log message with timestamp, label, and level.
- */
-export function formatPrefix(level, label) {
-    const timestamp = new Date().toISOString();
-    const labelPart = label ? `[${label}]` : '';
-    return `[${timestamp}] ${labelPart} [${level.toUpperCase()}]`;
-}
-/**
- * Creates a logger that logs every call unless disabled by show=false.
- */
-export default function createLogger(options = {}) {
-    const { label, show = true } = options;
-    function shouldLog() {
-        return show;
-    }
-    return {
-        info: (msg, ...optionalParams) => {
-            if (shouldLog())
-                console.info(formatPrefix('info', label), msg, ...optionalParams);
-        },
-        warn: (msg, ...optionalParams) => {
-            if (shouldLog())
-                console.warn(formatPrefix('warn', label), msg, ...optionalParams);
-        },
-        error: (msg, ...optionalParams) => {
-            if (shouldLog())
-                console.error(formatPrefix('error', label), msg, ...optionalParams);
-        },
-    };
-}

package/dist/stories/developer tools/philosophy/Colors/Colors.mdx

@@ -1,43 +0,0 @@
-import { Meta, Story, Source } from '@storybook/addon-docs/blocks';
-import * as ColorsStories from './Colors.stories.svelte';
-import * as OpacityStories from './Opacity.stories.svelte';
-
-<Meta of={ColorsStories} />
-
-# Colors
-
-We are using an extensive color pallet identical to [Tailwind Css](https://tailwindcss.com/docs/colors) Colors. The colors are adjusted for dark and light themes.
-
-## Main Colors
-
-<Story of={ColorsStories.Main} />
-
-Greyscale colors
-
-<Story of={ColorsStories.ColorsNeutral} />
-
-Constant Colors
-
-<Story of={ColorsStories.ColorsConstant} />
-
-## Base Color
-
-<Story of={ColorsStories.ColorsBase} />
-
-Greyscale colors
-
-<Story of={ColorsStories.BaseColorsNeutral} />
-
-## Adjusting opacity
-
-Opacity can be adjusted using css `color-mix` function.
-
-<Source
-  dark
-  language="css"
-  code={`
-color-mix(in oklab, var(--dodo-color-primary-800) 10%, transparent)
-`}
-/>
-
-<Story of={OpacityStories.Main} meta={OpacityStories} />

package/dist/stories/developer tools/philosophy/Colors/Colors.stories.svelte

@@ -1,20 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import Colors from './Colors.svelte';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const { Story } = defineMeta({
-    component: Colors,
-    args: {
-        swatchType: 'colors',
-    },
-});
-</script>
-
-<Story name="Main" />
-
-<Story name="ColorsNeutral" args={{ swatchType: 'colors-neutral' }} />
-
-<Story name="ColorsConstant" args={{ swatchType: 'colors-constant' }} />
-
-<Story name="ColorsBase" args={{ swatchType: 'base-colors' }} />
-
-<Story name="BaseColorsNeutral" args={{ swatchType: 'base-colors-neutral' }} />

package/dist/stories/developer tools/philosophy/Colors/Colors.stories.svelte.d.ts

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

package/dist/stories/developer tools/philosophy/Colors/Colors.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">import Swatches from './Swatches/Swatches.svelte';
-import { colorPalette, colorPaletteBase, colorPaletteNeutral } from './utils/color.js';
-const { swatchType } = $props();
-</script>
-
-<div class="Colors">
-  {#if swatchType === 'base-colors'}
-    {#each colorPaletteBase as colorPaletteItem (colorPaletteItem)}
-      <Swatches colorPalette={colorPaletteItem} prefix="--dodo-color-base-" isColorPaletteValues />
-    {/each}
-  {:else if swatchType === 'base-colors-neutral'}
-    {#each colorPaletteNeutral as colorPaletteItem (colorPaletteItem)}
-      <Swatches colorPalette={colorPaletteItem} prefix="--dodo-color-base-" />
-    {/each}
-  {:else if swatchType === 'colors'}
-    {#each colorPalette as colorPaletteItem (colorPaletteItem)}
-      <Swatches colorPalette={colorPaletteItem} isColorPaletteValues />
-    {/each}
-  {:else if swatchType === 'colors-neutral'}
-    {#each colorPaletteNeutral as colorPaletteItem (colorPaletteItem)}
-      <Swatches colorPalette={colorPaletteItem} />
-    {/each}
-  {:else if swatchType === 'colors-constant'}
-    {#each colorPaletteNeutral as colorPaletteItem (colorPaletteItem)}
-      <Swatches colorPalette={colorPaletteItem} prefix="--dodo-color-constant-" />
-    {/each}
-  {/if}
-</div>
-
-<style>.Colors {
-  display: flex;
-  flex-direction: column;
-}</style>

package/dist/stories/developer tools/philosophy/Colors/Colors.svelte.d.ts

@@ -1,6 +0,0 @@
-interface ColorsProps {
-    swatchType?: 'base-colors' | 'base-colors-neutral' | 'colors' | 'colors-neutral' | 'colors-constant';
-}
-declare const Colors: import("svelte").Component<ColorsProps, {}, "">;
-type Colors = ReturnType<typeof Colors>;
-export default Colors;

package/dist/stories/developer tools/philosophy/Colors/Opacity.stories.svelte

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

package/dist/stories/developer tools/philosophy/Colors/Opacity.stories.svelte.d.ts

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

package/dist/stories/developer tools/philosophy/Colors/Opacity.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">import Palette from './Swatches/Palette.svelte';
-</script>
-
-<div class="Opacity">
-  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 10%, transparent)" />
-  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 20%, transparent)" />
-  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 30%, transparent)" />
-  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 40%, transparent)" />
-  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 50%, transparent)" />
-  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 60%, transparent)" />
-  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 70%, transparent)" />
-  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 80%, transparent)" />
-  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 90%, transparent)" />
-  <Palette backgroundColor="color-mix(in oklab, var(--dodo-color-primary-800) 100%, transparent)" />
-</div>
-
-<style>.Opacity {
-  display: flex;
-  flex-wrap: wrap;
-}</style>

package/dist/stories/developer tools/philosophy/Colors/Opacity.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 Opacity: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Opacity = InstanceType<typeof Opacity>;
-export default Opacity;

package/dist/stories/developer tools/philosophy/Colors/Swatches/Palette.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">"use strict";
-const { backgroundColor } = $props();
-function onclick() {
-    navigator.clipboard.writeText(backgroundColor);
-}
-</script>
-
-<!-- svelte-ignore a11y_consider_explicit_label -->
-<button
-  class="Palette"
-  style={`background-color: ${backgroundColor};`}
-  {onclick}
-  title="Click to copy value!"
-></button>
-
-<style>.Palette {
-  display: flex;
-  width: 60px;
-  height: 60px;
-  border-radius: 4px;
-  border: 1px solid;
-  border-color: color-mix(in oklab, var(--dodo-color-neutral-800) 20%, transparent);
-  background: transparent;
-  min-width: initial;
-  margin: 0;
-  padding: 0;
-  cursor: pointer;
-  outline: 0;
-  transition: all 100ms;
-}
-.Palette:hover {
-  border-width: 2px;
-}
-.Palette:active {
-  border-color: color-mix(in oklab, var(--dodo-color-primary-800) 80%, transparent);
-  border-width: 2px;
-}</style>

package/dist/stories/developer tools/philosophy/Colors/Swatches/Palette.svelte.d.ts

@@ -1,6 +0,0 @@
-interface PaletteProps {
-    backgroundColor: string;
-}
-declare const Palette: import("svelte").Component<PaletteProps, {}, "">;
-type Palette = ReturnType<typeof Palette>;
-export default Palette;

package/dist/stories/developer tools/philosophy/Colors/Swatches/Swatch.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">import Palette from './Palette.svelte';
-const { colorPalette, colorPaletteValue, prefix = '--dodo-color-' } = $props();
-</script>
-
-<div class="Swatch">
-  {#if colorPaletteValue}
-    <Palette backgroundColor={`var(${prefix}${colorPalette}-${colorPaletteValue})`} />
-  {:else}
-    <Palette backgroundColor={`var(${prefix}${colorPalette})`} />
-  {/if}
-
-  <div class="colorPaletteValue">{colorPaletteValue}</div>
-</div>
-
-<style>.Swatch {
-  color: var(--dodo-color-neutral-900);
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  margin: 4px;
-}
-.Swatch .colorPaletteValue {
-  margin-top: 8px;
-}</style>

package/dist/stories/developer tools/philosophy/Colors/Swatches/Swatch.svelte.d.ts

@@ -1,8 +0,0 @@
-interface SwatchProps {
-    colorPalette: string;
-    colorPaletteValue?: string;
-    prefix?: string;
-}
-declare const Swatch: import("svelte").Component<SwatchProps, {}, "">;
-type Swatch = ReturnType<typeof Swatch>;
-export default Swatch;

package/dist/stories/developer tools/philosophy/Colors/Swatches/Swatches.svelte

@@ -1,43 +0,0 @@
-<script lang="ts">import { colorPaletteValues } from '../utils/color.js';
-import Swatch from './Swatch.svelte';
-const { colorPalette, prefix, isColorPaletteValues = false } = $props();
-</script>
-
-<ul class="Swatches">
-  <b>{colorPalette}</b>
-
-  {#if isColorPaletteValues}
-    {#each colorPaletteValues as colorPaletteValue (colorPaletteValue)}
-      <li>
-        <Swatch {colorPalette} {colorPaletteValue} {prefix} />
-      </li>
-    {/each}
-  {:else}
-    <li>
-      <Swatch {colorPalette} {prefix} />
-    </li>
-  {/if}
-</ul>
-
-<style>.Swatches {
-  color: var(--dodo-color-neutral-900);
-  margin: 0;
-  padding: 0;
-  width: 150px;
-  margin: 16px 0;
-  display: flex;
-  width: 100%;
-}
-.Swatches b {
-  text-transform: capitalize;
-  display: flex;
-  font-weight: 500;
-  width: 100px;
-  align-items: center;
-  margin-bottom: 30px;
-}
-.Swatches li {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-}</style>

package/dist/stories/developer tools/philosophy/Colors/Swatches/Swatches.svelte.d.ts

@@ -1,8 +0,0 @@
-interface SwatchesProps {
-    colorPalette: string;
-    prefix?: string;
-    isColorPaletteValues?: boolean;
-}
-declare const Swatches: import("svelte").Component<SwatchesProps, {}, "">;
-type Swatches = ReturnType<typeof Swatches>;
-export default Swatches;

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

@@ -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

@@ -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

@@ -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/styles/scss/_breakpoints.scss

@@ -1,5 +0,0 @@
-$breakpoints-sm: 40rem;
-$breakpoints-md: 48rem;
-$breakpoints-lg: 64rem;
-$breakpoints-xl: 80rem;
-$breakpoints-xl2: 96rem;

package/dist/styles/scss/index.scss

@@ -1 +0,0 @@
-@forward 'breakpoints';

package/dist/types/colors.d.ts

@@ -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

@@ -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

@@ -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

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

package/dist/types/roundness.d.ts

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

package/dist/types/roundness.js

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

package/dist/types/shadow.d.ts

@@ -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

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

package/dist/types/size.d.ts

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

package/dist/types/size.js

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

package/dist/types/special.d.ts

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

package/dist/types/weight.d.ts

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

package/dist/types/weight.js

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