import plugin from 'tailwindcss/plugin';
import { y as notificationTransitions, B as overlayTransitions } from './form-select-CW5kX795.js';
import svgToDataUri from 'mini-svg-data-uri';
import { flatten } from 'flat';
import kebabCase from 'lodash.kebabcase';
import mapKeys from 'lodash.mapkeys';
import Color from 'color';
import deepMerge from 'deepmerge';
import { s as semanticColors } from './semantic-Us_bxqq7.js';
export { c as swapColorValues } from './semantic-Us_bxqq7.js';
import powerSelectPlugin from 'tailwindcss-ember-power-select';

const baseLayout = {
  disabledOpacity: '.5'
};
const defaultConfig = {
  defaultTheme: 'light',
  prefix: 'frontile',
  themes: {
    light: {
      colors: semanticColors.light,
      layout: {
        ...baseLayout,
        hoverOpacity: '.8'
      }
    },
    dark: {
      colors: semanticColors.dark,
      layout: {
        ...baseLayout,
        hoverOpacity: '.7'
      }
    }
  }
};

const parsedColorsCache = {};
function resolveThemes(themes = {}, defaultTheme, prefix) {
  const resolved = {
    variants: [],
    utilities: {},
    colors: {}
  };
  for (const [themeName, {
    extend,
    layout,
    colors
  }] of Object.entries(themes)) {
    let cssSelector = `.${themeName}`;
    const scheme = themeName === 'light' || themeName === 'dark' ? themeName : extend;

    // if the theme is the default theme, add the selector to the root element
    if (themeName === defaultTheme) {
      cssSelector = `:root,${cssSelector}`;
    }
    let themeRules = scheme ? {
      'color-scheme': scheme
    } : {};
    const flatColors = flattenThemeObject(colors);
    const flatLayout = layout ? mapKeys(layout, (_, key) => kebabCase(key)) : {};
    resolved.variants.push({
      name: themeName,
      definition: [`&.${themeName}`]
    });

    /**
     * Colors
     */
    for (const [colorName, colorValue] of Object.entries(flatColors)) {
      if (!colorValue) continue;
      try {
        const parsedColor = parsedColorsCache[colorValue] || Color(colorValue).hsl().round().array();
        parsedColorsCache[colorValue] = parsedColor;
        const [h, s, l, defaultAlphaValue] = parsedColor;
        const colorVariable = `--${prefix}-${colorName}`;
        const customOpacityVariable = `--${prefix}-${colorName}-opacity`;
        themeRules = {
          ...themeRules,
          [colorVariable]: `${h} ${s}% ${l}%`
        };
        if (typeof defaultAlphaValue === 'number') {
          themeRules = {
            ...themeRules,
            [customOpacityVariable]: defaultAlphaValue.toFixed(2)
          };
        }

        // set the dynamic color in tailwind config theme.colors
        resolved.colors[colorName] = ({
          opacityVariable,
          opacityValue
        }) => {
          // if the opacity is set  with a slash (e.g. bg-primary/90), use the provided value
          if (!isNaN(+opacityValue)) {
            return `hsl(var(${colorVariable}) / ${opacityValue})`;
          }
          if (opacityVariable) {
            return `hsl(var(${colorVariable}) / var(${customOpacityVariable}, var(${opacityVariable})))`;
          }
          return `hsl(var(${colorVariable}) / var(${customOpacityVariable}, 1))`;
        };
      } catch (error) {
        // eslint-disable-next-line no-console
        console.log('error', error);
      }
    }

    /**
     * Layout
     */
    for (const [key, value] of Object.entries(flatLayout)) {
      if (!value) continue;
      const layoutVariablePrefix = `--${prefix}-${key}`;
      if (typeof value === 'object') {
        for (const [nestedKey, nestedValue] of Object.entries(value)) {
          const nestedLayoutVariable = `${layoutVariablePrefix}-${nestedKey}`;
          themeRules = {
            ...themeRules,
            [nestedLayoutVariable]: nestedValue
          };
        }
      } else {
        // Handle opacity values and other singular layout values
        const formattedValue = layoutVariablePrefix.includes('opacity') && typeof value === 'number' ? value.toString().replace(/^0\./, '.') : value;
        themeRules = {
          ...themeRules,
          [layoutVariablePrefix]: formattedValue
        };
      }
    }
    resolved.utilities = {
      ...resolved.utilities,
      [cssSelector]: themeRules
    };
  }
  return resolved;
}
function removeDefaultKeys(obj) {
  const newObj = {};
  for (const key in obj) {
    if (key.endsWith('-DEFAULT')) {
      newObj[key.replace('-DEFAULT', '')] = obj[key];
      continue;
    }
    newObj[key] = obj[key];
  }
  return newObj;
}
function flattenThemeObject(obj) {
  return removeDefaultKeys(flatten(obj, {
    safe: true,
    delimiter: '-'
  }));
}
const isBaseTheme = theme => theme === 'light' || theme === 'dark';
function resolveConfig(userConfig = {}) {
  const {
    themes: userThemes = {},
    defaultTheme = 'light',
    layout: userLayout,
    prefix = defaultConfig.prefix
  } = userConfig;
  const themes = defaultConfig.themes;
  if (typeof userLayout === 'object') {
    themes.dark.layout = deepMerge(themes.dark.layout || {}, userLayout);
    themes.light.layout = deepMerge(themes.light.layout || {}, userLayout);
  }
  if (typeof userThemes['dark'] === 'object') {
    themes.dark = deepMerge(themes.dark, userThemes['dark']);
  }
  if (typeof userThemes['light'] === 'object') {
    themes.light = deepMerge(themes.light, userThemes['light']);
  }
  Object.keys(userThemes).forEach(name => {
    if (isBaseTheme(name)) {
      return;
    }
    const {
      extend
    } = userThemes[name] || {};
    const extendFrom = extend && isBaseTheme(extend) ? extend : 'light';
    themes[name] = deepMerge(themes[extendFrom], userThemes[name] || {});
  });
  return {
    themes,
    defaultTheme,
    prefix
  };
}

