@indielayer/ui/lib/components/input/theme/Input.base.theme.js

Indielayer UI Components with Tailwind CSS build for Vue 3

const o = {
  classes: {
    wrapper: "",
    input: ({ props: r, data: s }) => {
      const e = ["appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border shadow-sm rounded-md"];
      return !s.errorInternal && !r.disabled && e.push("hover:border-secondary-400 dark:hover:border-secondary-500"), r.size === "xs" ? e.push("px-2 py-1 text-xs") : r.size === "sm" ? e.push("px-2 py-1.5 text-sm") : r.size === "lg" ? e.push("px-4 py-3 text-lg") : r.size === "xl" ? e.push("px-5 py-4 text-xl") : e.push("px-3 py-2"), e.push(r.disabled ? "bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed" : "bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200"), e;
    },
    icon: "text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0"
  },
  styles: ({ colors: r, props: s, css: e }) => {
    const t = r.getPalette(s.color);
    return e.get("border", t[400]);
  }
}, a = o;
export {
  a as default
};