@janbox/storefront-ui 1.0.0

package/dist/lib/notifications/notifications.cjs

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react$2 = require("react");
+const react = require("@floating-ui/react");
+const jotai = require("jotai");
+const lodashEs = require("lodash-es");
+const react$1 = require("motion/react");
+const helpers = require("./helpers.cjs");
+const utils_index = require("../../utils/index.cjs");
+const theme_index = require("../../theme/index.cjs");
+const theme_screens = require("../../theme/screens.cjs");
+const Notification = ({
+  notification
+}) => {
+  const { main, light } = utils_index.getColorShadesByVariant(notification.color);
+  const [, setAtomValue] = jotai.useAtom(helpers.notificationAtom);
+  const timerRef = react$2.useRef(null);
+  const controls = react$1.useAnimation();
+  const progressControls = react$1.useAnimation();
+  const startTimeRef = react$2.useRef(Date.now());
+  const remainingTimeRef = react$2.useRef(notification.duration ?? 3e3);
+  const removeNotification = react$2.useCallback(() => {
+    setAtomValue((prev) => ({
+      ...prev,
+      entries: prev.entries.filter((n) => n.id !== notification.id)
+    }));
+  }, [notification.id, setAtomValue]);
+  const clearTimer = react$2.useCallback(() => {
+    if (lodashEs.isNil(timerRef.current)) return;
+    clearTimeout(timerRef.current);
+    timerRef.current = null;
+  }, []);
+  const startTimer = react$2.useCallback(
+    (timeLeft) => {
+      clearTimer();
+      const duration = timeLeft ?? remainingTimeRef.current;
+      startTimeRef.current = Date.now();
+      timerRef.current = setTimeout(() => {
+        removeNotification();
+      }, duration);
+    },
+    [clearTimer, removeNotification]
+  );
+  react$2.useEffect(() => {
+    startTimer(notification.duration ?? 3e3);
+    progressControls.start({
+      scaleX: 1,
+      transition: {
+        duration: (notification.duration ?? 3e3) / 1e3,
+        ease: "linear"
+      }
+    });
+    return () => {
+      clearTimer();
+    };
+  }, []);
+  const handleMouseEnter = react$2.useCallback(() => {
+    const elapsed = Date.now() - startTimeRef.current;
+    remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
+    clearTimer();
+    progressControls.stop();
+  }, [clearTimer, progressControls]);
+  const handleMouseLeave = react$2.useCallback(() => {
+    startTimer(remainingTimeRef.current);
+    progressControls.start({
+      scaleX: 1,
+      transition: {
+        duration: remainingTimeRef.current / 1e3,
+        ease: "linear"
+      }
+    });
+  }, [startTimer, progressControls]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react$1.motion.div,
+    {
+      layout: true,
+      initial: { opacity: 0, x: 100 },
+      animate: { opacity: 1, x: 0 },
+      exit: { opacity: 0, x: 300 },
+      transition: { duration: 0.3 },
+      css: {
+        backgroundColor: light,
+        outlineColor: main,
+        width: 440,
+        borderRadius: 12,
+        outlineWidth: 1,
+        outlineOffset: -1,
+        outlineStyle: "solid",
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
+        maxWidth: "100%",
+        pointerEvents: "auto",
+        cursor: "grab",
+        padding: 16,
+        overflow: "hidden",
+        position: "relative"
+      },
+      drag: "x",
+      dragConstraints: { left: 0, right: 0 },
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onDragEnd: (_event, info) => {
+        if (Math.abs(info.offset.x) > 100) {
+          controls.start({ x: info.offset.x > 0 ? 300 : -300, opacity: 0 }).then(removeNotification);
+        } else {
+          controls.start({ x: 0 });
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { css: {
+          fontSize: "0.875rem",
+          lineHeight: "1.25rem",
+          fontWeight: 500,
+          [theme_screens.mediaQuery("sm")]: { fontSize: "1rem", lineHeight: "1.5rem" }
+        }, children: notification.title ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { css: {
+          fontSize: "0.75rem",
+          lineHeight: "1rem",
+          [theme_screens.mediaQuery("sm")]: { fontSize: "0.875rem", lineHeight: "1.25rem" }
+        }, children: notification.message ?? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { css: { position: "absolute", left: 0, right: 0, bottom: 4, paddingLeft: 4, paddingRight: 4, overflow: "hidden", pointerEvents: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          react$1.motion.div,
+          {
+            css: {
+              height: 4,
+              width: "100%",
+              borderRadius: 9999
+            },
+            style: {
+              backgroundImage: `linear-gradient(to right, ${light}, ${main})`,
+              transformOrigin: "left"
+            },
+            initial: { scaleX: 0 },
+            animate: progressControls
+          }
+        ) })
+      ]
+    }
+  );
+};
+const Notifications = () => {
+  const { entries } = jotai.useAtomValue(helpers.notificationAtom);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      css: {
+        zIndex: theme_index.FLOATING_Z_INDEX + 1,
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        pointerEvents: "none",
+        padding: 8,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-end",
+        gap: 8
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { mode: "popLayout", children: entries.map((notification) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(Notification, { notification }, notification.id);
+      }) })
+    }
+  ) });
+};
+exports.Notifications = Notifications;

