UNPKG

@lobehub/ui

Version:

Lobe UI is an open-source UI component library for building AIGC web apps

1 lines 1.83 kB
{"version":3,"file":"InputOTP.mjs","names":[],"sources":["../../../src/base-ui/Input/InputOTP.tsx"],"sourcesContent":["'use client';\n\nimport { OTPField } from '@base-ui/react/otp-field';\nimport { cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { rootVariants, styles } from './style';\nimport type { InputOTPProps } from './type';\n\nconst InputOTP = memo<InputOTPProps>(\n ({\n className,\n classNames,\n styles: customStyles,\n style,\n variant,\n shadow,\n size = 'middle',\n length = 6,\n onChange,\n ...rest\n }) => {\n const { isDarkMode } = useThemeMode();\n const mergedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n\n return (\n <OTPField.Root\n className={cx(styles.otpRoot, className)}\n length={length}\n style={style}\n onValueChange={onChange}\n {...rest}\n >\n {Array.from({ length }, (_, index) => (\n <OTPField.Input\n key={index}\n style={customStyles?.input}\n className={cx(\n rootVariants({ shadow, size, variant: mergedVariant }),\n styles.otpCell,\n classNames?.input,\n )}\n />\n ))}\n </OTPField.Root>\n );\n },\n);\n\nInputOTP.displayName = 'InputOTP';\n\nexport default InputOTP;\n"],"mappings":";;;;;;;AASA,MAAM,WAAW,MACd,EACC,WACA,YACA,QAAQ,cACR,OACA,SACA,QACA,OAAO,UACP,SAAS,GACT,UACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,cAAc;CACrC,MAAM,gBAAgB,YAAY,aAAa,WAAW;AAE1D,QACE,oBAAC,SAAS,MAAV;EACE,WAAW,GAAG,OAAO,SAAS,UAAU;EAChC;EACD;EACP,eAAe;EACf,GAAI;YAEH,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,UAC1B,oBAAC,SAAS,OAAV;GAEE,OAAO,cAAc;GACrB,WAAW,GACT,aAAa;IAAE;IAAQ;IAAM,SAAS;IAAe,CAAC,EACtD,OAAO,SACP,YAAY,MACb;GACD,EAPK,MAOL,CACF;EACY,CAAA;EAGrB;AAED,SAAS,cAAc"}