function drawerSizes(addComponents, sizes, margin) {
  Object.keys(sizes).forEach(key => {
    const size = sizes[key];
    let rules = {
      maxHeight: size
    };
    if (key !== 'full') {
      rules = {
        ...rules,
        [`@media(max - height: calc(${size} + ${margin}))`]: {
          maxHeight: `calc(100vh - ${margin})`
        }
      };
    }
    addComponents({
      [`.drawer--vertical-${key}`]: rules
    });
    rules = {
      maxWidth: size
    };
    if (key !== 'full') {
      rules = {
        ...rules,
        [`@media(max - width: calc(${size} + ${margin}))`]: {
          maxWidth: `calc(100vw - ${margin})`
        }
      };
    }
    addComponents({
      [`.drawer--horizontal-${key}`]: rules
    });
  });
}
function modalSizes(addComponents, sizes, margin) {
  Object.keys(sizes).forEach(key => {
    const size = sizes[key];
    let rules = {};
    if (key === 'full') {
      rules = {
        width: size,
        height: size,
        marginTop: 'auto',
        marginBottom: 'auto',
        borderRadius: '0'
      };
    } else {
      rules = {
        maxWidth: size,
        [`@media(max - width: ${size})`]: {
          maxWidth: `calc(100vw - ${margin})`
        }
      };
    }
    addComponents({
      [`.modal--${key}`]: rules
    });
  });
}

function registerPowerSelectComponents(addComponents, prefix) {
  addComponents({
    '.ember-power-select-trigger, .ember-power-select-dropdown, .ember-power-select-search-input': {
      '--tw-bg-opacity': '1',
      '--tw-border-opacity': '1',
      '--tw-text-opacity': '1',
      '--tw-placeholder-opacity': '1'
    },
    '.dark .ember-power-select-search-input, .dark .ember-power-select-trigger': {
      backgroundColor: `hsl(var(--${prefix}-default-100) / var(--${prefix}-default-100-opacity, var(--tw-bg-opacity)))`
    },
    '.dark .ember-power-select-dropdown': {
      backgroundColor: `hsl(var(--${prefix}-default-200) / var(--${prefix}-default-200-opacity, var(--tw-bg-opacity)))`
    }
  });
  powerSelectPlugin.registerComponents({
    addComponents
  }, {}, {
    textColor: `hsl(var(--${prefix}-default-900) / var(--${prefix}-default-900-opacity, var(--tw-bg-opacity)))`,
    disabledTextColor: `hsl(var(--${prefix}-default-500) / var(--${prefix}-default-500-opacity, var(--tw-text-opacity)))`,
    disabledBorderColor: `hsl(var(--${prefix}-default-200) / var(--${prefix}-default-200-opacity, var(--tw-border-opacity)))`,
    placeholderTextColor: `hsl(var(--${prefix}-default-400) / var(--${prefix}-default-400-opacity, var(--tw-placeholder-opacity)))`,
    backgroundColor: 'white',
    dropdownBackgroundColor: 'white',
    borderColor: `hsl(var(--${prefix}-default-400) / var(--${prefix}-default-400-opacity, var(--tw-border-opacity)))`,
    focusBorderColor: `hsl(var(--${prefix}-primary-400) / var(--${prefix}-primary-400-opacity, var(--tw-border-opacity)))`,
    invalidBorderColor: `hsl(var(--${prefix}-danger-400) / var(--${prefix}-danger-400-opacity, var(--tw-border-opacity)))`
    //   triggerFocusBoxShadow: config.focusBoxShadow,
    //   triggerFocusBoxShadowInvalid: config.focusBoxShadowInvalid,
    //   searchInputFocusBoxShadow: config.focusBoxShadow
  });
}

