import { extendTailwindMerge, twMerge as twMerge$1 } from 'tailwind-merge';
import { mergeWith } from 'lodash-es';
import { createClassed } from '@tw-classed/react';
import { createClassed as createClassed$1 } from '@tw-classed/core';
import clsx4, { clsx } from 'clsx';
import createVariatGroupTransfomer from 'tailwind-group-variant';
import { jsx } from 'react/jsx-runtime';

// src/utils/classed/classed.ts
var twMerge = extendTailwindMerge({
  classGroups: {
    "font-size": [
      {
        // Fixes incorect merging of text size
        text: ["h1", "h2", "h3", "h4", "h5", "h6"]
      }
    ]
  }
});
var { classed } = createClassed({ merger: twMerge });
createClassed$1({ merger: twMerge });
createVariatGroupTransfomer({});
function mergeVariants(variants, overrides) {
  const variantArray = Array.isArray(variants) ? variants : Object.values(variants);
  const mergerFn = (objectValue, sourceValue) => twMerge$1(`${objectValue || ""}`, `${sourceValue}`);
  const mergedVariants = mergeWith({}, ...[...variantArray, overrides], mergerFn);
  return mergedVariants;
}
var sizeVariants = {
  width: {
    xs: clsx4("w-28"),
    sm: clsx4("w-34"),
    md: clsx4("w-40"),
    lg: clsx4("w-48")
  },
  height: {
    xs: clsx4("h-28"),
    sm: clsx4("h-34"),
    md: clsx4("h-40"),
    lg: clsx4("h-48")
  },
  inlineWidth: {
    xs: clsx4("w-16 text-xs"),
    sm: clsx4("w-20 text-xs"),
    md: clsx4("w-22 text-xs"),
    lg: clsx4("w-26 text-xs")
  },
  inlineHeight: {
    xs: clsx4("h-16 text-xs"),
    sm: clsx4("h-20 text-xs"),
    md: clsx4("h-22 text-xs"),
    lg: clsx4("h-26 text-xs")
  },
  textSize: {
    xs: "text-xs",
    sm: "text-sm",
    md: "text-md",
    lg: "text-lg"
  },
  lineHeight: {
    xs: "leading-xs",
    sm: "leading-sm",
    md: "leading-md",
    lg: "leading-lg"
  },
  paddingY: {
    xs: "py-4",
    sm: "py-6",
    md: "py-8",
    lg: "py-10"
  },
  paddingX: {
    xs: clsx4("px-4"),
    sm: clsx4("px-6"),
    md: clsx4("px-8"),
    lg: clsx4("px-10")
  },
  extraPaddingX: {
    xs: clsx4("px-14"),
    sm: clsx4("px-16"),
    md: clsx4("px-18"),
    lg: clsx4("px-20")
  }
};
var KBDElement = classed(
  "kbd",
  "pointer-events-none px-8 inline-flex justify-center select-none items-center gap-2 rounded border border-highlight  bg-surface font-mono text-xs  font-medium text-content-weak opacity-100",
  {
    defaultVariants: {
      size: "md"
    },
    variants: {
      size: mergeVariants([sizeVariants.textSize, sizeVariants.inlineHeight])
    }
  }
);
var KBD = ({
  size = "md",
  children,
  keys,
  ...props
}) => {
  const modifiers = ["\u2318"];
  return /* @__PURE__ */ jsx(KBDElement, { size, ...props, children: keys.map((key) => {
    return /* @__PURE__ */ jsx("span", { className: clsx({ "scale-90": modifiers.includes(key) }), children: key }, key);
  }) });
};

export { KBD };
//# sourceMappingURL=out.js.map
//# sourceMappingURL=index.js.map