package/dist/lib/notifications/notifications.d.ts

@@ -0,0 +1,2 @@
+export declare const Notifications: () => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=notifications.d.ts.map

package/dist/lib/notifications/notifications.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/lib/notifications/notifications.tsx"],"names":[],"mappings":"AAuKA,eAAO,MAAM,aAAa,wDA8BzB,CAAC"}

package/dist/lib/notifications/notifications.js

@@ -0,0 +1,167 @@
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { useRef, useCallback, useEffect } from "react";
+import { FloatingPortal } from "@floating-ui/react";
+import { useAtomValue, useAtom } from "jotai";
+import { isNil } from "lodash-es";
+import { AnimatePresence, useAnimation, motion } from "motion/react";
+import { notificationAtom } from "./helpers.js";
+import { getColorShadesByVariant } from "../../utils/index.js";
+import { FLOATING_Z_INDEX } from "../../theme/index.js";
+import { mediaQuery } from "../../theme/screens.js";
+const Notification = ({
+  notification
+}) => {
+  const { main, light } = getColorShadesByVariant(notification.color);
+  const [, setAtomValue] = useAtom(notificationAtom);
+  const timerRef = useRef(null);
+  const controls = useAnimation();
+  const progressControls = useAnimation();
+  const startTimeRef = useRef(Date.now());
+  const remainingTimeRef = useRef(notification.duration ?? 3e3);
+  const removeNotification = useCallback(() => {
+    setAtomValue((prev) => ({
+      ...prev,
+      entries: prev.entries.filter((n) => n.id !== notification.id)
+    }));
+  }, [notification.id, setAtomValue]);
+  const clearTimer = useCallback(() => {
+    if (isNil(timerRef.current)) return;
+    clearTimeout(timerRef.current);
+    timerRef.current = null;
+  }, []);
+  const startTimer = useCallback(
+    (timeLeft) => {
+      clearTimer();
+      const duration = timeLeft ?? remainingTimeRef.current;
+      startTimeRef.current = Date.now();
+      timerRef.current = setTimeout(() => {
+        removeNotification();
+      }, duration);
+    },
+    [clearTimer, removeNotification]
+  );
+  useEffect(() => {
+    startTimer(notification.duration ?? 3e3);
+    progressControls.start({
+      scaleX: 1,
+      transition: {
+        duration: (notification.duration ?? 3e3) / 1e3,
+        ease: "linear"
+      }
+    });
+    return () => {
+      clearTimer();
+    };
+  }, []);
+  const handleMouseEnter = useCallback(() => {
+    const elapsed = Date.now() - startTimeRef.current;
+    remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
+    clearTimer();
+    progressControls.stop();
+  }, [clearTimer, progressControls]);
+  const handleMouseLeave = useCallback(() => {
+    startTimer(remainingTimeRef.current);
+    progressControls.start({
+      scaleX: 1,
+      transition: {
+        duration: remainingTimeRef.current / 1e3,
+        ease: "linear"
+      }
+    });
+  }, [startTimer, progressControls]);
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      layout: true,
+      initial: { opacity: 0, x: 100 },
+      animate: { opacity: 1, x: 0 },
+      exit: { opacity: 0, x: 300 },
+      transition: { duration: 0.3 },
+      css: {
+        backgroundColor: light,
+        outlineColor: main,
+        width: 440,
+        borderRadius: 12,
+        outlineWidth: 1,
+        outlineOffset: -1,
+        outlineStyle: "solid",
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
+        maxWidth: "100%",
+        pointerEvents: "auto",
+        cursor: "grab",
+        padding: 16,
+        overflow: "hidden",
+        position: "relative"
+      },
+      drag: "x",
+      dragConstraints: { left: 0, right: 0 },
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onDragEnd: (_event, info) => {
+        if (Math.abs(info.offset.x) > 100) {
+          controls.start({ x: info.offset.x > 0 ? 300 : -300, opacity: 0 }).then(removeNotification);
+        } else {
+          controls.start({ x: 0 });
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { css: {
+          fontSize: "0.875rem",
+          lineHeight: "1.25rem",
+          fontWeight: 500,
+          [mediaQuery("sm")]: { fontSize: "1rem", lineHeight: "1.5rem" }
+        }, children: notification.title ?? /* @__PURE__ */ jsx(Fragment, { children: " " }) }),
+        /* @__PURE__ */ jsx("div", { css: {
+          fontSize: "0.75rem",
+          lineHeight: "1rem",
+          [mediaQuery("sm")]: { fontSize: "0.875rem", lineHeight: "1.25rem" }
+        }, children: notification.message ?? /* @__PURE__ */ jsx(Fragment, { children: " " }) }),
+        /* @__PURE__ */ jsx("div", { css: { position: "absolute", left: 0, right: 0, bottom: 4, paddingLeft: 4, paddingRight: 4, overflow: "hidden", pointerEvents: "none" }, children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            css: {
+              height: 4,
+              width: "100%",
+              borderRadius: 9999
+            },
+            style: {
+              backgroundImage: `linear-gradient(to right, ${light}, ${main})`,
+              transformOrigin: "left"
+            },
+            initial: { scaleX: 0 },
+            animate: progressControls
+          }
+        ) })
+      ]
+    }
+  );
+};
+const Notifications = () => {
+  const { entries } = useAtomValue(notificationAtom);
+  return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      css: {
+        zIndex: FLOATING_Z_INDEX + 1,
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        pointerEvents: "none",
+        padding: 8,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "flex-end",
+        gap: 8
+      },
+      children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: entries.map((notification) => {
+        return /* @__PURE__ */ jsx(Notification, { notification }, notification.id);
+      }) })
+    }
+  ) });
+};
+export {
+  Notifications
+};