function addTransitions(addComponents, baseSelector, transitions) {
  if (!transitions) {
    return;
  }
  Object.keys(transitions).forEach(key => {
    const transition = transitions[key];
    if (!transition) {
      return;
    }
    const name = `${baseSelector}--${kebabCase(key)}`;
    const {
      enter,
      enterTo,
      leave,
      leaveActive,
      enterActive,
      leaveTo
    } = transition;
    addComponents({
      [`${name}-enter`]: enter,
      [`${name}-enter-to`]: enterTo || leave,
      [`${name}-leave`]: leave,
      [`${name}-leave-to`]: leaveTo || enter
    });
    if (enterActive) {
      addComponents({
        [`${name}-enter-active`]: enterActive
      });
    }
    if (leaveActive) {
      addComponents({
        [`${name}-leave-active`]: leaveActive
      });
    }
  });
}

function frontile(config = {}) {
  const c = resolveConfig(config);
  const resolved = resolveThemes(c.themes, c.defaultTheme, c.prefix);
  return plugin(({
    addComponents,
    theme,
    addVariant,
    addUtilities
  }) => {
    addUtilities({
      ...resolved?.utilities
    });
    resolved?.variants.forEach(variant => {
      addVariant(variant.name, variant.definition);
    });
    addVariant('data-is-active', '&[data-active=true]');
    addVariant('group-data-is-active', ':merge(.group)[data-active="true"] &');
    addTransitions(addComponents, '.notification-transition', notificationTransitions);
    addTransitions(addComponents, '.overlay-transition', overlayTransitions);

    // drawer sizes
    drawerSizes(addComponents, {
      xs: '20rem',
      sm: '24rem',
      md: '28rem',
      lg: '32rem',
      xl: '36rem',
      full: '100%'
    }, theme('spacing.8'));
    modalSizes(addComponents, {
      xs: '20rem',
      sm: '24rem',
      md: '28rem',
      lg: '32rem',
      xl: '36rem',
      full: '100%'
    }, theme('spacing.8'));
    addComponents({
      '.checked-bg-checkbox:checked': {
        backgroundImage: `url("${svgToDataUri(checkboxIcon)}")`
      },
      '.checked-bg-radio:checked': {
        backgroundImage: `url("${svgToDataUri(radioIcon)}")`
      }
    });
    registerPowerSelectComponents(addComponents, c.prefix);
  }, {
    theme: {
      extend: {
        colors: {
          ...resolved?.colors
        },
        opacity: {
          hover: `var(--${c.prefix}-hover-opacity)`,
          disabled: `var(--${c.prefix}-disabled-opacity)`
        },
        aria: {
          invalid: 'invalid="true"'
        },
        animation: {
          loading: 'loading 1.5s linear infinite'
        },
        keyframes: {
          loading: {
            from: {
              transform: 'translateX(-100%) scaleX(0)'
            },
            to: {
              transform: 'translateX(200%) scaleX(3)'
            }
          }
        }
      }
    }
  });
}
const checkboxIcon = `<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M5.125 7.666a1.304 1.304 0 00-.882-.328 1.3 1.3 0 00-.876.343c-.232.216-.364.51-.367.816-.003.307.124.602.352.822l2.508 2.339c.235.219.554.342.886.342.333 0 .651-.123.887-.342l5.015-4.677c.228-.22.355-.516.352-.822a1.132 1.132 0 00-.367-.817A1.301 1.301 0 0011.757 5a1.304 1.304 0 00-.882.328l-4.129 3.85-1.621-1.512z"/></svg>`;
const radioIcon = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="6" stroke="white" stroke-width="3" fill="none" /></svg>`;

export { frontile };
//# sourceMappingURL=plugin.js.map
