aural-ui 2.1.10 → 2.1.11

package/dist/components/breadcrumb/index.tsx

@@ -60,7 +60,8 @@ const BreadCrumbItem = ({
   separator?: "chevron" | "slash" | "arrow"
   customSeparator?: React.ReactNode
 }) => {
-  const handleClick = () => {
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault()
     if (isClickable && onItemClick) {
       onItemClick(title, url)
     }
@@ -124,7 +125,8 @@ const BreadCrumbItem = ({
   return (
     <div className="flex items-center gap-1 md:gap-3">
       {isClickable && url ? (
-        <button
+        <a
+          href={url}
           onClick={handleClick}
           className={cn(
             "focus-visible:ring-ring rounded-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-offset-2",
@@ -138,7 +140,7 @@ const BreadCrumbItem = ({
           >
             {title}
           </Typography>
-        </button>
+        </a>
       ) : (
         <Typography
           variant={typographyVariant}

package/dist/components/otp-inputs/index.tsx

@@ -31,6 +31,8 @@ interface SingleOtpInputType {
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
   onFocus: () => void
   onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void
+  onPaste?: (event: React.ClipboardEvent<HTMLInputElement>) => void
+
   style?: React.CSSProperties
   value: string | undefined
   type?: "text" | "number"
@@ -100,10 +102,6 @@ export default function OtpInputs(props: OTPInputsType) {
     }
   }
 
-  const onBlur = () => {
-    setActiveInput(-1)
-  }
-
   const handleOnKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     switch (e.key) {
       case "Backspace":
@@ -138,6 +136,42 @@ export default function OtpInputs(props: OTPInputsType) {
     }
   }
 
+  const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault()
+    const pastedData = e.clipboardData.getData("text/plain")
+
+    const validChars = pastedData
+      .split("")
+      .map((char) => getRightValue(char))
+      .filter((char) => char !== "")
+      .slice(0, length)
+
+    if (validChars.length === 0) return
+
+    const updatedOTPValues = [...otpValues]
+    let currentIndex = activeInput
+    for (let i = 0; i < validChars.length && currentIndex < length; i++) {
+      updatedOTPValues[currentIndex] = validChars[i]
+      currentIndex++
+    }
+
+    setOTPValues(updatedOTPValues)
+    handleOtpChange(updatedOTPValues)
+
+    const nextEmptyIndex = updatedOTPValues.findIndex(
+      (val, idx) => idx >= activeInput && val === ""
+    )
+    const focusIndex =
+      nextEmptyIndex !== -1
+        ? nextEmptyIndex
+        : Math.min(length - 1, activeInput + validChars.length)
+    focusInput(focusIndex)
+  }
+
+  const onBlur = () => {
+    setActiveInput(-1)
+  }
+
   const messagesMap = {
     true: messages?.success ?? "✓ Valid input",
     false: messages?.error ?? "✗ Invalid input. Try again",
@@ -168,6 +202,7 @@ export default function OtpInputs(props: OTPInputsType) {
               value={otpValues && otpValues[index]}
               autoComplete="off"
               onFocus={handleOnFocus(index)}
+              onPaste={handleOnPaste}
               onChange={handleOnChange}
               onKeyDown={handleOnKeyDown}
               onBlur={onBlur}

package/dist/components/typography/meta.ts

@@ -10,6 +10,7 @@ export const meta = {
     "--color-fm-tertiary",
     "--font-fm-brand",
     "--font-fm-text",
+    "--font-fm-toons",
     "--leading-fm-2xl",
     "--leading-fm-3xl",
     "--leading-fm-4xl",

package/dist/icons/index.ts

@@ -71,6 +71,7 @@ export * from "./paper-plane-icon"
 export * from "./pause-icon"
 export * from "./pencil-icon"
 export * from "./plus-icon"
+export * from "./phone-icon"
 export * from "./search-icon"
 export * from "./setting-icon"
 export * from "./share-icon"
@@ -84,6 +85,7 @@ export * from "./spinner-solid-neutral-icon"
 export * from "./star-icon"
 export * from "./store-coin-icon"
 export * from "./suggestion-icon"
+export * from "./shield-icon"
 export * from "./sun-icon"
 export * from "./text-color-icon"
 export * from "./text-indicator-icon"