package/dist/lib/otp-input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './otp-input';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/otp-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/otp-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/lib/otp-input/otp-input.cjs

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const react = require("react");
+const lodashEs = require("lodash-es");
+const useControllableState = require("../../hooks/use-controllable-state.cjs");
+const theme_screens = require("../../theme/screens.cjs");
+require("../../theme/palette.cjs");
+const theme_typography = require("../../theme/typography.cjs");
+const input = require("../input/input.cjs");
+const OtpInput = ({
+  length = 6,
+  onFullfilled,
+  onChange,
+  disabled,
+  autoFocus,
+  isLoading,
+  defaultValue,
+  value,
+  error
+}) => {
+  const [otp, setOtp] = useControllableState.useControllableState({
+    defaultValue: lodashEs.times(length, (num) => (defaultValue == null ? void 0 : defaultValue.at(num)) ?? ""),
+    value: value == null ? void 0 : value.split("")
+  });
+  const inputRefs = react.useRef([]);
+  const getInputIndex = (target) => {
+    return Number(target.dataset.index);
+  };
+  react.useEffect(() => {
+    var _a;
+    if (autoFocus) {
+      (_a = inputRefs.current.at(0)) == null ? void 0 : _a.focus();
+    }
+  }, [autoFocus]);
+  const handleChange = (e) => {
+    var _a;
+    if (disabled) return;
+    const value2 = e.target.value;
+    const index = getInputIndex(e.target);
+    if (value2 && !/^\d$/.test(value2)) return;
+    const newOtp = [...otp];
+    newOtp[index] = value2;
+    setOtp(newOtp);
+    onChange == null ? void 0 : onChange(newOtp.join(""));
+    if (value2 && index < length - 1) {
+      (_a = inputRefs.current.at(index + 1)) == null ? void 0 : _a.focus();
+    }
+    if (newOtp.every((digit) => digit !== "") && newOtp.join("").length === length) {
+      onFullfilled == null ? void 0 : onFullfilled(newOtp.join(""));
+    }
+  };
+  const handleKeyDown = (e) => {
+    var _a, _b, _c;
+    if (disabled) return;
+    const index = getInputIndex(e.target);
+    if (e.key === "Backspace") {
+      if (otp[index]) {
+        const newOtp = [...otp];
+        newOtp[index] = "";
+        setOtp(newOtp);
+        onChange == null ? void 0 : onChange(newOtp.join(""));
+      } else if (index > 0) {
+        const newOtp = [...otp];
+        newOtp[index - 1] = "";
+        setOtp(newOtp);
+        (_a = inputRefs.current.at(index - 1)) == null ? void 0 : _a.focus();
+        onChange == null ? void 0 : onChange(newOtp.join(""));
+      }
+    }
+    if (e.key === "ArrowLeft" && index > 0) {
+      (_b = inputRefs.current.at(index - 1)) == null ? void 0 : _b.focus();
+    }
+    if (e.key === "ArrowRight" && index < length - 1) {
+      (_c = inputRefs.current.at(index + 1)) == null ? void 0 : _c.focus();
+    }
+  };
+  const handlePaste = (e) => {
+    var _a;
+    if (disabled) return;
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData("text/plain");
+    const pastedDigits = pastedData.replace(/\D/g, "").slice(0, length);
+    if (pastedDigits) {
+      const newOtp = [...otp];
+      pastedDigits.split("").forEach((digit, index) => {
+        if (index < length) {
+          newOtp[index] = digit;
+        }
+      });
+      setOtp(newOtp);
+      onChange == null ? void 0 : onChange(newOtp.join(""));
+      const lastFilledIndex = Math.min(pastedDigits.length - 1, length - 1);
+      (_a = inputRefs.current.at(lastFilledIndex)) == null ? void 0 : _a.focus();
+      if (newOtp.every((digit) => digit !== "") && newOtp.join("").length === length) {
+        onFullfilled == null ? void 0 : onFullfilled(newOtp.join(""));
+      }
+    }
+  };
+  const onFocus = (e) => {
+    e.target.select();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { css: { display: "flex", width: "100%", gap: "0.5rem", [theme_screens.mediaQuery("sm")]: { gap: "0.75rem" } }, children: otp.map((digit, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { css: { flex: "1 1 0%", position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    input.Input,
+    {
+      ref: (el) => {
+        inputRefs.current[index] = el;
+      },
+      type: "text",
+      inputMode: "numeric",
+      pattern: "\\d*",
+      maxLength: 1,
+      "data-index": index,
+      value: digit,
+      onChange: handleChange,
+      onFocus,
+      onKeyDown: handleKeyDown,
+      onPaste: index === 0 ? handlePaste : void 0,
+      disabled,
+      readOnly: isLoading,
+      css: {
+        textAlign: "center",
+        fontWeight: 500,
+        fontSize: theme_typography.getTypographyVar("lg").fontSize,
+        lineHeight: theme_typography.getTypographyVar("lg").lineHeight
+      },
+      xs: { size: "md" },
+      error
+    }
+  ) }, index)) });
+};
+exports.OtpInput = OtpInput;

