geoiq-frontend-ui-kit/dist/index.es47.js

This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.

import * as e from "react";
import { cn as i } from "./index.es79.js";
import { AnimatedInputContainerVariants as F, AnimatedInputStyles as w, DynamicComponentStyles as y } from "./index.es120.js";
import { Typography as A } from "./index.es17.js";
import { XCircle as R } from "lucide-react";
const b = e.forwardRef(
  ({
    className: h,
    type: v,
    isError: m,
    message: f,
    prefix: p,
    suffix: c,
    id: E,
    placeholder: o = "",
    placeholders: n = [],
    value: l = "",
    onChange: g,
    ...I
  }, N) => {
    const S = e.useRef(null), $ = N || S, [a, r] = e.useState(!1), [s, k] = e.useState(0), [t, d] = e.useState(!1);
    e.useEffect(() => {
      if (n.length === 0 || a || l.toString().length > 0)
        return;
      const u = setInterval(() => {
        d(!1), k((C) => (C + 1) % n.length), d(!0);
      }, 2e3);
      return () => clearInterval(u);
    }, [n.length, a, l]);
    const x = () => {
      g?.({
        target: { value: "" }
      });
    };
    return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
      "div",
      {
        className: i(
          F({
            isError: m,
            isFocused: a,
            disabled: I.disabled,
            className: h
          })
        ),
        id: E,
        style: { overflow: "hidden" }
      },
      p && /* @__PURE__ */ e.createElement(
        "div",
        {
          onClick: () => {
            r(!0);
          }
        },
        p
      ),
      /* @__PURE__ */ e.createElement("div", { className: "h-[38px] w-full relative " }, /* @__PURE__ */ e.createElement(
        "input",
        {
          type: v,
          className: i(w({ isError: m })),
          placeholder: a ? "What are you searching for?" : o,
          onFocus: () => {
            r(!0), d(!1);
          },
          onBlur: () => r(!1),
          ref: $,
          value: l,
          onChange: (u) => g?.(u)
        }
      ), !a && l.toString().length === 0 && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
        "div",
        {
          key: `placeholder-${s}-${t}`,
          className: i(y({ animate: t })),
          style: {
            left: `${o.length * 0.92}ch`,
            animation: t ? "animatedInputMiddleToTop 0.6s forwards" : "none",
            opacity: t ? 1 : 0
          }
        },
        n[s]
      ), /* @__PURE__ */ e.createElement(
        "div",
        {
          key: `next-placeholder-${(s + 1) % n.length}-${t}`,
          className: i(y({ animate: t })),
          style: {
            left: `${o.length * 0.92}ch`,
            animation: t ? "animatedInputFadeInBottom 1.5s forwards 0.2s" : "none",
            opacity: t ? 0 : 1
          }
        },
        n[(s + 1) % n.length]
      ))),
      /* @__PURE__ */ e.createElement(
        "div",
        {
          className: "flex items-center cursor-pointer",
          onClick: () => c && r(!0)
        },
        c ? /* @__PURE__ */ e.createElement("div", { className: "flex items-center" }, c) : /* @__PURE__ */ e.createElement(
          "div",
          {
            className: a ? "" : "opacity-0",
            onClick: x
          },
          /* @__PURE__ */ e.createElement(R, { size: 16, className: "stroke-light-2" })
        )
      )
    ), f && /* @__PURE__ */ e.createElement(
      A,
      {
        variant: "body2",
        className: `${m ? "text-danger-1" : "text-light-3"} mt-1.5`
      },
      f
    ));
  }
);
b.displayName = "AnimatedInput";
export {
  b as AnimatedInput
};
//# sourceMappingURL=index.es47.js.map