@rxdrag/website-lib-core 0.0.4 → 0.0.7

package/src/motion/consts.ts

@@ -0,0 +1,598 @@
+import { AnchorOffsets, SimpleAnimation, DualAnimation } from "./types";
+
+// Easing functions
+export const EASINGS = {
+  linear: [0, 0, 1, 1],
+  ease: [0.25, 0.1, 0.25, 1],
+  easeIn: [0.42, 0, 1, 1],
+  easeOut: [0, 0, 0.58, 1],
+  easeInOut: [0.42, 0, 0.58, 1],
+  // Back
+  easeInBack: [0.36, 0, 0.66, -0.56],
+  easeOutBack: [0.34, 1.56, 0.64, 1],
+  easeInOutBack: [0.68, -0.6, 0.32, 1.6],
+  // Sine
+  easeInSine: [0.12, 0, 0.39, 0],
+  easeOutSine: [0.61, 1, 0.88, 1],
+  easeInOutSine: [0.37, 0, 0.63, 1],
+  // Quad
+  easeInQuad: [0.11, 0, 0.5, 0],
+  easeOutQuad: [0.5, 1, 0.89, 1],
+  easeInOutQuad: [0.45, 0, 0.55, 1],
+  // Cubic
+  easeInCubic: [0.32, 0, 0.67, 0],
+  easeOutCubic: [0.33, 1, 0.68, 1],
+  easeInOutCubic: [0.65, 0, 0.35, 1],
+  // Quart
+  easeInQuart: [0.5, 0, 0.75, 0],
+  easeOutQuart: [0.25, 1, 0.5, 1],
+  easeInOutQuart: [0.76, 0, 0.24, 1],
+  // 柔和的缓动函数
+  softEaseOut: [0.16, 1, 0.3, 1], // 更加柔和
+  softEaseInOut: [0.4, 0, 0.2, 1], // 后期更慢
+  gentleEaseOut: [0.1, 0.9, 0.2, 1], // 非常柔和
+  gentleBackOut: [0.2, 1.2, 0.5, 1], // 轻微弹性且柔和
+  smoothEaseOut: [0.15, 0.85, 0.15, 1], // 平滑过渡
+  ultraSmoothOut: [0.05, 0.9, 0.1, 1], // 极度平滑，后期非常慢
+  microSmoothOut: [0.03, 0.94, 0.08, 1], // 微妙平滑，几乎无感知的减速
+  silkEaseOut: [0.04, 0.88, 0.06, 0.98], // 丝绸般平滑，非常柔和的结束
+  featherEaseOut: [0.08, 0.82, 0.17, 1], // 羽毛般轻盈，特别适合小幅度动画
+  gentleSilkOut: [0.02, 0.9, 0.1, 0.99], // 极其柔和，几乎感觉不到停止
+  ultraSlowOut: [0.02, 0.9, 0.05, 0.99], // 极度缓慢的结束
+  silkSlowOut: [0.01, 0.85, 0.05, 0.95], // 丝绸般缓慢，后期极慢
+  luxurySlowOut: [0.01, 0.8, 0.03, 0.92], // 奢华缓慢，几乎静止的结束
+} as const;
+
+//立即执行
+export const DATA_MOTION_ANIMATE = "data-motion-animate";
+//过渡
+//export const DATA_MOTION_TRANSITION = "data-motion-transition";
+//悬停
+export const DATA_MOTION_HOVER = "data-motion-hover";
+//按压
+export const DATA_MOTION_TAP = "data-motion-tap";
+//滚动
+export const DATA_MOTION_SCROLL = "data-motion-scroll";
+//入视图
+export const DATA_MOTION_INVIEW = "data-motion-inview";
+//打开动画，有动作的组件联动
+export const DATA_MOTION_OPEN = "data-motion-open";
+//关闭动画，有动作的组件联动
+export const DATA_MOTION_CLOSE = "data-motion-close";
+
+export enum ANIMATION {
+  // Fade animations
+  FADE = "fade",
+  FADE_UP = "fade-up",
+  FADE_DOWN = "fade-down",
+  FADE_LEFT = "fade-left",
+  FADE_RIGHT = "fade-right",
+  FADE_UP_RIGHT = "fade-up-right",
+  FADE_UP_LEFT = "fade-up-left",
+  FADE_DOWN_RIGHT = "fade-down-right",
+  FADE_DOWN_LEFT = "fade-down-left",
+
+  // Flip animations
+  FLIP_UP = "flip-up",
+  FLIP_DOWN = "flip-down",
+  FLIP_LEFT = "flip-left",
+  FLIP_RIGHT = "flip-right",
+
+  // Slide animations
+  SLIDE_UP = "slide-up",
+  SLIDE_DOWN = "slide-down",
+  SLIDE_LEFT = "slide-left",
+  SLIDE_RIGHT = "slide-right",
+
+  // Zoom animations
+  ZOOM_IN = "zoom-in",
+  ZOOM_IN_UP = "zoom-in-up",
+  ZOOM_IN_DOWN = "zoom-in-down",
+  ZOOM_IN_LEFT = "zoom-in-left",
+  ZOOM_IN_RIGHT = "zoom-in-right",
+  ZOOM_OUT = "zoom-out",
+  ZOOM_OUT_UP = "zoom-out-up",
+  ZOOM_OUT_DOWN = "zoom-out-down",
+  ZOOM_OUT_LEFT = "zoom-out-left",
+  ZOOM_OUT_RIGHT = "zoom-out-right",
+
+  // Special effects
+  ROTATE = "rotate",
+  ROTATE_SCALE = "rotate-scale",
+}
+
+// export enum ANCHOR_PLACEMENT {
+//   TOP_BOTTOM = "top-bottom",
+//   TOP_CENTER = "top-center",
+//   TOP_TOP = "top-top",
+//   CENTER_BOTTOM = "center-bottom",
+//   CENTER_CENTER = "center-center",
+//   CENTER_TOP = "center-top",
+//   BOTTOM_BOTTOM = "bottom-bottom",
+//   BOTTOM_CENTER = "bottom-center",
+//   BOTTOM_TOP = "bottom-top",
+// }
+
+// export enum EASE {
+//   // Basic
+//   LINEAR = "linear",
+//   EASE = "ease",
+//   EASE_IN = "ease-in",
+//   EASE_OUT = "ease-out",
+//   EASE_IN_OUT = "ease-in-out",
+
+//   // Back
+//   EASE_IN_BACK = "ease-in-back",
+//   EASE_OUT_BACK = "ease-out-back",
+//   EASE_IN_OUT_BACK = "ease-in-out-back",
+
+//   // Sine
+//   EASE_IN_SINE = "ease-in-sine",
+//   EASE_OUT_SINE = "ease-out-sine",
+//   EASE_IN_OUT_SINE = "ease-in-out-sine",
+
+//   // Quad
+//   EASE_IN_QUAD = "ease-in-quad",
+//   EASE_OUT_QUAD = "ease-out-quad",
+//   EASE_IN_OUT_QUAD = "ease-in-out-quad",
+
+//   // Cubic
+//   EASE_IN_CUBIC = "ease-in-cubic",
+//   EASE_OUT_CUBIC = "ease-out-cubic",
+//   EASE_IN_OUT_CUBIC = "ease-in-out-cubic",
+
+//   // Quart
+//   EASE_IN_QUART = "ease-in-quart",
+//   EASE_OUT_QUART = "ease-out-quart",
+//   EASE_IN_OUT_QUART = "ease-in-out-quart",
+// }
+
+// Anchor placements
+export const ANCHOR_PLACEMENTS: AnchorOffsets = {
+  "top-bottom": { element: 0, viewport: 100 },
+  "top-center": { element: 0, viewport: 50 },
+  "top-top": { element: 0, viewport: 0 },
+  "center-bottom": { element: 50, viewport: 100 },
+  "center-center": { element: 50, viewport: 50 },
+  "center-top": { element: 50, viewport: 0 },
+  "bottom-bottom": { element: 100, viewport: 100 },
+  "bottom-center": { element: 100, viewport: 50 },
+  "bottom-top": { element: 100, viewport: 0 },
+} as const;
+
+export const ANIMATIONS: Record<string, SimpleAnimation> = {
+  // Fade animations
+  fade: {
+    keyframes: {
+      opacity: [0, 1],
+      scale: [0.8, 1],
+    },
+    transition: { duration: 1, ease: EASINGS.luxurySlowOut },
+  },
+  "fade-up": {
+    keyframes: {
+      opacity: [0, 1],
+      transform: ["translateY(35px)", "translateY(0)"],
+    },
+    transition: { duration: 1.3, ease: EASINGS.silkSlowOut },
+  },
+  "fade-down": {
+    keyframes: {
+      opacity: [0, 1],
+      transform: ["translateY(-35px)", "translateY(0)"],
+    },
+    transition: { duration: 1.3, ease: EASINGS.silkSlowOut },
+  },
+  "fade-left": {
+    keyframes: {
+      opacity: [0, 1],
+      transform: ["translateX(35px)", "translateX(0)"],
+    },
+    transition: { duration: 1.3, ease: EASINGS.silkSlowOut },
+  },
+  "fade-right": {
+    keyframes: {
+      opacity: [0, 1],
+      transform: ["translateX(-35px)", "translateX(0)"],
+    },
+    transition: { duration: 1.3, ease: EASINGS.silkSlowOut },
+  },
+  "fade-up-right": {
+    keyframes: {
+      opacity: [0, 1],
+      transform: ["translate(-35px, 35px)", "translate(0, 0)"],
+    },
+    transition: { duration: 1.3, ease: EASINGS.silkSlowOut },
+  },
+  "fade-up-left": {
+    keyframes: {
+      opacity: [0, 1],
+      transform: ["translate(35px, 35px)", "translate(0, 0)"],
+    },
+    transition: { duration: 1.3, ease: EASINGS.silkSlowOut },
+  },
+  "fade-down-right": {
+    keyframes: {
+      opacity: [0, 1],
+      transform: ["translate(-35px, -35px)", "translate(0, 0)"],
+    },
+    transition: { duration: 1.3, ease: EASINGS.silkSlowOut },
+  },
+  "fade-down-left": {
+    keyframes: {
+      opacity: [0, 1],
+      transform: ["translate(35px, -35px)", "translate(0, 0)"],
+    },
+    transition: { duration: 1.3, ease: EASINGS.silkSlowOut },
+  },
+
+  // Flip animations
+  "flip-up": {
+    keyframes: {
+      transform: [
+        "perspective(2500px) rotateX(60deg)",
+        "perspective(2500px) rotateX(0)",
+      ],
+      opacity: [0, 1],
+    },
+    transition: { duration: 1.4, ease: EASINGS.luxurySlowOut },
+  },
+  "flip-down": {
+    keyframes: {
+      transform: [
+        "perspective(2500px) rotateX(-60deg)",
+        "perspective(2500px) rotateX(0)",
+      ],
+      opacity: [0, 1],
+    },
+    transition: { duration: 1.4, ease: EASINGS.luxurySlowOut },
+  },
+  "flip-left": {
+    keyframes: {
+      transform: [
+        "perspective(2500px) rotateY(-60deg)",
+        "perspective(2500px) rotateY(0)",
+      ],
+      opacity: [0, 1],
+    },
+    transition: { duration: 1.4, ease: EASINGS.luxurySlowOut },
+  },
+  "flip-right": {
+    keyframes: {
+      transform: [
+        "perspective(2500px) rotateY(60deg)",
+        "perspective(2500px) rotateY(0)",
+      ],
+      opacity: [0, 1],
+    },
+    transition: { duration: 1.4, ease: EASINGS.luxurySlowOut },
+  },
+
+  // Slide animations
+  "slide-up": {
+    keyframes: {
+      transform: ["translateY(60%)", "translateY(0)"],
+    },
+    transition: { duration: 1.4, ease: EASINGS.ultraSlowOut },
+  },
+  "slide-down": {
+    keyframes: {
+      transform: ["translateY(-60%)", "translateY(0)"],
+    },
+    transition: { duration: 1.4, ease: EASINGS.ultraSlowOut },
+  },
+  "slide-left": {
+    keyframes: {
+      transform: ["translateX(60%)", "translateX(0)"],
+    },
+    transition: { duration: 1.4, ease: EASINGS.ultraSlowOut },
+  },
+  "slide-right": {
+    keyframes: {
+      transform: ["translateX(-60%)", "translateX(0)"],
+    },
+    transition: { duration: 1.4, ease: EASINGS.ultraSlowOut },
+  },
+
+  // Zoom animations
+  "zoom-in": {
+    keyframes: {
+      transform: ["scale(0.85)", "scale(1)"],
+      opacity: [0, 1],
+    },
+    transition: { duration: 1.2, ease: EASINGS.silkSlowOut },
+  },
+  "zoom-in-up": {
+    keyframes: {
+      transform: ["scale(0.85) translateY(30px)", "scale(1) translateY(0)"],
+      opacity: [0, 1],
+    },
+    transition: { duration: 1.2, ease: EASINGS.silkSlowOut },
+  },
+  "zoom-in-down": {
+    keyframes: {
+      transform: ["scale(0.85) translateY(-30px)", "scale(1) translateY(0)"],
+      opacity: [0, 1],
+    },
+    transition: { duration: 1.2, ease: EASINGS.silkSlowOut },
+  },
+  "zoom-in-left": {
+    keyframes: {
+      transform: ["scale(0.85) translateX(30px)", "scale(1) translateX(0)"],
+      opacity: [0, 1],
+    },
+    transition: { duration: 1.2, ease: EASINGS.silkSlowOut },
+  },
+  "zoom-in-right": {
+    keyframes: {
+      transform: ["scale(0.85) translateX(-30px)", "scale(1) translateX(0)"],
+      opacity: [0, 1],
+    },
+    transition: { duration: 1.2, ease: EASINGS.silkSlowOut },
+  },
+  "zoom-out": {
+    keyframes: {
+      transform: ["scale(1.15)", "scale(1)"],
+      opacity: [0, 1],
+    },
+    transition: { duration: 1.2, ease: EASINGS.silkSlowOut },
+  },
+  "zoom-out-up": {
+    keyframes: {
+      transform: ["scale(1.15) translateY(30px)", "scale(1) translateY(0)"],
+      opacity: [0, 1],
+    },
+    transition: { duration: 1.2, ease: EASINGS.silkSlowOut },
+  },
+  "zoom-out-down": {
+    keyframes: {
+      transform: ["scale(1.15) translateY(-30px)", "scale(1) translateY(0)"],
+      opacity: [0, 1],
+    },
+    transition: { duration: 1.2, ease: EASINGS.silkSlowOut },
+  },
+  "zoom-out-left": {
+    keyframes: {
+      transform: ["scale(1.15) translateX(30px)", "scale(1) translateX(0)"],
+      opacity: [0, 1],
+    },
+    transition: { duration: 1.2, ease: EASINGS.silkSlowOut },
+  },
+  "zoom-out-right": {
+    keyframes: {
+      transform: ["scale(1.15) translateX(-30px)", "scale(1) translateX(0)"],
+      opacity: [0, 1],
+    },
+    transition: { duration: 1.2, ease: EASINGS.silkSlowOut },
+  },
+
+  // Special effects
+  rotate: {
+    keyframes: {
+      transform: ["rotate(-90deg)", "rotate(0)"],
+      opacity: [0, 1],
+    },
+    transition: { duration: 1.4, ease: EASINGS.luxurySlowOut },
+  },
+  "rotate-scale": {
+    keyframes: {
+      transform: ["rotate(-90deg) scale(0.85)", "rotate(0) scale(1)"],
+      opacity: [0, 1],
+    },
+    transition: { duration: 1.4, ease: EASINGS.luxurySlowOut },
+  },
+};
+
+export const DUAL_ANIMATIONS: Record<string, DualAnimation> = {
+  // Fade animations
+  fade: {
+    in: ANIMATIONS.fade,
+    out: {
+      keyframes: {
+        opacity: [1, 0],
+        scale: [1, 0.98],
+      },
+      transition: { duration: 1, ease: EASINGS.luxurySlowOut },
+    },
+  },
+  "fade-up": {
+    in: ANIMATIONS["fade-up"],
+    out: {
+      keyframes: { opacity: [1, 0], y: [0, -35] },
+      transition: { duration: 1, ease: EASINGS.silkSlowOut },
+    },
+  },
+  "fade-down": {
+    in: ANIMATIONS["fade-down"],
+    out: {
+      keyframes: { opacity: [1, 0], y: [0, 35] },
+      transition: { duration: 1, ease: EASINGS.silkSlowOut },
+    },
+  },
+  "fade-left": {
+    in: ANIMATIONS["fade-left"],
+    out: {
+      keyframes: { opacity: [1, 0], x: [0, -35] },
+      transition: { duration: 1, ease: EASINGS.silkSlowOut },
+    },
+  },
+  "fade-right": {
+    in: ANIMATIONS["fade-right"],
+    out: {
+      keyframes: { opacity: [1, 0], x: [0, 35] },
+      transition: { duration: 1, ease: EASINGS.silkSlowOut },
+    },
+  },
+  "fade-up-right": {
+    in: ANIMATIONS["fade-up-right"],
+    out: {
+      keyframes: { opacity: [1, 0], x: [0, 35], y: [0, -35] },
+      transition: { duration: 1, ease: EASINGS.silkSlowOut },
+    },
+  },
+  "fade-up-left": {
+    in: ANIMATIONS["fade-up-left"],
+    out: {
+      keyframes: { opacity: [1, 0], x: [0, -35], y: [0, -35] },
+      transition: { duration: 1, ease: EASINGS.silkSlowOut },
+    },
+  },
+  "fade-down-right": {
+    in: ANIMATIONS["fade-down-right"],
+    out: {
+      keyframes: { opacity: [1, 0], x: [0, 35], y: [0, 35] },
+      transition: { duration: 1, ease: EASINGS.silkSlowOut },
+    },
+  },
+  "fade-down-left": {
+    in: ANIMATIONS["fade-down-left"],
+    out: {
+      keyframes: { opacity: [1, 0], x: [0, -35], y: [0, 35] },
+      transition: { duration: 1, ease: EASINGS.silkSlowOut },
+    },
+  },
+  // Flip animations
+  "flip-up": {
+    in: ANIMATIONS["flip-up"],
+    out: {
+      keyframes: { rotateX: [0, 60], opacity: [1, 0] },
+      transition: { duration: 1, ease: EASINGS.luxurySlowOut },
+    },
+  },
+  "flip-down": {
+    in: ANIMATIONS["flip-down"],
+    out: {
+      keyframes: { rotateX: [0, -60], opacity: [1, 0] },
+      transition: { duration: 1, ease: EASINGS.luxurySlowOut },
+    },
+  },
+  "flip-left": {
+    in: ANIMATIONS["flip-left"],
+    out: {
+      keyframes: { rotateY: [0, -60], opacity: [1, 0] },
+      transition: { duration: 1, ease: EASINGS.luxurySlowOut },
+    },
+  },
+  "flip-right": {
+    in: ANIMATIONS["flip-right"],
+    out: {
+      keyframes: { rotateY: [0, 60], opacity: [1, 0] },
+      transition: { duration: 1, ease: EASINGS.luxurySlowOut },
+    },
+  },
+  // Slide animations
+  "slide-up": {
+    in: ANIMATIONS["slide-up"],
+    out: {
+      keyframes: { y: [0, -60] },
+      transition: { duration: 1, ease: EASINGS.ultraSlowOut },
+    },
+  },
+  "slide-down": {
+    in: ANIMATIONS["slide-down"],
+    out: {
+      keyframes: { y: [0, 60] },
+      transition: { duration: 1, ease: EASINGS.ultraSlowOut },
+    },
+  },
+  "slide-left": {
+    in: ANIMATIONS["slide-left"],
+    out: {
+      keyframes: { x: [0, -60] },
+      transition: { duration: 1, ease: EASINGS.ultraSlowOut },
+    },
+  },
+  "slide-right": {
+    in: ANIMATIONS["slide-right"],
+    out: {
+      keyframes: { x: [0, 60] },
+      transition: { duration: 1, ease: EASINGS.ultraSlowOut },
+    },
+  },
+  // Zoom animations
+  "zoom-in": {
+    in: ANIMATIONS["zoom-in"],
+    out: {
+      keyframes: { scale: [1, 0.85], opacity: [1, 0] },
+      transition: { duration: 1, ease: EASINGS.silkSlowOut },
+    },
+  },
+  "zoom-in-up": {
+    in: ANIMATIONS["zoom-in-up"],
+    out: {
+      keyframes: { scale: [1, 0.85], y: [0, -30], opacity: [1, 0] },
+      transition: { duration: 1, ease: EASINGS.silkSlowOut },
+    },
+  },
+  "zoom-in-down": {
+    in: ANIMATIONS["zoom-in-down"],
+    out: {
+      keyframes: { scale: [1, 0.85], y: [0, 30], opacity: [1, 0] },
+      transition: { duration: 1, ease: EASINGS.silkSlowOut },
+    },
+  },
+  "zoom-in-left": {
+    in: ANIMATIONS["zoom-in-left"],
+    out: {
+      keyframes: { scale: [1, 0.85], x: [0, -30], opacity: [1, 0] },
+      transition: { duration: 1, ease: EASINGS.silkSlowOut },
+    },
+  },
+  "zoom-in-right": {
+    in: ANIMATIONS["zoom-in-right"],
+    out: {
+      keyframes: { scale: [1, 0.85], x: [0, 30], opacity: [1, 0] },
+      transition: { duration: 1, ease: EASINGS.silkSlowOut },
+    },
+  },
+  "zoom-out": {
+    in: ANIMATIONS["zoom-out"],
+    out: {
+      keyframes: { scale: [1, 1.15], opacity: [1, 0] },
+      transition: { duration: 1, ease: EASINGS.silkSlowOut },
+    },
+  },
+  "zoom-out-up": {
+    in: ANIMATIONS["zoom-out-up"],
+    out: {
+      keyframes: { scale: [1, 1.15], y: [0, -30], opacity: [1, 0] },
+      transition: { duration: 1, ease: EASINGS.silkSlowOut },
+    },
+  },
+  "zoom-out-down": {
+    in: ANIMATIONS["zoom-out-down"],
+    out: {
+      keyframes: { scale: [1, 1.15], y: [0, 30], opacity: [1, 0] },
+      transition: { duration: 1, ease: EASINGS.silkSlowOut },
+    },
+  },
+  "zoom-out-left": {
+    in: ANIMATIONS["zoom-out-left"],
+    out: {
+      keyframes: { scale: [1, 1.15], x: [0, -30], opacity: [1, 0] },
+      transition: { duration: 1, ease: EASINGS.silkSlowOut },
+    },
+  },
+  "zoom-out-right": {
+    in: ANIMATIONS["zoom-out-right"],
+    out: {
+      keyframes: { scale: [1, 1.15], x: [0, 30], opacity: [1, 0] },
+      transition: { duration: 1, ease: EASINGS.silkSlowOut },
+    },
+  },
+  // Special effects
+  rotate: {
+    in: ANIMATIONS.rotate,
+    out: {
+      keyframes: { rotate: [0, 90], opacity: [1, 0] },
+      transition: { duration: 1, ease: EASINGS.luxurySlowOut },
+    },
+  },
+  "rotate-scale": {
+    in: ANIMATIONS["rotate-scale"],
+    out: {
+      keyframes: { rotate: [0, 90], scale: [1, 0.85], opacity: [1, 0] },
+      transition: { duration: 1, ease: EASINGS.luxurySlowOut },
+    },
+  },
+};