package/dist/lib/otp-input/otp-input.d.ts

@@ -0,0 +1,3 @@
+import { OtpInputProps } from './types';
+export declare const OtpInput: ({ length, onFullfilled, onChange, disabled, autoFocus, isLoading, defaultValue, value, error, }: OtpInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=otp-input.d.ts.map

package/dist/lib/otp-input/otp-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.d.ts","sourceRoot":"","sources":["../../../src/lib/otp-input/otp-input.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AASxC,eAAO,MAAM,QAAQ,oGAUlB,aAAa,qDA4If,CAAC"}

package/dist/lib/otp-input/otp-input.js

@@ -0,0 +1,132 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { times } from "lodash-es";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { mediaQuery } from "../../theme/screens.js";
+import "../../theme/palette.js";
+import { getTypographyVar } from "../../theme/typography.js";
+import { Input } from "../input/input.js";
+const OtpInput = ({
+  length = 6,
+  onFullfilled,
+  onChange,
+  disabled,
+  autoFocus,
+  isLoading,
+  defaultValue,
+  value,
+  error
+}) => {
+  const [otp, setOtp] = useControllableState({
+    defaultValue: times(length, (num) => (defaultValue == null ? void 0 : defaultValue.at(num)) ?? ""),
+    value: value == null ? void 0 : value.split("")
+  });
+  const inputRefs = useRef([]);
+  const getInputIndex = (target) => {
+    return Number(target.dataset.index);
+  };
+  useEffect(() => {
+    var _a;
+    if (autoFocus) {
+      (_a = inputRefs.current.at(0)) == null ? void 0 : _a.focus();
+    }
+  }, [autoFocus]);
+  const handleChange = (e) => {
+    var _a;
+    if (disabled) return;
+    const value2 = e.target.value;
+    const index = getInputIndex(e.target);
+    if (value2 && !/^\d$/.test(value2)) return;
+    const newOtp = [...otp];
+    newOtp[index] = value2;
+    setOtp(newOtp);
+    onChange == null ? void 0 : onChange(newOtp.join(""));
+    if (value2 && index < length - 1) {
+      (_a = inputRefs.current.at(index + 1)) == null ? void 0 : _a.focus();
+    }
+    if (newOtp.every((digit) => digit !== "") && newOtp.join("").length === length) {
+      onFullfilled == null ? void 0 : onFullfilled(newOtp.join(""));
+    }
+  };
+  const handleKeyDown = (e) => {
+    var _a, _b, _c;
+    if (disabled) return;
+    const index = getInputIndex(e.target);
+    if (e.key === "Backspace") {
+      if (otp[index]) {
+        const newOtp = [...otp];
+        newOtp[index] = "";
+        setOtp(newOtp);
+        onChange == null ? void 0 : onChange(newOtp.join(""));
+      } else if (index > 0) {
+        const newOtp = [...otp];
+        newOtp[index - 1] = "";
+        setOtp(newOtp);
+        (_a = inputRefs.current.at(index - 1)) == null ? void 0 : _a.focus();
+        onChange == null ? void 0 : onChange(newOtp.join(""));
+      }
+    }
+    if (e.key === "ArrowLeft" && index > 0) {
+      (_b = inputRefs.current.at(index - 1)) == null ? void 0 : _b.focus();
+    }
+    if (e.key === "ArrowRight" && index < length - 1) {
+      (_c = inputRefs.current.at(index + 1)) == null ? void 0 : _c.focus();
+    }
+  };
+  const handlePaste = (e) => {
+    var _a;
+    if (disabled) return;
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData("text/plain");
+    const pastedDigits = pastedData.replace(/\D/g, "").slice(0, length);
+    if (pastedDigits) {
+      const newOtp = [...otp];
+      pastedDigits.split("").forEach((digit, index) => {
+        if (index < length) {
+          newOtp[index] = digit;
+        }
+      });
+      setOtp(newOtp);
+      onChange == null ? void 0 : onChange(newOtp.join(""));
+      const lastFilledIndex = Math.min(pastedDigits.length - 1, length - 1);
+      (_a = inputRefs.current.at(lastFilledIndex)) == null ? void 0 : _a.focus();
+      if (newOtp.every((digit) => digit !== "") && newOtp.join("").length === length) {
+        onFullfilled == null ? void 0 : onFullfilled(newOtp.join(""));
+      }
+    }
+  };
+  const onFocus = (e) => {
+    e.target.select();
+  };
+  return /* @__PURE__ */ jsx("div", { css: { display: "flex", width: "100%", gap: "0.5rem", [mediaQuery("sm")]: { gap: "0.75rem" } }, children: otp.map((digit, index) => /* @__PURE__ */ jsx("div", { css: { flex: "1 1 0%", position: "relative" }, children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      ref: (el) => {
+        inputRefs.current[index] = el;
+      },
+      type: "text",
+      inputMode: "numeric",
+      pattern: "\\d*",
+      maxLength: 1,
+      "data-index": index,
+      value: digit,
+      onChange: handleChange,
+      onFocus,
+      onKeyDown: handleKeyDown,
+      onPaste: index === 0 ? handlePaste : void 0,
+      disabled,
+      readOnly: isLoading,
+      css: {
+        textAlign: "center",
+        fontWeight: 500,
+        fontSize: getTypographyVar("lg").fontSize,
+        lineHeight: getTypographyVar("lg").lineHeight
+      },
+      xs: { size: "md" },
+      error
+    }
+  ) }, index)) });
+};
+export {
+  OtpInput
+};

package/dist/lib/otp-input/types.d.ts

@@ -0,0 +1,20 @@
+import { JSX } from 'react';
+import { ResponsiveDesign, ShallowMerge } from '../../types';
+import { InputProps } from '../input';
+type OtpInputResponsiveProps = {
+    size?: InputProps['size'];
+};
+type OtpInputExtendedProps = ResponsiveDesign<OtpInputResponsiveProps> & {
+    length?: number;
+    onChange?: (otp: string) => void;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    onFullfilled?: (otp: string) => void;
+    isLoading?: boolean;
+    defaultValue?: string;
+    value?: string;
+    error?: boolean;
+};
+export type OtpInputProps = ShallowMerge<JSX.IntrinsicElements['div'], OtpInputExtendedProps>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/otp-input/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/otp-input/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,OAAO,EAAC,gBAAgB,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,KAAK,uBAAuB,GAAG;IAC7B,IAAI,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;CAC3B,CAAC;AAEF,KAAK,qBAAqB,GAAG,gBAAgB,CAAC,uBAAuB,CAAC,GAAG;IACvE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,qBAAqB,CAAC,CAAC"}