@indielayer/ui/lib/components/input/theme/Input.carbon.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-b text-sm px-4"];
      return !s.errorInternal && !r.disabled && e.push("hover:border-secondary-400 dark:hover:border-secondary-500"), r.size === "xs" || r.size === "sm" ? e.push("py-1.5") : r.size === "lg" || r.size === "xl" ? e.push("py-3.5") : e.push("py-2.5"), r.disabled ? e.push("bg-secondary-100 dark:bg-secondary-900 text-secondary-300 cursor-not-allowed") : r.readonly ? e.push("bg-white dark:bg-secondary-900 text-secondary-700") : e.push("bg-secondary-50 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 a = r.getPalette(s.color);
    return e.get("border", a[400]);
  }
}, t = o;
export {
  t as default
};