package/{dist/motion/index.d.ts → src/motion/index.ts}

@@ -1,2 +1,2 @@
-export * from "./consts";
-export * from "./types";
+export * from "./consts";
+export * from "./types";

package/src/motion/types.ts

@@ -0,0 +1,46 @@
+import { AnimationOptions, DOMKeyframesDefinition } from "motion";
+import { ANIMATION } from "./consts";
+
+// 基础动画配置
+export type BaseAnimation = {
+  preset?: ANIMATION;
+  keyframes?: DOMKeyframesDefinition;
+  transition?: AnimationOptions;
+};
+
+// 简单的单向动画（如 hover, tap 等）
+export type SimpleAnimation = BaseAnimation;
+
+// 双向动画（如 inView 的进入和离开）
+export type DualAnimation = {
+  preset?: ANIMATION;
+  in?: SimpleAnimation;
+  out?: SimpleAnimation;
+};
+
+// 导出具体用途的类型别名，方便代码阅读和维护
+export type HoverAnimation = DualAnimation;
+export type TapAnimation = DualAnimation;
+export type ScrollAnimation = SimpleAnimation;
+export type ViewportAnimation = DualAnimation & {
+  once?: boolean;
+};
+export type SelectionAnimation = DualAnimation;
+
+export type AnchorPlacement =
+  | "top-bottom"
+  | "top-center"
+  | "top-top"
+  | "center-bottom"
+  | "center-center"
+  | "center-top"
+  | "bottom-bottom"
+  | "bottom-center"
+  | "bottom-top";
+
+export type AnchorOffset = {
+  element: number;
+  viewport: number;
+};
+
+export type AnchorOffsets = Record<AnchorPlacement, AnchorOffset>;

package/src/react/components/EnquiryForm/Input.tsx

@@ -0,0 +1,52 @@
+import { forwardRef, HTMLInputTypeAttribute } from "react";
+
+export type InputProps = {
+  label: string;
+  name: string;
+  required?: boolean;
+  className?: string;
+  labelClassName?: string;
+  inputClassName?: string;
+  type?: HTMLInputTypeAttribute;
+  autoFocus?: boolean;
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  error?: string;
+};
+
+export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const {
+    label,
+    name,
+    required,
+    labelClassName,
+    inputClassName,
+    type,
+    autoFocus,
+    value,
+    onChange,
+    error,
+    ...rest
+  } = props;
+
+  return (
+    <div {...rest}>
+      <label htmlFor={name} className={labelClassName}>
+        {label}
+      </label>
+      <input
+        ref={ref}
+        type={type || "text"}
+        id={name}
+        name={name}
+        required={required}
+        className={inputClassName}
+        autoComplete={name}
+        autoFocus={autoFocus}
+        value={value}
+        onChange={onChange}
+      />
+      {error && <p className="text-red-500 mt-1">{error}</p>}
+    </div>
+  );
+});